HTML Semantic Elements (article, section, aside, nav)

Badar KhalilUpdated September 27, 2026 3 min read

HTML Semantic Elements: article, section, aside, nav

Focus Keyword: html semantic elements | Trending Keyword: semantic html5 tags

Semantic HTML elements are tags that clearly describe their meaning to both the browser and the developer. Instead of wrapping everything in generic <div> tags, HTML5 gives us purpose-built elements like <article>, <section>, <aside>, and <nav> that describe the role of the content they contain. Using semantic html elements improves accessibility, SEO, and code readability — which is exactly why "semantic html5 tags" remains a trending topic among modern front-end developers.

Why Semantic Elements Matter

Accessibility: Screen readers use semantic tags to help visually impaired users navigate a page.
SEO: Search engines like Google use semantic structure to better understand and rank page content.
Maintainability: Developers can read the markup and immediately understand the page structure.
Consistency: Semantic elements create a predictable document outline across projects and teams.

<article> Element

The <article> element represents a self-contained piece of content that could be independently distributed or reused — such as a blog post, news story, or forum post.

<section> Element

The <section> element groups related content together, typically with its own heading. Use it to break a page into thematic chunks such as "Features", "Pricing", or "Testimonials".

<aside> Element

The <aside> element holds content that is tangentially related to the main content — sidebars, pull quotes, advertisement blocks, or related-links widgets.

<nav> Element

The <nav> element wraps major navigation blocks, such as a primary menu, breadcrumb trail, or table of contents. Not every group of links needs a <nav> — reserve it for major navigation blocks only.

Putting It All Together

Below is a complete semantic page skeleton combining all four elements with <header>, <main>, and <footer> for full document structure.

article vs section: Key Differences

Feature	<article>	<section>
Independence	Fully self-contained	Part of a larger whole
Reusable elsewhere	Yes (e.g. RSS feed)	No
Example	Blog post, product card	"About Us" section on a homepage

Best Practices for Semantic Markup

Always give a <section> a heading (h1–h6).
Don't use <section> purely for styling — use <div> if there's no thematic grouping.
Nest <article> inside <article> for comments on a blog post.
Use ARIA landmarks only when semantic HTML can't cover the case.
Validate your document outline with the W3C Nu HTML Checker.

Common Mistakes

Using <section> as a generic styling wrapper (should be <div>).
Wrapping the entire page's navigation links individually in separate <nav> tags.
Forgetting that <aside> inside an <article> refers to content related to that article specifically.

Try it Yourself HTML

<header>
  <h1>My Tech Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/articles">Articles</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Understanding Semantic HTML</h2>
    <p>Semantic elements describe their meaning clearly to browser and developer.</p>
    <section>
      <h3>Why It Matters</h3>
      <p>Better accessibility and SEO for every page you build.</p>
    </section>
  </article>

  <aside>
    <h3>Related Posts</h3>
    <ul>
      <li><a href="#">CSS Grid Basics</a></li>
      <li><a href="#">Flexbox in 5 Minutes</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2026 My Tech Blog. All rights reserved.</p>
</footer>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Breadcrumb navigation using <nav> -->
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li aria-current="page">HTML Semantic Elements</li>
  </ol>
</nav>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Article with a nested aside for a pull quote -->
<article>
  <h2>The Rise of Semantic Web Design</h2>
  <p>Semantic HTML has become the backbone of accessible web design.</p>
  <aside>
    <blockquote>"Semantic HTML is the first, and easiest, step to accessibility."</blockquote>
  </aside>
  <p>Continue reading to see real code examples...</p>
</article>

Output

Press Run to execute.

Exercise: Build a Semantic Blog LayoutHTML

Rewrite the following div-based layout using proper semantic elements: header, nav, main, article, aside, and footer.

Try it Yourself HTML

<div class="header">My Blog</div>
<div class="nav"><a href="#">Home</a></div>
<div class="content">Post content here</div>
<div class="sidebar">Related links</div>
<div class="footer">Copyright 2026</div>

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?