HTML
HTML Semantic Elements
Semantic HTML elements convey the meaning of your content to both browsers and developers. In this tutorial, you’ll learn what semantic elements are, why they matter, and how to use the most common HTML5 tags.
Learning Outcomes
By the end of this tutorial you will:
- Identify key semantic HTML elements and their benefits
- Use
<main>,<section>,<article>,<header>,<footer>, and<nav>correctly - Create collapsible sections with
<details>and<summary> - Embed media using
<figure>and<figcaption> - Highlight important text with
<mark>
What Are Semantic Elements?
Semantic elements are HTML tags that describe their purpose and the type of content they contain. Unlike generic containers like <div> and <span>, semantic tags give explicit meaning:
- Non-semantic:
<div>,<span> - Semantic:
<header>,<article>,<nav>
By using the right element, you make your code more readable, accessible, and easier to maintain.
Why Use Semantic HTML Tags?
Semantic HTML offers three key benefits:
- Accessibility. Assistive technologies (screen readers, voice browsers) use semantic tags to navigate pages more effectively.
- SEO. Search engines prioritize well-structured content. Proper tags improve indexability and ranking.
- Maintainability. Clear structure makes your markup easier to read, debug, and update—especially in large projects.
HTML Semantic Elements
Below is a quick reference to the fundamental semantic elements you’ll use to structure your pages:
| Element | Purpose |
|---|---|
<section> |
Thematic grouping of related content |
<article> |
Self-contained, independent content |
<main> |
The primary content of the document |
<header> |
Introductory content or navigation for a section |
<footer> |
Footer information for a section or document |
<details> & <summary> |
Collapsible disclosure of additional information |
<nav> |
Major block of navigation links |
<aside> |
Secondary content related to surrounding content |
<figure> & <figcaption> |
Self-contained media with captions |
<mark> |
Highlighted or relevant text |
The <section> Element
Use <section> to group content by theme or purpose. Each <section> often begins with a heading:
<section>
<h2>SitePoint Community Discussions</h2>
<p>Connect with fellow developers on the <a href="https://www.sitepoint.com/community">SitePoint Community</a> to ask questions, share tips, and explore real-world solutions.</p>
</section>
The <article> Element
Wrap any standalone piece—blog posts, tutorials, comments—in <article>. This makes it portable and reusable:
<article>
<h2>Introduction to Flexbox</h2>
<p>Flexbox is a one-dimensional layout module that…</p>
</article>
The <main> Element
A page should have exactly one <main>, containing the core content unique to that document:
<main>
<!-- Primary tutorial content here -->
</main>
The <header> Element
Use <header> inside <body>, <section>, or <article> to hold titles, subtitles, or navigation:
<header>
<h1>HTML Semantic Elements</h1>
<nav>…</nav>
</header>
The <footer> Element
Place author info, copyright, or related links in <footer>:
<footer>
<p>© 2025 SitePoint</p>
</footer>
The <details> and <summary> Elements
Provide optional information users can toggle:
<details>
<summary>Browser Support</summary>
<p>Supported since Chrome 1, Firefox 1, Safari 4…</p>
</details>
The <nav> Element
Group your primary navigation links:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a>
</nav>
The <aside> Element
Display sidebars, callouts, or advertisements that complement the main content:
<aside>
<p>Read our deep dive on ARIA roles for enhanced accessibility.</p>
</aside>
The <figure> and <figcaption> Elements
Wrap images, code snippets, or diagrams and add captions:
<figure>
<img src="layout-diagram.png" alt="Grid layout diagram">
<figcaption>Figure 1: Two-column grid design.</figcaption>
</figure>
The <mark> Element
Draw attention to relevant keywords or updated content:
<p>We’ve updated our <mark>HTML</mark> tutorial to include new semantic elements.</p>
Best Practices for Using HTML Semantic Elements
- Select the most fitting element and replace generic
<div>wrappers with semantic tags whenever they convey clear meaning. - Restrict
<main>to a single use per page so the primary content region stands out. - Validate your HTML with the W3C Validator to uncover structural errors and ensure standards compliance.
- Augment with ARIA roles and attributes when built-in semantics fall short of providing full accessibility.
- Keep nesting shallow to maintain a simple, easy-to-navigate document outline.
- Use descriptive headings inside each section to improve readability and assistive-technology navigation.
- Group thematically related content using
<section>and<article>so that each block serves a clear purpose. - Annotate complex structures with comments or project documentation so collaborators understand your semantic choices.
FAQs on HTML Semantic Elements
Nesting <article> Inside <section> or Vice Versa?
Both patterns are valid. Use <section> for thematic grouping, then <article> for self-contained units. Or vice versa if an article needs subsections.
How Many <main> Elements Should I Use per Page?
Only one <main> per document. It represents the unique primary content; everything else (headers, footers, nav, asides) sits outside it.
When Should I Use <div> Instead of a Semantic Element?
Use <div> only when no semantic tag fits your content, such as generic wrappers for styling or scripting hooks.