Categories
Guides

Uncommon HTML5 tags

I’m pretty sure that you all are using HTML5 based files, using the most known tags as, <header><section><article> and <footer>, among others, but there are a couple of those missing in order to correctly use the semantics of this language.

I’m listing here the most important ones that will help you to develop and follow the semantic of HTML5.

The tag <details> specifies additional details that the user can view or hide on demand. Use it to create an interactive widget that the user can open and close. Semantically you can use any type of content inside it and should not be visible unless the open attribute is set.

<details open>
<p>Credit card required at time of booking.</p>
</details>

<dialog> defines a dialog box element or window.

<dialog open>
<p>Welcome do our hotel.</p>
</dialog>

The <mark> tag defines marked text, to highlight parts of your text.

<p>Credit card required at time of 
<mark>booking.</mark>
</p>

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

<details>
<summary>Payment conditions</summary>
<p>Credit card required at time of booking.</p>
</details>

The <time> tag defines a human-readable date/time. This element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user’s calendar, and search engines can produce smarter search results.

<p>Breakfast buffet starts 
at<time>7.00 AM</time>
at the restaurant.</p>
<p>Concert at the lobby 
in<time datetime="2018-06-20T19:00">June 
20th 7.00 PM</time></p>

The specification for the <small> tag explains that this tag should be used to lower the importance of text or information. Browsers interpret this by making the font smaller so it has less visible impact.

<p>Cancelations must be 
canceled up to 48h, <small>to avoid 
penalty of one night per room.</small></p>

You can now use the <datalist> element to define the list of valid choices for your various <input> tags. This component is slightly different on various browsers, but the common way it works is by showing a small drop-down arrow to the right of the field indicating that this field has options.

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

The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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