THE STRUCTURE OF A MODERN HTML5 PAGE

<header>

• Purpose: Usually contains the site’s title, logo, and sometimes the main navigation.
• Benefits:
• Provides a clear landmark for search engines and screen readers.
• Makes navigation easier for users, especially with assistive technologies.
• Example:

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

<nav>

• Purpose: Contains the main links for navigating the site.
• Benefits:
• Screen readers can quickly identify the menu for direct access.
• Improves SEO by structuring important links.
• Example:

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<main>

• <main>
• Benefits:
• Users of screen readers can skip directly to the main content.
• Helps search engines and indexing bots understand the page structure.
• Example:

<main>
  <article>...</article>
  <section>...</section>
</main>

<section>

• <h2><h3>
• Benefits:
• Improves readability and logical organization of content.
• Helps screen readers navigate easily between sections.
• Example:

<section>
  <h2>About Us</h2>
  <p>Our mission is to...</p>
</section>

<article>

• Purpose: Represents a self-contained, independent piece of content, like a blog post or news article.
• Benefits:
• Content can be reused or shared easily.
• Recognized by screen readers and search engines as independent content.
• Example:

<article>
  <h2>New Feature</h2>
  <p>We have added...</p>
</article>

<footer>

• Purpose: Usually contains contact information, legal links, copyright, or secondary navigation.
• Benefits:
• Provides a clear end to the page.
• Helps users and bots find important information quickly.
• Example:

<footer>
  <p>&copy; 2026 My Website</p>
</footer>

✅ How Semantic Tags Improve Structure and Accessibility

1. Logical Structure: Content is hierarchically organized, making it easier to read and index.
2. Accessibility: Assistive technologies can identify main areas of the page, allowing users to navigate quickly.
3. SEO: Semantic tags help search engines understand the content and context of the page.