What is semantic HTML?

When you use int or string in a programming language, you know exactly what each of them is doing and it helps in code readability right? Well HTML is the same, it has things with names that help knowing what they do. The problem is, unlike a typed language, HTML is cool with you doing mistakes and won't throw an error if you don't use the right tool for the job. So in the end you can do mistakes and still have a visually working website who is awful under the hood.

But visually impaired users use a lot of shortcuts with their screen readers to simply jump to different parts of the page, and those shortcuts only work if HTML is semantically valid! So having good HTML and following a solid structure helps them, but also other users. For example, to use the reader mode in several browsers, your HTML has to be semantically valid, or the reader mode won't be available.

There is a lot, a LOT of semantic HTML elements and even I who loves HTML doesn't know them all, so I will only cover the most useful.

Content sectioning

These semantic elements have the same style properties as a <div> (they stack on top of each others) and won't change anything related to your design, so feel free to use them without stressing. You can even add them to an existing design without trouble!

You at least need those:

<header>
Put the content from the top portion of your website that your user will read the first time they visit but will skip afterwards, inside this.
<nav>
Put your navigation elements inside this. You can have several <nav> but you then need to use the aria-label attribute to name them for screen readers users.
<main>
Put the main parts of your website inside this one. Very useful as it indicates to screen readers users they reached the main part of the page.
<article>
Put the main content of your website inside this one. It must be content that is self-sustainable. Imagine if you had to remove everything but one thing, and put it inside this tag.
<aside>
put the content indirectly related to the article content inside this one. It can be a sidebar or a side note for example.
<footer>
Put the content from the bottom portion of your website that your user will read the first time they visit but will skip afterwards, inside this.

A basic page might look like this for example:

<body>
    <header></header>
    <nav></nav>
    <main>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</body>

I did not mention the section element but it can be quite useful if you need to split your content in different sections that are directly related to your content and that are of equal importance. For example a blog post should have its main content and comments inside <article>, but comments should be inside a section to make it clearer for screen readers users that the blog post has ended.

<main>
    <article>
        Text
        <section aria-label="Comments"></section>
    </article>
</main>

You can find the other content semantic element on this page.

Stop right there, what is this aria thing in the previous example?

You'll often see aria attributes inside the HTML code presented in this page. As stated by the MDN docs on this page, Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

Aria is a massive spec to learn and apply so I will just give you some basic ones in this page. Try to follow them as much as you can to give a better readability to your website layouts.

Next: Don't use tables for layout


Initially published: November 23rd, 2020
Generated: November 12th, 2021