← Back to Demos

Semantic HTML5 Elements Demo

Understanding the proper use of semantic elements

💡 What you're seeing: This page demonstrates the proper use of semantic HTML5 elements. Each colored section represents a different semantic element. View the page source to see the structure!

Understanding Semantic HTML

By John Doe

<article>: This entire white box is an article element. It contains self-contained content that could be distributed independently.

What are Semantic Elements?

Semantic elements clearly describe their meaning to both the browser and developer. Elements like <header>, <nav>, <main>, <article>, <section>, and <footer> are much more descriptive than generic <div> elements.

<section>: This blue-bordered area is a section element. It groups related content under a heading.

Benefits of Semantic HTML

  • Accessibility: Screen readers can better understand page structure
  • SEO: Search engines can better index your content
  • Maintainability: Code is easier to read and understand
  • Future-proof: Follows web standards and best practices
Semantic HTML Structure Diagram
Figure 1: Visual representation of semantic HTML structure
<figure> & <figcaption>: The image above is wrapped in a figure element with a figcaption providing a description.

Quick Reference: Semantic Elements

<header> - Introductory content <nav> - Navigation links <main> - Main content (one per page) <article> - Self-contained content <section> - Thematic grouping <aside> - Related/supplementary content <footer> - Footer content <figure> - Self-contained media <figcaption> - Caption for figure <time> - Date/time information