Some observations about semantic HTML and CSS

I'm currently working on building my portfolio site, and while it's far from the first site I've developed, it is the first site I've developed semantically from scratch. Since learning about semantic HTML, I've grown more and more annoyed at how a lot of frameworks and guides rely almost exclusively on div, span, class, and id to apply CSS rules to the styling of content, and while I understand the practicality of that approach in the case of frameworks, I feel it does a great disservice to web developers to push those methods at the cost of exploring the increased versatility and maintainability semantic HTML provides.

In particular, I feel that the versatility of the footer tag is underutilized. Most tutorials/guides and code examples I've seen use the footer tag exclusively for the footer of a page in conjunction with the header and main tags. While this is a perfectly valid way to use those tags, it is by far not the only way.

Let's say that you have a site that includes some scientific papers. Because you're dealing with self-contained content, it makes semantic sense to enclose the entirety of the paper with the article tag. Scientific papers are also divided into discrete sections, which makes formatting them semantically relatively simple as you can use the section tag to encapsulate those respective sections, in addition to nesting section tags for applicable sub-sections.

Scientific papers also contain numerous citations and footnotes which, before HTML 5, could be handled by 1) assigning anchoring IDs to the respective elements and hopping up/down the page and/or 2) creating a div class="footnote" to contain the footnote/citation and placing it after the relevant section.

The footer tag essentially replaces the custom div option while reducing the amount of markup required: there is no need to assign a class to the footer as it can be accessed directly through the document tree. Additionally, because it limits the number of nested identical tags, using the footer tag inside of a section tag reduces confusion and potential errors arising from keeping track of closing div tags. In short, using semantic HTML helps keep your code readable and easier to maintain.

So let's do some code comparisons!

The first example uses the traditional method of div classes to organize content and apply styling selectively:

<div class="article" id="articleid">
  <div class="section" id="sectionid">
    <h2>Section Title</h2>
    <p>Section content</p>
    <p>More section content</p>
    <p>Even more section content</p>
    <div class="footnote" id="footnoteid">
      <ol>
        <li>Section Footnotes</li>
        <li>Section Footnotes</li>
        <li>Section Footnotes</li>
      </ol>
    </div>
  </div>
</div>

So let's say we want to style the section's title and content text to be a dark gray (#A9A9A9). With the traditional method, our CSS code looks like this:

.section h2, .section p {
  color: #A9A9A9;
}

Not too bad. It helps that the class and id names in this example are simple and descriptive.

Now let's look at the same code, only this time with semantic HTML:

<article id="articleid">
  <section id="sectionid">
    <h2>Section Title</h2>
    <p>Section content</p>
    <p>More section content</p>
    <p>Even more section content</p>
    <footer id="footnoteid">
      <ol>
        <li>Section Footnotes</li>
        <li>Section Footnotes</li>
        <li>Section Footnotes</li>
      </ol>
    </footer>
  </section>
</article>

Isn't it much easier to see which tags are paired to each other?

It also doesn't hurt that the CSS to style the section's title and content text looks very similar to the first example, largely in part to sharing the same descriptive names:

section h2, section p {
  color: #A9A9A9;
}

This isn't always the case, especially when you're dealing with lots of nested elements, classes, and ids. In those cases, semantic HTML makes it easier to keep track of which elements receive which formatting without the need to assign classes or ids; in other words, the style rules are applied based on the document's structure rather than arbitrarily assigned classes/ids, allowing you to discern how specific a style rule is simply by looking at your CSS.

All of the above is to say, I think that semantic HTML is pretty awesome, and if you're not already using it, I strongly encourage you to play around and see for yourself how flexible and meaningful it is.

Just remember to style your HTML 5 block elements as display: block; to ensure your content displays properly in browsers that don't support HTML 5!

article, aside, footer, header, nav, section {
  display: block;
}