The first time I heard about HTML5 was in reference to its introduction being the downfall of Flash. To this news, I reacted with glee, if for no other reason than because those annoying pop-ups about updating your Flash Player would finally go the way of the dinosaur. But HTML5 also introduced another revolution in the user experience of the internet: semantic tags.
What are semantic tags?
Semantics is the study of the meaning of words and in computer language making something semantic means using terms that both humans and machines can discern the meaning of. If you look at any chunk of HTML, there are some terms that have always been clear in their meaning, such as <p> for a paragraph. However, you can also easily find terms that have no immediate meaning to you outside the context of this language.
<div class="container">
<img
src="headshot_k_shepherd.jpg"
alt="Woman wearing a jean jacket standing on a city sidewalk"
class="responsive"
/>
<h1 class="bottom-left">My Story</h1>
</div>
For example, in my previous post explaining the basics of HTML I used a <div> tag, as seen in the code above, to create a section with a header and image in order to overlay text on a photo. Even though the function of <div> is very useful in HTML, <div> doesn’t mean anything to anyone outside of HTML. Plus, it has a wide range of applications so there’s nothing specific about the tag’s name in any circumstance that identifies its specific purpose or role there.
HTML5, though, introduced new tags with the main purpose of helping solve problems like this. Article, header, and section are all words that have meaning outside HTML that even someone unfamiliar with the language would be able to parse. These are used for semantic tags because they more clearly describe the content within a tag.
Some of the most commonly used semantic tags help define parts of a webpage and include:
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <nav>
- <section>
Most of these tags are probably self-explanatory in terms of what type of content you would expect to find grouped within them. Therein lies the beauty of semantic tags.
In the image above I’ve marked up my “About Me” page using the appropriate semantic tag for each part of the webpage. This would mean you would wrap all of the content found in each of these parts with the corresponding semantic tag if you were coding this page. The code of the above webpage including the semantic tags would look something like this:
<body>
<nav>
<div>menu content</div>
</nav>
<header>
<div>header content</div>
</header>
<main>
<section>
<figure>
<img src="link" alt="example"/>
</figure>
<h1>My Story</h1>
<p>My bio text</p>
</section>
<section>
<figure>
<img src="link" alt="example"/>
</figure>
<h2>My Mantra</h2>
<p>quote</p>
</section>
<section>
<h3>My Latest Posts</h3>
<article>
<figure>
<img src="“link”" alt="example" />
</figure>
<p>Web Technologies</p>
<h4>Web Development: Hand Code or CMS?</h4>
<p>date</p>
</article>
<article>
<figure>
<img src="“link”" alt="example" />
</figure>
<p>Web Technologies</p>
<h4>Web Design Essentials: Mood Boards</h4>
<p>date</p>
</article>
<article>
<figure>
<img src="“link”" alt="example" />
</figure>
<p>Web Technologies</p>
<h4>Web Design Essentials: Color Palettes</h4>
<p>date</p>
</article>
</section>
</main>
<footer>
<div>search bar</div>
<div>archives</div>
<div>Popular Topics</div>
</footer>
</body>
How Semantic HTML is An Improvement
Unlike the rest of HTML, tags which are primarily semantic don’t affect what appears onscreen. Some may say that it doesn’t matter then if you include them or that bothering with these tags is a waste of time because they don’t do anything. However, all semantic tags serve an important purpose behind the scenes for the people and technology that interacts with the code itself.
Ask yourself when scanning through the previous code example if it’s quick and easy to identify which piece of code belongs to what part of the webpage. This is one of the ways semantic tags create a better experience. In this case, for the developer themselves. Making an edit or fixing a problem in code becomes a much more streamlined process when you have signposts in the form of semantic tags to look for to find the exact part of the code you need, especially helpful if an HTML document is particularly long.
Semantic tags also improve accessibility and the experience of a webpage for users with disabilities. Web accessibility means that websites are designed in a way that a disability does not limit a user’s ability to access, navigate, understand, or contribute to the internet. Accessibility may or may not be legally required depending on your website’s purpose and audience, but regardless it should be an important consideration in development.
If you compare the previously shown visual view of my “About Me” page to the code view of it, you can see how in both the content is grouped thematically according to the role it plays on the page. Without semantic tags this information would still be readily available to a user who can see it onscreen, allowing them to easily discern what they want to pay attention to. For users who do not have access to the visual semantics of the page, though, this same information and the advantages of knowing it would be lost.
While users do not generally care about HTML, the assistive devices that users with disabilities use depend heavily on HTML to be able to communicate the content of the internet. The more meaning HTML can transmit to these devices about the content onscreen, the better experience a device can offer a user. Semantic tags help enrich and refine how assistive devices can communicate webpages to their users.
Without semantic tags, a screen reader, for example, may need to communicate the header and navigation bar of a website every time a user navigates to a new page on a site. This can obviously become annoying. It’s the same content the user has already heard about and most likely not the reason they wanted to visit that page, but the screen reader doesn’t inherently understand that.
Instead by using the <header> and <nav> tags, the device can intuit it should skip over the repeating content. With a <main> tag included, a device can then identify the potentially most relevant content to the user and communicate that first. This helps save time, which all users regardless of ability prefer, and helps create a better, more equitable user experience for all.
Semantics Matter
You’ve probably heard someone at some point use the phrase “that’s just semantics” as if to belittle the idea that words make a difference. But as you can see, the words you choose to use or choose not to use, even in a computer language, influence others. Perhaps it’s a small impact in making someone’s job a little easier or a big impact in giving someone equal access to technology, but regardless, a word can make a difference. Help your HTML go the extra mile for users and other tech professionals alike by always including semantic tags.
References
Bidaux, V. (2016, December 16). HTML5 semantic elements and Webflow: the essential guide. Webflow Blog. Retrieved https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide
HTML semantic elements. W3Schools. Retrieved from https://www.w3schools.com/html/html5_semantic_elements.asp
Kyrnin, J. (2020, February 9). Why use semantic HTML? Lifewire. Retrieved from https://www.lifewire.com/why-use-semantic-html-3468271
Lawson, B. (2020, June 8). Beginner’s guide to writing good HTML. WebsiteSetup. Retrieved from https://websitesetup.org/html-tutorial-beginners/
