Take a look at the history and specification of HTML. The HTML specification was produced by the W3C in collaboration with the WHATWG, and HTML5 is no exception. Among them:

  • W3C stands for World Wide Web Consortium
  • WHATWG refers to the Web Hypertext Application Technology Working Group

It sounds like “collaborative output”, but it’s more like “HTML5 has two sets of specifications”. Now (just a few days ago, on May 29, 2018) they say they will develop a single version of the HTML specification.

HTML5 new tags and functions, the general I believe we all know, here is not wordy, here introduces two we may not know the function, very practical!

Add pinyin to Chinese characters

The following code

<ruby>Be an engineer, not a coder<rt>zuo gong cheng shi bu zuo ma nong</rt>
</ruby>
Copy the code

Results the following

Expand and fold component

A few lines of code

<details>
  <summary>Public account "Front-end Foreign Language Selection"</summary>Welcome everyone to pay attention to my public number, focus on the big front end, full stack, programmer growth of the public number! If you have inspiration and help, you can click a concern, collection, also can leave a message to discuss, this is the biggest encouragement to the author. About the author: Web front-end engineer, full stack development engineer, continuous learner.</details>
Copy the code

You can achieve the following effect

Isn’t it great 🤪

In the past, we had to rely on JavaScript to implement things like this. Now, HTML is also becoming more “interactive.”

Native progress bar and metrics

The progress TAB shows the progress:

It is important to note that progress is not suitable for measuring. If we want to indicate a measure, we should use the meter tag instead. What kind of label is this?

The meter is used to measure data within a given gauge:

<meter value="3" min="0" max="10"></meter>Three over ten<br>
<meter value="0.6"></meter> 60%
Copy the code

The Chrome display is as follows

The sample effects and full code for this article have been posted on my blog’s small code page.

Related reading:

  • Take a look at the HTML Datalist and use it to create mini examples of autocomplete input goddesses
  • Say no to JavaScript. Here are three CSS tricks you can definitely use
  • 【 Tips 】 Skillfully use CSS property values to match the selector
  • Use React Hook everyday to create a sortable component
  • 【 Actual combat 】 This cool play particle effect, you can also learn! Using the Web animation API

If you have inspiration and help, you can click a concern, collection, also can leave a message to discuss, this is the biggest encouragement to the author.

About the author: Web front-end engineer, full stack development engineer, continuous learner.

Now pay attention to “front-end foreign language selection” wechat public number, but also send a network of high-quality video courses network disk information ah, can save you a lot of money!