Semantic Elements, Page Layout, Sections, Articles, and Navigation
Learn how modern HTML gives structural meaning to major page areas and why semantic markup improves accessibility, maintainability, and SEO.
Inside this chapter
- What Semantic HTML Means
- Common Semantic Elements
- Section vs Article
- Why Semantic Structure Helps
- Semantic Layout Example
- Real-Time Example
Series navigation
Study the chapters in order for the clearest path from HTML basics and document structure to semantics, accessibility, SEO, maintainability, and advanced markup practice. Use the navigation at the bottom to move smoothly through the full tutorial series.
What Semantic HTML Means
Semantic HTML uses elements whose names describe their role in the document, such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. This helps both people and machines understand structure better.
Common Semantic Elements
<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<article>...</article>
<aside>...</aside>
<footer>...</footer>Section vs Article
A <section> groups related content within a page. An <article> represents a self-contained unit such as a blog post, news card, or forum entry that could stand on its own if reused elsewhere.
Why Semantic Structure Helps
- Improves accessibility for screen readers and landmarks
- Makes code easier to understand and maintain
- Helps search engines understand content structure
- Reduces overuse of anonymous generic containers
Semantic Layout Example
<header>Site title and logo</header>
<nav>Primary navigation links</nav>
<main>
<section>
<h2>Featured Courses</h2>
</section>
<article>
<h2>Latest Blog Post</h2>
</article>
</main>
<footer>Contact and copyright</footer>Real-Time Example
A news homepage often uses semantic regions for masthead, site navigation, main content, trending sidebar, article cards, and footer details. Semantic HTML makes these roles clearer for everyone working with the site.