One of the things we have to consider as developers is how to make our sites accessible to those who need screen readers to consume a website. HTML assists in that endeavor by providing the use of semantic elements in markup. In this article, we will cover some of the more popular semantic elements to use in web development.
Semantic HTML
When it comes to describing what ‘semantic HTML’ means, we can go straight to the definition of the word ‘semantics’ to help us. According to Merriam-Webster, semantics is the study of meanings or the meaning of a sign. So when we are writing semantic HTML, we are creating an HTML code that absolutely implies what the tags mean.
We use semantic markup so that we can describe the structure of our web pages in a standard way: this allows screen readers and voice assistants to scan our HTML elements and return the relevant information to the user if they request it.
Semantic Elements
When the HTML5 specification was released in 2014, it came with additional semantic elements to better indicate the structure of a web page. Here are some of the tags that would be considered semantic tags:
<header>
Headers are primarily container elements that act as sectional semantic HTML elements. They typically contain the logo, <nav> and an <h1> that describes the website itself. This is usually consistent across all pages in your site.
<nav>
A <nav> element is short for a navigational element. It holds links that take users to other parts of your site:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="http://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>Navigation elements can have links, menus, and submenus. The elements, however, cannot contain other <nav> elements. In the example above, I have an <img> that acts as a placeholder for a logo and a <nav> that contains our anchor (<a>) elements. These are all nested inside a <header>.
<main>, <section>, <h2> – <h6>
The <main> tag tells us the main content of the site, outside of the initial <header>. It can have <section> tags which can have their own <header> and <h2>–<h6> elements.
The general rule of thumb about the heading tags is that there is only one <h1> element per page that matches the title given to the page. In addition, you can’t use a higher numbered heading, until you use a lower-numbered one. You do have the ability, however, to go from a higher-numbered heading to a lower-numbered one out of order. This basically follows the structure of what a web page should be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header.main-header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
h6 {
text-decoration: line-through;
}
h6.ok {
text-decoration: none;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="main-header">
<div class="logo-container">
<img src="http://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<body>
<main>
<header>
<h2>
I'm an h2 -- Semantic Elements -- Describes purpose of main content
</h2>
</header>
<section>
<header>
<h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3>
</header>
<div>Content and More stuff and things that pertain to h3 </div>
<h4> I'm an h4 -- Even less important heading </h4>
<div>More content that pertains to h4</div>
</section>
<section>
<header>
<h3> We can go back up to h3 even though we used h4</h3>
</header>
<div>More stuff and things that pertain to h3 </div>
<h6>No h6 until h4 and h5</h6>
<h4> This can't be h6, unless h4</h4>
<div>More content that pertains to h4</div>
<h5> and h5 are used first. </h5>
<div>More content that pertains to h5</div>
<h6 class="ok">Now h6 can be used!</h6>
</section>
</main>
<footer>
</footer>
<script src="script.js"></script>
</body>
</html>Remember that even though we can use heading tags out of order, it is not best practice to do so. Having the proper hierarchy leads to better accessibility.
Conclusion
There are so many possibilities for the use of semantic HTML The documentation for the use of semantic HTML is located on the MDN website as well as the W3C site. Other tags that describe their intention are listed on both sites. Be sure to know how to look up the documentation and realize that HTML processors use the semantics to give users additional hierarchical information if it is needed.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
