HTML5 Semantic Elements
Semantic means using tags with clear meanings to build document structure. HTML5 introduced a series of new semantic elements designed to make web page structure clearer and easier to understand.
Using semantic tags instead of ubiquitous <div> elements allows browsers, search engines, and assistive technologies like screen readers to better parse your page content.
What are Semantic Elements?
A semantic element clearly describes its content's meaning to both the browser and developers.
- Non-semantic elements:
<div>,<span>- They don't tell us anything about their content. - Semantic elements:
<form>,<table>,<article>- They clearly define their content.
Main HTML5 Semantic Layout Elements
The following diagram shows how to use HTML5 semantic elements to organize a typical web page layout:
<header>
The <header> element defines the header of a document or section. It usually contains:
- Site logo or mark
- Main headings (
<h1>-<h6>) - Navigation links (
<nav>)
A page can have multiple <header> elements.
<footer>
The <footer> element defines the footer of a document or section. It usually contains:
- Copyright information
- Author information
- Contact details
- Back to top links
<nav>
The <nav> element is specifically for wrapping major navigation links. Not all links should be in <nav>, only those that form major navigation blocks (like main navigation bars, sidebar navigation).
<main>
The <main> element defines the core and main content of a document. A page should contain only one <main> element, and it should not be placed inside <article>, <aside>, <footer>, <header>, or <nav>.
<section>
The <section> element defines an independent part or thematic area in a document. It usually contains a heading. For example, a homepage could be divided into several <section>s for introduction, news, contact information, etc.
<article>
The <article> element defines an independent, self-contained unit of content. It should be content that can logically be independently distributed or reused. For example:
- A forum post
- A blog article
- A news story
- A user comment
<aside>
The <aside> element defines content that is indirectly related to surrounding content but can exist independently. It's often presented as a sidebar for placing:
- Related article links
- Advertisements
- Author bios
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML5 Page</title>
</head>
<body>
<header>
<h1>My Personal Blog</h1>
<nav>
<a href="/index">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>The Importance of Learning HTML5</h2>
<p>HTML5 introduces many new features that make web development more powerful...</p>
</article>
<article>
<h2>CSS Grid Layout Guide</h2>
<p>CSS Grid is a powerful two-dimensional layout system...</p>
</article>
</main>
<aside>
<h3>Popular Articles</h3>
<ul>
<li><a href="#">Flexbox vs. Grid</a></li>
<li><a href="#">JavaScript Async Programming</a></li>
</ul>
</aside>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>