• The most uncommon HTML5 tags you can use right Now
  • By Pedro M. S. Duarte
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: lsvih
  • Proofreader: sophiayang1997

HMLT5 was released by the World Wide Web Consortium (W3C) in October 2014. It aims to improve THE HTML language to support the latest multimedia devices, while ensuring that computers and devices (such as Web browsers, parsers, etc.) can be parsed under the premise of enhancing human readability.

HTML tutorial: www.geekchamp.com

I’m sure all of you are already using HTML5 for your web pages, and use common tags like

,

,

, and

. In addition, some of the less common tags are semantic development that helps you use HTML5 properly.

Here I’ve listed some of the most important tags that I hope will help you develop with HTML5 semantics.

<details>

The < Details > tag specifies what the user can view or hide on demand and can be used to create widgets that can be closed and opened by the user. Semantically, you can use any type of content in it, but if you don’t set the open property to it, the content won’t be visible.

<details open><p> Credit card required when booking </p></details>

<dialog>


defines a dialog element or window.

<dialog Open ><p> Welcome to our hotel </p></dialog>

<mark>

The tag defines the text to be marked and can be used to highlight a portion of your text.

<p> Credit card required to book </mark> at <mark>

<summary>

The

tag defines a visible title for < Details >. Click on the title to show or hide the < Details > content.

<details><summary> Payment terms </summary><p> Credit card required when booking </p></details>

<time> 与 <datetime>

The

<p> Breakfast buffet starts at <time>7.00 AM</time> in the dining room </p>

<p><time datetime="2018-06-20T19:00"> </p>

<small>

A canonical explanation of the tag, which can be used to reduce the importance of text or information. The browser will reduce font size to reduce visual impact.

<p> Cancellations must be made 48 hours in advance to avoid additional charges per room/night </small></ P >

<datalist>

You can use the element to define the list of valid selections in the tag. This component looks slightly different from browser to browser, but what is common is that a small drop-down arrow appears to the right of the field, indicating that the field is available for selection. Click here to see the effect.

<datalist><option value="Master Card"><option value="Visa"><option value="American Express"></datalist>

<progress>

The HTML element displays an indicator of the completion of a task, usually as a progress bar.

<progress value="70" max="100">70 %</progress>

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.