What is semantic HTML?
When you use
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.
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:
- 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.
- Put your navigation elements inside this. You can have several
<nav>but you then need to use the
aria-labelattribute to name them for screen readers users.
- 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.
- 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.
- put the content indirectly related to the article content inside this one. It can be a sidebar or a side note for example.
- 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 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