HTML5 introduces several new semantic elements that help structure web pages more meaningfully. How should you choose between them?
<nav></nav>
<article></article>
<section></section>
<aside></aside>
Refer to the diagram below for guidance.
Explanation of Elements
-
<nav>: Used for navigation menus, such as site navigation, table of contents, or breadcrumbs. It should contain links to other pages or sections. -
<article>: Represents a self-contained piece of content that could be distributed independently, like a blog post, news article, or forum post. It can have its own heading and content. -
<section>: Defines a thematic grouping of content, typically with a heading. Use it for chapters, tabs, or any logical division of content within a page. -
<aside>: Contains content tangentially related to the main content, such as sidebars, pull quotes, or advertisements. It’s not essential to the main flow.
When to Use Each
- Use
<nav>for primary navigation. - Use
<article>for main content pieces that stand alone. - Use
<section>to group related content within an article or page. - Use
<aside>for supplementary information.
Important Notes
- These elements improve SEO and accessibility by providing semantic meaning.
- Always include headings (
<h1>to<h6>) within sections for better structure. - Avoid overusing them; not every div needs to be a section.
- For older browsers, use HTML5 Shiv or similar polyfills.
- Combine with other elements like
<header>,<footer>, and<main>for full page structure.