Semantic HTML

HTML is a markup language chock‑full of elements that developers can build from. However, these elements are not always helpfully named. In the days after web development escaped from the <table> based layouts of old (sadly leaving many email clients behind), it became very common to use <div> elements to construct more modern and complex layouts.

In the strictest terms, <div> is known as the 'Content Division Element', a generic, unopinionated, container element in which to flow content. This has always been really great in some respects, as <div> elements afford a good amount of flexibility to developers in terms of layout options. The issue is that at a glance, code can become difficult to parse if everything sits within a <div>, or nested deep inside a tree of them. This is where Semantic HTML comes in handy.

HTML5 and Semantic Elements

With the introduction of HTML5, developers got access to a variety of new elements that could help them lay their code out in a way that's much clearer. As an added benefit, these new elements offer semantic meaning to accessibility tools and search engines, allowing them to glean additional meaning from a piece of markup and parse the source code of pages they crawl. They can use these semantic elements better understand the content and to find more relevant results and snippets. The full list of semantic elements added by HTML5 is here:

<article><aside><audio><canvas><command><datalist><details><embed><figure><footer><header><hgroup><keygen><mark><meter><nav><output><progress><ruby><section><time><video><wbr>

Even though ‑ due to their clear semantic meaning ‑ you can probably work out what the majority of these are on first reading, let's go through a few of the main ones in a little detail.

<header> and <nav>

The <header> and <nav> elements are very common elements. The <header> element typically represents the top section of a website and contains search tools, the logo, social links, and the <nav> element.

The <nav> element aims to replace the older way of building website navigation with <ul> and <li> (or at least provide a clear and semantic wrapper for those unordered lists).

Coincidentally, does it not seem a little odd that we always use unordered lists for navigation? After all, really, their ordering has been deliberately determined and specified ‑ the order that items appear within the navigation has intrinsic meaning ‑ so if we are being really pedantic and striving for the truest semantic meaning behind our markup, then navigation lists should ‑ for the most part ‑ be using <ol> rather than <ul>.

Both <header> and <nav> behave like a typical, block‑level, <div> element, but have much clearer and more accessible names. It should be said, however, that these are not strictly page‑level elements. There is nothing to say that you cannot have more than one <header> or <nav> within your page. Every section of your page should have it's own header and internal navigation, it's all about what makes most semantic sense.

<footer>

The <footer> element is the opposite of the <header>, providing a clear way to demarcate the bottom section of your site (or a section therewithin) in your code. You can include <nav> elements in here, as a lot of websites favour footer navigation, and it can also be handy to include copyright or meta information in the footer.

<section>, <figure> and <figcaption>

These three go hand‑in‑hand. You can use <section> to represent a larger grouping of content and chunk out the information in there into <figure> sections (especially if there is associated hypermedia). Using <figcaption>, you can apply a descriptive caption to each figure that is typically smaller text than the normal body text. This provides an easier experience for readers, and a cleaner experience for screen readers. It may also help search engines to figure out which pieces of text are more useful to pull out as snippets.