In HTML5, semantic elements like <section>, <article>, <nav>, <header>, <footer>, and others are introduced to improve the structure and readability of the web content. These elements help both developers and browsers better understand the content of a webpage. Here’s an overview of the most commonly used HTML5 semantic elements and how they should be used and nested:
1. <section>
- Purpose: The
<section>element is used to represent a thematic grouping of content, often with its own heading. It helps to divide the page into sections of related content. - Use case: It’s commonly used for areas such as chapters, tabs, or any grouping of content that could be considered as a standalone section.
- Nesting: You can nest
<section>elements inside one another if the content is related. However, each<section>should ideally have a heading (<h1>,<h2>, etc.) to define the section’s topic clearly.
Example:
<section>
<h2>Introduction</h2>
<p>This is the introduction to the article...</p>
</section>
<section>
<h2>Main Content</h2>
<p>This is the main content of the article...</p>
</section>
2. <article>
- Purpose: The
<article>element is meant for content that is self-contained and can be independently distributed or reused, such as a blog post, news article, or forum post. It’s typically used for any content that makes sense on its own and could be syndicated or shared independently. - Use case: Articles are typically self-contained pieces of content, like blog posts or product reviews.
- Nesting: Articles can be placed inside sections. However, they should not be nested inside each other. A section can contain multiple articles, but each article should stand alone.
Example:
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
<article>
<h2>Another Article</h2>
<p>Another set of article content...</p>
</article>
3. <nav>
- Purpose: The
<nav>element represents a section of a page that links to other pages or sections of the same page. It is used for navigation menus. - Use case: Use it for menus, tables of contents, or any set of links that facilitate navigation.
- Nesting: A
<nav>element can be placed inside a section, article, or anywhere else appropriate. It should contain links (<a>) that point to relevant destinations.
Example:
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
4. <header>
- Purpose: The
<header>element represents introductory content for a section or an entire page, often containing a logo, navigation, or headings. - Use case: The
<header>can be used for site-wide navigation, titles, or even for introductory content at the beginning of a section or article. - Nesting: A
<header>can be used inside a<section>,<article>, or<body>. You can have multiple headers within a page, but each should be related to its specific content.
Example:
<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
5. <footer>
- Purpose: The
<footer>element defines the footer of a section or an entire page. It typically contains information like copyright notices, contact information, or links to related content. - Use case: Footers often hold information like copyright, terms of service, or privacy policy links.
- Nesting: Similar to
<header>, the<footer>element can be used at the bottom of sections, articles, or the entire document. It should generally not be nested inside other footers.
Example:
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
6. <aside>
- Purpose: The
<aside>element represents content that is tangentially related to the content around it, such as a sidebar, related links, or additional information. It’s often used for sidebars, advertisements, or related resources. - Use case: Asides are used for content that is not central to the page but may still be relevant (like a sidebar or a pull quote).
- Nesting: An
<aside>can be placed inside sections or articles, but it should not be nested too deeply within the content, as it’s meant to be secondary.
Example:
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#article1">Article 1</a></li>
<li><a href="#article2">Article 2</a></li>
</ul>
</aside>
Guidelines for Nesting:
- Logical Hierarchy: Elements should be used logically. For example,
<article>elements can be grouped in a<section>, but don’t nest<article>within another<article>. - Clarity: Each section or article should have its own header to clarify what the content pertains to.
- Avoid Overuse: Not every block of content needs to be wrapped in a
<section>. Only use<section>for thematic grouping, and<article>when the content is self-contained. - Accessibility and SEO: These elements also help with accessibility, as screen readers and search engines can better interpret the structure of the page.
Example Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<header>
<h1>Website Title</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>This section introduces the main content...</p>
</section>
<section>
<h2>Content</h2>
<article>
<h3>Article 1</h3>
<p>This is the first article...</p>
</article>
<article>
<h3>Article 2</h3>
<p>This is the second article...</p>
</article>
</section>
<aside>
<h3>Related Content</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
In this example:
- The
<header>contains site-wide content like the title and navigation. - The
<main>contains sections of the page, each with its own content, including articles. - The
<aside>is used for secondary or tangential content. - The
<footer>holds the copyright information.
These elements help make the page more structured and improve the semantic meaning of the content, benefiting both users and search engines.