The most uncommon HTML5 tags you can use right now
<!DOCTYPE html> it was published in October 2014 by the World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc.
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.
<details>
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>
<dialog> defines a dialog box element or window.
<dialog open><p>Welcome do our hotel.</p></dialog>
<mark>
The <mark> tag defines marked text, to highlight parts of your text.
<p>Credit card required at time of <mark>booking.</mark></p>
<summary>
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>
<time> and <datetime>
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>
<small>
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>
<datalist>
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. Check codepen here.
<datalist><option value="Master Card"><option value="Visa"><option value="American Express"></datalist>
<progress>
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>
About the author
Pedro M. S. Duarte passioned designer and front-end developer from Lisbon, Portugal. Almost 20 years experience in the design field going from editorial to graphics and then to digital, since 2009 he has been designing high impact websites for the hotel industry. Has an observable desire to question and challenge design, trends and technology. Loves diving into usability research, evaluations and testing. Design and develop for multiple devices using responsive design principals, user-focus design and accessibility.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
