Skip to content

Latest commit

 

History

History
134 lines (89 loc) · 2.3 KB

Readme.md

File metadata and controls

134 lines (89 loc) · 2.3 KB

Episode 19: HTML5 Layout Tags (header, footer, nav, section, etc.)

Welcome to Episode 19 of the Learn HTML series! In this episode, you'll explore HTML5 semantic layout tags that help structure your web pages meaningfully and improve accessibility and SEO.

🧠 Learning Objectives

By the end of this episode, you'll understand:

  • The purpose of semantic layout tags in HTML5
  • Common layout tags and their usage
  • How semantic HTML improves SEO and accessibility

🔍 What are Semantic Layout Tags?

Semantic tags clearly describe the purpose of the element and the type of content it contains.

🧱 Common HTML5 Layout Tags

1. <header>

Defines the header of a page or section (typically contains logo, nav, etc.)

<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>

2. <footer>

Defines the footer of a page or section (usually contains copyright, links)

<footer>
  <p>&copy; 2025 Varun Yadav</p>
</footer>

3. <nav>

Represents a navigation section with links

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

4. <main>

Specifies the main content area of the page

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>Post content...</p>
  </article>
</main>

5. <section>

Represents a standalone section in a document

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

6. <article>

Used for self-contained content like blog posts, comments, etc.

<article>
  <h2>News Article</h2>
  <p>Details about the news...</p>
</article>

7. <aside>

Represents content indirectly related to the main content (e.g., sidebar, ads)

<aside>
  <h3>Related Posts</h3>
  <ul>
    <li>Post 1</li>
    <li>Post 2</li>
  </ul>
</aside>

🎯 Why Use Semantic Tags?

  • Enhances SEO (Search Engines better understand your content)
  • Improves accessibility (Screen readers can navigate better)
  • Better code readability and maintainability

🔗 Next Episode

➡️ Episode 20: All HTML Input Types

In the next episode, we will cover all the different types of input fields HTML offers — from text, email, and password to date, range, color, and more!