Semantic HTML? Why should I care?

Based on a conversation in the shoutbox, I thought I'd share a quick explanation of "semantic" HTML, why it exists, why it might matter to you... and why it might not! And as usual for my posts, we'll get there via a history lesson!

Old-fashioned HTML formatting

Early in its history, HTML got a whole handful of different elements for styling text. Here are some of them that you might recognise:

<b> - bold
<i> - italic
<big> - larger text
<small> - smaller text
<center> - center alignment
<strike> - strikethrough text

All of these still work in modern browsers... but you ought to be really careful about using them. Here's why...

The birth of semantic HTML

The problem with making text "big", "bold" and "centered" is that it doesn't mean anything. And as the Web gained a wider diversity of users (some on graphical browsers, some on text browsers; some using visual displays, some using screen readers; some of them humans, some of them robots...), we realised that we needed to separate semantics (what the content means) from style (what the content looks like).

The style got moved out into CSS, which is where it belongs because the most-resilient web pages can have their CSS swapped-out (to change the style without changing the content) or its HTML modified (to change the content and have the style remain consistent). That's the design dream!

So what does that mean for the elements in the list above? It means you should ask yourself why you're using that element, and then act accordingly:

<b> - if it's important, use <strong> instead: this way, screen readers know to stress it when they read it out; if it's something that needs attention drawn to it but isn't stressed, continue to use <strong>; if it's an entirely stylistic/design choice, use CSS's font-weight: bold; instead!
<i> - similarly, if it's emphasised, use <em>; if it's an idiomatic term, use <i>; if it's stylistic, use CSS's font-style: italic;
<big>, <small>, <center>, <strike> - don't use these: this is stylistic so you should be using CSS instead!

That said, you can continue to use these kinds of elements for stylistic purposes, and even the even-more-deprecated elements like <font> and the <body bgcolor="..."> attribute. If you're trying to make pages that will work in the very-oldest graphical browsers, you might even need to do this!

But in general, I'd suggest thinking semantically. Especially as we're getting to the point where we can do even more with semantic HTML:

Super Semantic HTML

Nowadays we've got even-more exciting semantic element, and you should consider using them! The list below are all 100% semantic - they don't have any stylistic value at all (they're basically all like <div>s!), but they have a meaning that browsers (and especially screen readers) can interpret:

<header> - put your name, logo, or whatever else comes "before" your main content in this!
<main> - put up to one of these on your page: the main content goes in here, and then users of accessibility technologies can just "jump" to this bit if they don't need to read your header every time!
<footer> - here's where you put that footer stuff like the link to your GitHub or the copyright notice
<nav> - got a menu? wrap it in this!
<article> - wrap a piece of content that "stands alone" in meaning, like a blog post
<section> - a "part" of an article or other piece of content that doesn't quite stand up on its own but is self-contained

The fun thing about these is you can then use them to make your CSS simpler and tidier. Like: if I've got a site with a header at the top, then below that a nav menu down the right-hand side and a main section on the left, and then below that a footer, I might write this CSS:

(by the way: did you know that you can use emoji in your CSS grid templates? I like to use a hat for my header and boots for my footer when I'm designing a layout, for obvious reasons...)

Code

body {
  display: grid;
  grid-template-areas: "🎩 🎩"
                       "📄 🗺️"
                       "👢 👢";
}

header {
  grid-area: 🎩;
}

main {
  grid-area: 📄;
}

nav {
  grid-area: 🗺️;
}

footer {
  grid-area: 👢;
}

Isn't that just some beautiful CSS? The HTML is very-readable too, of course:

Code

...

<header>
  header content goes here
</header>

<main>
  <h1>My page!</h1>
  <p>
    Look, I wrote a page.
  </p>
</main>

<nav>
  <h2>Menu:</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/page1">This page</a></li>
    <li><a href="/page2">That page</a></li>
  </ul>
</nav>

<footer>
  &copy; Copyright ME!!!
</footer>

...

Isn't that so much more-readable than a stack of <div>s with class names like 'wrapper', 'outer-content', 'inner-content', 'actual-content' or whatever else? Clean and beautiful for the developer, and more-usable for the readers too!

So I should be doing this?

Weeelll... that's up to you, really!

I love semantic HTML, and I'm just getting started describing all the stuff you can do with it. The oft-stated reason you should use it is to increase usability, but I'd like to encourage you to see it as something that improves the legibility of your code too.

But if you don't want to... that's fine too. It's a big weird Web, and there's room for you to be different from me and we can still love one another's Web creations!

Here's some further reading from W3Schools, MDN and web.dev.