Semantic HTML5 Layout Demo

Understanding semantic elements for better structure and accessibility

Back to Exercises

What are Semantic Elements?

Semantic elements clearly describe their meaning in a human- and machine-readable way. They help search engines understand your content and improve accessibility for screen readers.

Live Semantic Layout Example

Below is a complete example of semantic HTML5 layout elements in action:

Website Header

This is the <header> element - contains introductory content

Main Content Section

This is the <main> element containing the primary content.

Article Title

This is an <article> element - independent, self-contained content.

Articles can be distributed independently from the rest of the site.

Another Article

Multiple articles can exist within a section, each representing a distinct piece of content.

© 2024 Website Footer - This is the <footer> element

<!-- Complete Semantic HTML5 Layout -->
<header>
    <h1>Website Header</h1>
    <p>Introductory content</p>
</header>

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

<main>
    <section>
        <h2>Main Content Section</h2>
        <article>
            <h3>Article Title</h3>
            <p>Article content...</p>
        </article>
    </section>
    
    <aside>
        <h3>Sidebar</h3>
        <p>Related content...</p>
    </aside>
</main>

<footer>
    <p>© 2024 Website Footer</p>
</footer>

Key Semantic Elements

<header>

Contains introductory content or navigational aids. Usually includes the site name/logo and main navigation.

<nav>

Represents a section with navigation links. Should contain links to other pages or sections within the page.

<main>

The main content area of the document. Should be unique to the document and not repeated across pages.

<section>

A thematic grouping of content, typically with a heading. Represents a distinct section of a document.

<article>

Independent, self-contained content that could be distributed separately. Examples: blog posts, news articles.

<aside>

Content that is related to the main content but separate from it. Often used for sidebars, callouts, or related links.

<footer>

Contains footer information for its nearest sectioning element. Typically includes copyright, contact info, links.

Benefits of Semantic HTML5

  • Accessibility: Screen readers can better understand and navigate your content
  • SEO: Search engines can better understand your content structure
  • Maintainability: Code is more readable and easier to maintain
  • Future-proof: Semantic elements are designed for modern web standards
  • Styling: Easier to target specific sections with CSS

Best Practices

  • Use <main> only once per page
  • Don't nest <article> inside <article> unless it makes semantic sense
  • Use <section> for thematic content groups
  • Use <article> for standalone content
  • Always include headings in sectioning elements
  • Use <nav> for navigation, not just any list of links