HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLSemantic Layout (header, main, footer)
Semantic HTML5

Semantic Layout (header, main, footer)

Learn to structure pages with HTML5 semantic elements. Proper layout improves SEO, accessibility, and code maintainability by giving meaning to your page structure.

Why Semantic Layout Matters

Semantic HTML uses elements that clearly describe their meaning and purpose, making your code more readable for humans and machines (browsers, search engines, screen readers).

🔍 Better SEO

Search engines understand page structure and give semantic elements more weight in rankings

♿ Improved Accessibility

Screen readers use semantic elements as landmarks, helping users navigate efficiently

📖 Code Readability

Developers can instantly understand page structure without reading all the content

🛠️ Easier Maintenance

Clear structure makes it easier to update and maintain code over time

The Problem with Non-Semantic HTML

Before HTML5, developers used generic <div> elements for everything:

❌ Non-Semantic (Old Way)
HTML
<div id="header">
    <div id="logo">My Website</div>
    <div id="nav">
        <div class="nav-item"><a href="/">Home</a></div>
        <div class="nav-item"><a href="/about">About</a></div>
    </div>
</div>

<div id="content">
    <div class="post">
        <div class="post-title">Article Title</div>
        <div class="post-body">Article content...</div>
    </div>
</div>

<div id="sidebar">
    <div class="widget">Related Links</div>
</div>

<div id="footer">
    <div>© 2025 My Website</div>
</div>
Problems:
  • No semantic meaning—everything is just a "div"
  • Search engines can't distinguish header from footer
  • Screen readers can't create a document outline
  • Requires reading all IDs/classes to understand structure

HTML5 Semantic Elements

HTML5 introduced semantic elements that describe their purpose:

✅ Semantic (Modern Way)
HTML
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>

<aside>
    <h3>Related Links</h3>
</aside>

<footer>
    <p>&copy; 2025 My Website</p>
</footer>
💡
Benefits: Clear structure, search engines understand page hierarchy, screen readers can jump between sections, code is self-documenting.

The <header> Element

The <header> represents introductory content for a page or section. It typically contains logos, navigation, headings, and search forms.

Key Points:

  • Can be used multiple times (page header + section headers)
  • Usually contains <h1>-<h6>, <nav>, logo
  • Not a sectioning element (doesn't create outline)
Page Header Example
HTML
<header>
    <div class="logo">
        <img src="logo.svg" alt="Company Logo">
        <h1>My Website</h1>
    </div>
    
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
    
    <form class="search-form">
        <input type="search" placeholder="Search...">
        <button type="submit">Search</button>
    </form>
</header>
Article Header Example
HTML
<article>
    <header>
        <h2>Understanding Semantic HTML</h2>
        <p class="meta">
            By John Doe | Published: Jan 15, 2025 | Reading time: 10 min
        </p>
        <img src="featured.jpg" alt="Article cover image">
    </header>
    
    <p>Article content begins here...</p>
</article>

The <main> Element

The <main> element represents the primary content of the document. It should contain content unique to this page.

Important Rules:

  • Only ONE per page: Use exactly one <main> element
  • Direct child of <body>: Don't nest inside <article>, <aside>, etc.
  • Skip repetitive content: Don't include site navigation, sidebars, or copyright info
Main Element Example
HTML
<body>
    <header>
        <!-- Site header with logo and nav --&gt;
    </header>

    <main>
        <!-- PRIMARY page content goes here --&gt;
        <h1>Welcome to Our Blog</h1>
        
        <article>
            <h2>First Article</h2>
            <p>Article content...</p>
        </article>
        
        <article>
            <h2>Second Article</h2>
            <p>Article content...</p>
        </article>
    </main>

    <aside>
        <!-- Sidebar content --&gt;
    </aside>

    <footer>
        <!-- Site footer --&gt;
    </footer>
</body>
💡 Skip Links: Add a "Skip to main content" link for keyboard/screen reader users:
HTML
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
    <!-- Content --&gt;
</main>

The <footer> Element

The <footer> represents footer information for a page or section. It typically contains copyright, contact info, links, and authorship details.

Common Footer Content:

  • Copyright notices
  • Contact information
  • Links to privacy policy, terms of service
  • Social media links
  • Author information (for articles)
Page Footer Example
HTML
<footer>
    <div class="footer-content">
        <section class="footer-section">
            <h3>About Us</h3>
            <p>Company description and mission statement.</p>
        </section>
        
        <section class="footer-section">
            <h3>Quick Links</h3>
            <ul>
                <li><a href="/about">About</a></li>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Service</a></li>
            </ul>
        </section>
        
        <section class="footer-section">
            <h3>Contact</h3>
            <p>Email: contact@example.com</p>
            <p>Phone: (555) 123-4567</p>
        </section>
    </div>
    
    <div class="footer-bottom">
        <p>&copy; 2025 My Company. All rights reserved.</p>
        <div class="social-links">
            <a href="https://twitter.com/mycompany">Twitter</a>
            <a href="https://facebook.com/mycompany">Facebook</a>
        </div>
    </div>
</footer>
Article Footer Example
HTML
<article>
    <h2>Article Title</h2>
    <p>Article content...</p>
    
    <footer>
        <p>
            <strong>Author:</strong> Jane Smith<br>
            <strong>Published:</strong> January 15, 2025<br>
            <strong>Tags:</strong> 
            <a href="/tag/html">HTML</a>, 
            <a href="/tag/tutorial">Tutorial</a>
        </p>
    </footer>
</article>

The <nav> Element

The <nav> element represents a section of navigation links.

When to Use <nav>:

  • ✅ Main site navigation
  • ✅ Breadcrumb navigation
  • ✅ Table of contents
  • ✅ Pagination
  • ❌ Footer links (don't need nav, just regular links)
  • ❌ Social media icons (not primary navigation)
Navigation Examples
HTML
<!-- Main navigation --&gt;
<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Breadcrumb navigation --&gt;
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li aria-current="page">Current Article</li>
    </ol>
</nav>

<!-- Table of contents --&gt;
<nav aria-label="Table of contents">
    <h2>On this page</h2>
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#main-content">Main Content</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ul>
</nav>
💡 Accessibility Tip: Use aria-label when you have multiple <nav>elements to distinguish them for screen readers.

Complete Page Layout Example

Full Semantic Page Structure
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <!-- Skip link for accessibility --&gt;
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <!-- Site header --&gt;
    <header>
        <div class="logo">
            <img src="logo.svg" alt="Company Logo">
            <h1>My Website</h1>
        </div>
        
        <nav aria-label="Main navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main content area --&gt;
    <main id="main-content">
        <!-- Breadcrumb --&gt;
        <nav aria-label="Breadcrumb">
            <ol>
                <li><a href="/">Home</a></li>
                <li><a href="/blog">Blog</a></li>
                <li aria-current="page">Understanding Semantic HTML</li>
            </ol>
        </nav>

        <!-- Primary article --&gt;
        <article>
            <header>
                <h2>Understanding Semantic HTML</h2>
                <p class="meta">By John Doe | Jan 15, 2025</p>
            </header>
            
            <p>Article content goes here...</p>
            <p>More content...</p>
            
            <footer>
                <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/tutorial">Tutorial</a></p>
            </footer>
        </article>

        <!-- Related articles --&gt;
        <section>
            <h2>Related Articles</h2>
            <article>
                <h3><a href="/article-2">Another Article</a></h3>
                <p>Brief description...</p>
            </article>
        </section>
    </main>

    <!-- Sidebar --&gt;
    <aside>
        <section>
            <h2>About the Author</h2>
            <p>Bio information...</p>
        </section>
        
        <section>
            <h2>Popular Posts</h2>
            <ul>
                <li><a href="/post-1">Popular Post 1</a></li>
                <li><a href="/post-2">Popular Post 2</a></li>
            </ul>
        </section>
    </aside>

    <!-- Site footer --&gt;
    <footer>
        <div class="footer-content">
            <section>
                <h3>About Us</h3>
                <p>Company info...</p>
            </section>
            
            <section>
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="/privacy">Privacy</a></li>
                    <li><a href="/terms">Terms</a></li>
                </ul>
            </section>
        </div>
        
        <p>&copy; 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Document Outline

Screen readers and browsers create a document outline from your semantic structure:

TEXT
Page: My Website
├── Navigation: Main navigation
├── Main Content
│   ├── Navigation: Breadcrumb
│   ├── Article: Understanding Semantic HTML
│   │   ├── Header
│   │   ├── Content
│   │   └── Footer
│   └── Section: Related Articles
│       └── Article: Another Article
├── Aside
│   ├── Section: About the Author
│   └── Section: Popular Posts
└── Footer

Best Practices

✅ Do

  • Use ONE <main> per page
  • Use semantic elements over <div> when possible
  • Include aria-label for multiple navs
  • Add skip links for keyboard users
  • Nest headers inside <article> for metadata
  • Test with screen readers to verify structure

❌ Don't

  • Nest <main> inside other semantic elements
  • Use <nav> for every group of links
  • Put entire page in <article>
  • Use semantic elements just for styling
  • Ignore heading hierarchy (h1, then h2, then h3...)
  • Use <div> when semantic element exists

What's Next?

Now that you understand basic semantic layout, let's dive deeper into content sections with article, section, and aside.

Next: Content Sections (section, article, aside) →