Semantic HTML5 Layout
Architect professional web pages using semantic tags like main, section, article, and aside for perfect SEO and screen-reader support.
Architect professional web pages using semantic tags like main, section, article, and aside for perfect SEO and screen-reader support. This hands-on tutorial focuses on practical implementation of semantic html5 layout concepts.
Semantic HTML5 Layout
Writing code that "looks right" is easy. Writing code that "is right" requires an understanding of Semantics. Semantic HTML tells the browser, the search engine, and assistive technology what the content is, not just where it goes.
Lesson Path
- Previous lesson: Forms and Modern Inputs
- In this lesson: You learn to architect a full page layout using modern standards.
- Next lesson: Accessibility and ARIA
1. Beyond the <div>
In the early days of the web, everything was a <div>. But a div has no meaning—it's just a generic container. HTML5 introduced semantic landmarks:
<header>: Introductory content or navigation links.<nav>: A block of navigation links.<main>: The unique central content of the page (use only once).<section>: A thematic grouping of content, usually with a heading.<article>: Self-contained content that could be shared (like a blog post or news story).<aside>: Content indirectly related to the main flow (sidebars, pull-quotes).<footer>: Closing information, copyrights, and sitemaps.
2. Why Semantics Matter
- SEO: Search engines prioritize content inside
<main>and headings. - Accessibility: Screen readers allow users to "jump" to landmarks like
<nav>or<main>. - Maintainability: Your code becomes self-documenting for other developers.
3. The Logical Hierarchy
A professional page usually follows this flow:
- Header (Logo + Nav)
- Main
- Section (Hero)
- Section (Features)
- Articles (Individual features)
- Footer
The Modern Web Architecture
Build a semantic blog layout. Notice how each part of the page has a specific, meaningful tag.