20 HTML5 tags worth knowing: layout, media and function

Here is a list of 20 HTML5 tags, some of them well known, others far less so, together with how they fare in Chrome, Firefox, Safari and Internet Explorer.

Infographic: 20 HTML5 tags worth knowing

8 layout tags

These tags are mostly there to help search engines make sense of your site.

<article> – Marks out an article, a blog comment or a forum post, it usually holds a heading and a paragraph.
<section> – Marks out a section covering one theme. An <article> can be made up of several themed sections ( <section> ), and the other way round. It too takes a heading and an introduction, and you can label it with the aria-label attribute.
<aside> – Defines a section meant to sit beside your main content, ideal for sidebars or ad slots.
<figure> – Figure is a container that works with <figcaption>: figure holds an image or a video followed by a caption ( <figcaption> ).
<footer> – Defines the footer of your page.
<header> – Defines the header of your page.
<hgroup> – A tag that groups several headings together ( <h1> to <h6> ).
<nav> – A section that contains links. It shows up mostly in the <header> for the main menu, or in the <footer> for legal notices and the like.

4 media tags

<video> – Displays an HTML5 video player, point it at your video with the src attribute.
<audio> – The same as the tag above, but for an audio file only.
<picture> – The least known of the four, since some browsers still treat it as experimental. <picture> lets you declare several <source> elements for one <img>, and the browser then picks the most relevant image for the resolution.
<source> – Declares the various media file sources. It works with <video>, <audio> and <picture>.

8 functional tags

<details> – Goes hand in hand with <summary>: the pair gives you a disclosure widget.

Some details

More about those details.
<dialog> – Dialog is a native HTML5 modal window.
Example from Mozilla –

by Damien Flandrin (@dam62500) on CodePen.
<embed> – The embed tag gives you a container for external resources. It was used for Flash, and for SVG too, although there are better ways to do that now.
<mark> – Lets you highlight your text.
<meter> – Represents a gauge between two fixed values.
Example from Mozilla – by Damien Flandrin (@dam62500) on CodePen.
<progress> – Much like <meter>, but it represents a percentage of progress.
Example from Mozilla – by Damien Flandrin (@dam62500) on CodePen.

<time> – Represents a date semantically, it takes a datetime attribute.

html

<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p>

<wbr> – One of the least known HTML5 tags, and a useful one all the same: <wbr> tells the browser it may break the line at that point if it needs to.