It is easy to nerd out over the latest javascript library, argue about tailwind, or maybe even the state of PHP. But the internet as we know it would be nothing without the unspoken hero of them all: HTML!

Hypertext Markup Language does not get enough love. It can seem straight forward and simple, but there is a ton of information packed within HTML tags. As a web developer, it is crucial to be familiar with the semantic roles of the elements (as well as when to use non-semantic tags).

And so, I'd like to start a series! Highlighting best practices and guidelines for some html elements, starting with the <section> element.

The section element is good place to start because I think it is often misunderstood. There are a handful of elements that are similar in their use so it can be tricky to know which element to reach for—especially if you application is not a site with a straight forward hierarchy.

A great resource, which I'm sure I will be echoing often in this series is good ol' MDN. Lets see what they say about the <section> element:

Sections should always have a heading? Oops I've definitely broken that rule. I'm sure there are exceptions but that is a great distinction that I'd like to start keeping in mind! So this is a very generic sectional element. How is that different from a <div>? Further down the page, they answer that question along with a few other comparisons:

• If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the <article> element would be a better choice.
• If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an <aside>.
• If the contents represent the main content area of a document, use <main>.
• If you are only using the element as a styling wrapper, use a <div> instead.

Let's look at an example and consider if a <section> makes the most sense:

<section>
  <h3>Social Media Links</h3>
  <ul>
    <li><a href="...">Instagram</a></li>
    <li><a href="...">X</a></li>
    <li><a href="...">LinkedIn</a></li>
  </ul>
</section>

Here, we have a list of socials. Imagine this as a literal section on an about page. If we compare it to some the other elements, I think section is revealed as a good choice. It does not make sense as <article>, the links themselves don't provide enough info as to who they are for. Unless this is somebody's linktree page, I doubt that it is the <main> content. You could argue that social links can function as an <aside>... I think it could depend of the purpose of the content. I think that a set of links on a Contact page are more than a simple aside. But If you have social links on an About page, they may make more sense as an aside in that situation. And finally, a div does not work here because div should only be used when dividing the page up for styling purposes. Without the context of a design, have no way of knowing. The design place this within a full-width container. In this situation it might be useful to wrap the entire section inside of a div. With tailwind CSS, that might look like:

<div class="w-full py-12">
  <section class="container mx-auto">
    <h3>Social Media Links</h3>
    <ul>
      <li><a href="...">Instagram</a></li>
      <li><a href="...">X</a></li>
      <li><a href="...">LinkedIn</a></li>
    </ul>
  </section>
</div>

I hope this helps. There are many elements that serve similar roles. It is important to ask yourself questions like these and to be aware of the minute differences between html elements. This beneficial for SEO and accessibility reasons and should not be seen as after-thoughts.

Do your best to write your pages, components, apps, etc. with HTML structured semantically and purposefully. It is a win for everybody.