What exactly is Semantic HTML?
Simply put, Semantic HTML refers to HTML code written using proper and descriptive tags—also known as, you guessed it, semantic tags. Instead of simply indicating the beginning of a new section or denoting which portion of a page will carry a certain tag or ID, semantic HTML tags tell us—and our browser—the intended purpose of the content contained in the tag. In other words, these tags tell the browser what to do and why.
Let’s try looking at an example. Imagine a simple website with a header, some body text, and a footer.
Such a website could be written like this:
<div class=“header”>
<h1>Hello World!</h1>
</div>
<div class=“body>
<p>Hello World!</p>
</div>
<div class=“footer>
<p>Goodbye World!</p>
</div>
Or it could be written semantically, using header, main and footer tags, like this:
<header>
<h1>Hello World!</h1>
</header>
<main>
<p>Hello World!</p>
</main>
<footer>
<p><small>Goodbye World</small></p>
</footer>
Okay, so why should I use these semantic tags?
In a word: readability. Semantic HTML tags are easier for developers to read. They’re easier for browsers to read. And they’re even easier for search engines to read—meaning a semantically structured webpage is going to garner more search engine traffic. These tags make CSS considerably easier to read and write, too.
By giving more information to the browser, semantic tags also help create a more cohesive, optimized experience for users accessing content on screen readers or using other accessibility tools. The more detailed information on what’s contained in the HTML tags provides context for these devices and tools to properly emphasize and display content. Web accessibility is an extremely important topic that we’re seeing gain a lot of traction in 2020. And using the correct descriptive HTML tags is a no small part of building an accessible website.
To learn more about how you, or your accessibility consulting firm, can use semantic HTML to create a more accessible website, check out our blog on the topic.