HTML5 Semantic Elements: Improving Structure and Accessibility
6 June, 2023
3
3
0
Contributors
After learning the core concepts of HTML, let’s delve deeper into learning advanced HTML, specifically HTML5. HTML5 is the latest version of HTML with new features, techniques, and elements - one of the best features being Semantic Elements.
HTML5 Semantic Elements
Semantic elements in HTML5 are tags that tell us about the type of content they contain, such as header, footer, section, main, and nav. Before HTML5, developers often used only div elements to section off parts of their web pages, and this is how the structure would be:
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="footer">...</div>This doesn't really give us much information about the content inside each div.
Why are Semantic Elements Important?
Semantic elements allow developers, browsers and screen readers to understand the meaning of the content. They're essential in making websites accessible to all.
Main Semantic Elements
Let’s look at some of the main HTML5 semantic elements
Header
Following accessibility best practices, the <header> element typically contains the company name or page title, logo, and navigation links.
<header>
<img src="logo.jpg" alt="Logo">
<h1>My Travel Blog</h1>
<nav>
<a href="#about">About</a> | <a href="#contact">Contact</a>
</nav>
</header>Footer
The <footer> usually contains website ownership information, copyright information and related links. The footer is placed at the bottom of a page or section.
<footer>
<p>Copyrights © 2023 My Travel Blog | All rights reserved</p>
</footer>Nav
This element contains the primary site navigation. The main menu of links is placed in this <nav> element.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Section
The <section> element is very similar to a <div> but represents a group of related content.
<section>
<h2>About Us</h2>
<p>We're a small enthusiastic team of devs...</p>
</section>Main
The <main> element represents the primary content of the web page. There should be only one <main> tag per page. This element helps screen readers quickly identify where the main content begins, making it easier for users with disabilities to navigate your site.
Article
The <article> element is used when you have a piece of content that can be considered as a standalone entity. It’s like an article in a newspaper or a blog post on a website. It represents a complete unit that can be distributed or understood independently.
<article>
<h2>Article Title</h2>
<p>The article's content goes here.</p>
</article>Aside
The <aside> element allows you to display additional or supporting information that is not very important to the main content. It helps in separating related content, improving the overall readability of the page.
<aside>
<h3>Related Information</h3>
<p>This is some additional content that complements the main article.</p>
</aside>Here’s a comprehensive example combining most of the above semantic elements.
<body>
<header>
<h1>Amazing Coffee Shop</h1>
<nav>
<a href="/">Home</a> | <a href="/menu">Menu</a> | <a href="/contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Our Coffee Selection</h2>
<p>We have a wide range of coffee selections from around the world...</p>
</section>
<section>
<h2>Our Pastries</h2>
<p>Pair your coffee with our delicious, freshly baked pastries...</p>
</section>
<section>
<h2>Visit Us</h2>
<p>We'd love for you to come visit our coffee shop. We're located at...</p>
</section>
</main>
<footer>
<p>© 2023 Amazing Coffee Shop | All rights reserved</p>
</footer>
</body>There are more such elements like <aside>, <article>, <figure>, <details>, <summary> etc. As far as possible, use semantic elements throughout your web page. They're beneficial for humans and help search engines crawl your content more efficiently.