Chapter 15 Beginner 7 min read Semantic HTML

Header, Nav, Footer

Every webpage has a header, navigation and footer. HTML5 provides dedicated semantic elements for each of these.

🎯 What you'll learn

✓Use <header> for site headers

✓Create navigation with <nav>

✓Build footers with <footer>

✓Understand when to use each element

Google Ad — 728×90 Leaderboard

Introduction to Header, Nav, Footer

This chapter covers Header, Nav, Footer in depth. Understanding this topic is essential for writing clean, modern HTML. Use the live editor below to experiment as you read.

💡 In This Chapter

You will see real code examples, clear explanations, and a live editor to practice immediately — no setup needed.

Header & Nav

Top-of-page structure.

HTML

<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Footer

Bottom-of-page.

HTML

<footer>
  <p>&copy; 2025 K2infocom. All rights reserved.</p>
</footer>

Try It Yourself

Edit the code below and click ▶ Run to see your changes live.

Live Editor

✎ Editor

👁 Preview

❓ Quick Check — Chapter 15

Which semantic element wraps the site logo and main navigation?

📄 Chapter Summary

Use <header> for site headers
Create navigation with <nav>
Build footers with <footer>
Understand when to use each element

Google Ad — 300×250 Medium Rectangle

◀PreviousSemantic Tags Next ChapterArticle, Section & Aside▶