TIL: main, figure, article and other HTML tags

I redid how images render on my site. While creating a new component for images, I learned about the <figure> and associated <figcaption> elements. Now my images render like this:

<figure>
  <a href="...">
    <img src="..." />
  </a>
  <figcaption>...</figcaption>
</figure>

I’ve never seen these before—are they new? I wondered. This is a recurring theme in my TILs, but no. Not even a little bit. They’re additions to HTML5 that arrived at different points between 2008–2015. There’s probably a meta lesson here about not assuming things I don’t know must be new, but that’s for me to dwell on. Here are a few more that I learned about and incorporated into my site:

  • <main> the content part of the page
  • <header> and <footer>
  • <nav> for site navigation
  • <article> for individual posts

I remember intense discussion about the value of semantic markup when I was paying closer attention to HTML. I don’t know how important that is in itself, but practically these tags help screen readers and other tools navigate your site better. I also find it nicer as an author to see more named tags instead of my usual pile of <div>s.

Misc