Are all HTML5 semantic elements really that semantic?

April 28, 2018

I have a question. Are the <header> and <footer> elements actually semantic?

I ask because recently I ran into a problem with a <footer> element. This Codepen shows my “card” UI pattern with the markup along with it.

See the Pen Card by Rich Finelli (@richfinelli) on CodePen.

Everything looks pretty good. The <footer> was exactly where you expect it to be. As the name implies, it was at the bottom. But then a design change was pushed through and we needed something below the <footer>.

See the Pen Card by Rich Finelli (@richfinelli) on CodePen.

Now there was an additional element located underneath the footer. The footer isn’t the bottom-most element. It’s in the middle. Have you ever heard of a footer in the middle?

Name based on function

There’s some advice on CSS class naming from Alla Kholmatova’s A List Apart article, The Language of Modular Design:

Once you name an object, you shape its future. For example, if you give it a presentational name, its future will be limited, because it will be confined by its style. A functional name might work better.

This mostly applies to CSS class names, but she’s saying that we should name things based on function and not based on presentation, because a presentational name is linked to it’s style. If the style changes, the name is no longer valid. “Function” refers to the purpose of the thing your naming and isn’t based on the presentation of where the element is or what it looks like. Instead of naming your sidebar “sidebar-container” instead name it “secondary-content-container”. Because, it’s likely that a sidebar on desktop won’t be on the “side” for mobile devices, it will slide under the main content.

When we choose the HTML elements we use for our UI patterns we are – in essence – naming things, albeit we are choosing from a set list of names. Choosing the <header> and <footer> elements to use as part of our UI patterns isn’t that different than naming a class “sidebar” It’s apparent that “header”, “footer”, and “sidebar” are all location-based names. Suppositionally, the W3C may have intentionally avoided “sidebar” because it’s based on location and instead went with <aside> instead.

Google search for “Document header”:

The header is a section of the document that appears in the top margin, while the footer is a section of the document that appears in the bottom margin. Headers and footers generally contain information such as the page number, date, and document name.

This search result tells me that the classic definition for header is it appears at the top and the definition for footer means it appears at the bottom.

Let’s check in with the W3C specification

According to the w3C specification for the <header> element:

The header element represents introductory content for its nearest ancestor main element or sectioning content or sectioning root element.

“Introductory content” is a fairly good explanation for what belongs in the header. But the definition for the footer element isn’t as descriptive:

The footer element represents a footer for its nearest ancestor main element or sectioning content or sectioning root element. A footer typically contains information about its section, such as who wrote it, links to related documents, copyright data, and the like.

So, the W3C never indicates that that the <header> and <footer> elements should belong at the top or bottom respectively, but the names of those elements themselves do seem to dictate the position of where those elements should go.

Am I against using <header> and <footer> elements?

Nah, I will probably always use them. I’ve been using both for years without ever a thought like this until now. I prefer to use HTML5 semantic elements rather than <div>‘s almost always as it’s at the minimum a better HTML authoring experience not to mention how some HTML5 elements aid screen readers and other assistive technology. However, I will think that elements like <main>, <aside>, <nav>, and <article> are somewhat more semantic and invincible to these presentational changes.

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!