If you look up the actual definition of “semantics,” you’ll get answers around it having to do with meaning or its study. Along the same line, HTML5 semantic elements serve that purpose as well. On a super high-level, HTML5 semantic elements aim to:
- Provide guidance about an element to a browser. In other words, give meaning. For instance, using a
<nav>element to indicate a set of navigation hyperlinks. - Do the same for developers.
- And because it’s machine-readable, it helps search engines too — to better understand the structure of pages. This is actually more of a derivation of using HTML5 semantic elements in itself, and less with an actual purpose. But hey, everybody wins, right?
Common HTML5 Semantic Elements
If you’ve ever looked at the source code of a webpage, you might have seen codes like:
a. <div id="header"> to describe that this is an header.
b. <div id="footer"> to describe a footer.
c. Etc.
What you may not realize is that <div> is not a semantic element. A <div> tag can contain any type of information — so by definition, it does not provide meaning. Although, developers have bypassed that by assigning ids and classes to it, as seen in the example above.
In any case, the common HTML5 semantic elements are (arranged by name, ascending):
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Two Commonly Used Elements That Are Not Semantic
While I wrote down the list of semantic elements, I also want to jot-down the two that are not — but may be utilized quite frequently in everyday usage.
<div>(already touched on)<span>
This isn’t to say that non-semantic elements do not have a role, and that’s another topic entirely, but just take note that both <div> and <span> are not semantic.
Benefits of HTML5 Semantic Elements
Benefit 1: First and foremost, it’s easy to manage, read, and decipher, as far as web development best practices go. As an example from freeCodeCamp.org, take a look at the two screenshots below.
As we can see, the first set of code looks way more clean, manageable, and digestible. And while in this example, we’re talking about a few lines only, in the real world, we’re talking thousands, if not more.
Benefit 2: We discussed this already, but using HTML5 Semantic elements provides more meaning of your web-page to everyone (Browsers, bots, and Developers).
Benefit 3: Having an internal semantic elements structure or documentation can help with consistency. For example, if you’re using <header>, it’s obvious. However, say your organization has 20 developers. In some cases, a few might use something like <div id="header">, and in others, <div class="header">.
Benefit 4: Semantic elements are better for accessibility reasons for those who rely on screen readers and other similar technologies. Not only that, but it’ll likely help you be more compliant.
Other Misc. Notes and Rules
- The concept of semantic elements is not new with HTML5. In fact, as the standard evolved, new elements got introduced; however, even in the previous version (HTML4), we had semantic elements such as
<fieldset>. - You can have more than one
<header>(not to be confused with<head>); however, they cannot be placed inside a<address>,<footer>or another<header>. - If you’re using a
<header>, you must also use a<footer>, semantically speaking. A footer element also indicates that you’re almost approaching the end of a web-page. - There are tons and tons of HTML5 semantic elements, not just the one in this list.
You May Also Want to Check Out:
Conclusion
As we can see from the image above, HTML5 semantic elements provide structure to a web-page that helps not only the browsers, but also developers with ongoing site maintenance, and search bots too.
Additionally, they’re impactful in being web-accessible compliant. For the most part, you probably knew about semantic elements; you just did not know that they have a name or a concept associated with it.
And while I only discussed this on a super basic level, it’s quite an exciting field to study.