<!-- Non-semantic approach -->
<div class="header">
  <div class="navigation">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Contact</div>
  </div>
</div>

<div class="main-content">
  <div class="article">
    <div class="article-title">Understanding Semantic HTML</div>
    <div class="article-content">
      Content goes here...
    </div>
  </div>
</div>

<div class="sidebar">
  <div class="widget">Related Articles</div>
</div>

<div class="footer">
  <div class="copyright">© 2023 Example Site</div>
</div>

<!-- Semantic approach -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Understanding Semantic HTML</h1>
    <section>
      <p>Content goes here...</p>
    </section>
  </article>
</main>

<aside>
  <section>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/article1">Article 1</a></li>
      <li><a href="/article2">Article 2</a></li>
    </ul>
  </section>
</aside>

<footer>
  <p>&copy; 2023 Example Site</p>
</footer>

<!-- Site header -->
<header>
  <h1>Company Name</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Article header -->
<article>
  <header>
    <h2>Article Title</h2>
    <p>By <strong>Author Name</strong></p>
    <time datetime="2023-12-01">December 1, 2023</time>
  </header>
  <p>Article content...</p>
</article>

<!-- Section header -->
<section>
  <header>
    <h3>Section Title</h3>
    <p>Section introduction</p>
  </header>
  <p>Section content...</p>
</section>

<!-- Main site navigation -->
<nav role="navigation" aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops">Laptops</a></li>
    <li aria-current="page">Gaming Laptops</li>
  </ol>
</nav>

<!-- Table of contents -->
<nav aria-label="Table of contents">
  <ol>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#methods">Methods</a></li>
    <li><a href="#results">Results</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ol>
</nav>

<!-- Pagination -->
<nav aria-label="Pagination">
  <ul>
    <li><a href="/page/1" aria-label="Go to first page">1</a></li>
    <li><a href="/page/2">2</a></li>
    <li><span aria-current="page" aria-label="Current page">3</span></li>
    <li><a href="/page/4">4</a></li>
    <li><a href="/page/5" aria-label="Go to last page">5</a></li>
  </ul>
</nav>

<!-- The main content area -->
<main id="main-content">
  <h1>Welcome to Our Website</h1>
  <p>This is the primary content of the page.</p>

  <section id="featured-products">
    <h2>Featured Products</h2>
    <!-- Product listings -->
  </section>

  <section id="testimonials">
    <h2>Customer Testimonials</h2>
    <!-- Testimonials -->
  </section>
</main>

<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Blog post -->
<article>
  <header>
    <h1>The Future of Web Development</h1>
    <p>Published by <a href="/authors/jane-doe">Jane Doe</a></p>
    <time datetime="2023-12-01T10:30:00Z">December 1, 2023</time>
    <div class="tags">
      <span class="tag">Web Development</span>
      <span class="tag">HTML5</span>
      <span class="tag">Semantic Web</span>
    </div>
  </header>

  <section>
    <h2>Introduction</h2>
    <p>Web development continues to evolve...</p>
  </section>

  <section>
    <h2>Current Trends</h2>
    <p>Several trends are shaping the industry...</p>
  </section>

  <footer>
    <div class="article-meta">
      <div class="share-buttons">
        <button type="button" onclick="share('twitter')">Share on Twitter</button>
        <button type="button" onclick="share('facebook')">Share on Facebook</button>
      </div>
      <div class="article-stats">
        <span>1,234 views</span>
        <span>56 comments</span>
      </div>
    </div>
  </footer>
</article>

<!-- Product review -->
<article itemscope itemtype="http://schema.org/Review">
  <header>
    <h3 itemprop="name">Amazing Laptop Review</h3>
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <span itemprop="ratingValue">5</span> out of 
      <span itemprop="bestRating">5</span> stars
    </div>
  </header>

  <div itemprop="reviewBody">
    <p>This laptop exceeded my expectations in every way...</p>
  </div>

  <footer>
    <p>Reviewed by <span itemprop="author">John Smith</span> on 
       <time itemprop="datePublished" datetime="2023-11-15">November 15, 2023</time>
    </p>
  </footer>
</article>

<!-- Document sections -->
<main>
  <section id="about-us">
    <h2>About Our Company</h2>
    <p>We are a leading provider of...</p>

    <section id="our-history">
      <h3>Our History</h3>
      <p>Founded in 1995...</p>
    </section>

    <section id="our-mission">
      <h3>Our Mission</h3>
      <p>To provide exceptional service...</p>
    </section>
  </section>

  <section id="services">
    <h2>Our Services</h2>
    <div class="service-grid">
      <article class="service">
        <h3>Web Development</h3>
        <p>Custom web applications...</p>
      </article>
      <article class="service">
        <h3>Mobile Apps</h3>
        <p>Native and hybrid mobile solutions...</p>
      </article>
    </div>
  </section>
</main>

<!-- Sidebar content -->
<aside>
  <section>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="/html-best-practices">HTML Best Practices</a></li>
      <li><a href="/css-architecture">CSS Architecture</a></li>
      <li><a href="/javascript-patterns">JavaScript Patterns</a></li>
    </ul>
  </section>

  <section>
    <h3>Advertisement</h3>
    <div class="ad-container">
      <!-- Ad content -->
    </div>
  </section>
</aside>

<!-- Pull quote in article -->
<article>
  <p>The importance of semantic HTML cannot be overstated...</p>

  <aside>
    <blockquote>
      "Semantic HTML is the foundation of accessible web design"
      <cite>- Web Accessibility Expert</cite>
    </blockquote>
  </aside>

  <p>This approach ensures that content is meaningful...</p>
</article>

<!-- Site footer -->
<footer>
  <div class="footer-content">
    <section>
      <h3>Contact Information</h3>
      <address>
        <p>123 Web Street<br>
           Internet City, IC 12345</p>
        <p>Phone: <a href="tel:+1234567890">(123) 456-7890</a></p>
        <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
      </address>
    </section>

    <section>
      <h3>Quick Links</h3>
      <nav>
        <ul>
          <li><a href="/privacy">Privacy Policy</a></li>
          <li><a href="/terms">Terms of Service</a></li>
          <li><a href="/sitemap">Sitemap</a></li>
        </ul>
      </nav>
    </section>

    <section>
      <h3>Follow Us</h3>
      <ul class="social-links">
        <li><a href="https://twitter.com/example" aria-label="Follow us on Twitter">Twitter</a></li>
        <li><a href="https://facebook.com/example" aria-label="Follow us on Facebook">Facebook</a></li>
        <li><a href="https://linkedin.com/company/example" aria-label="Follow us on LinkedIn">LinkedIn</a></li>
      </ul>
    </section>
  </div>

  <div class="footer-bottom">
    <p>&copy; 2023 Example Company. All rights reserved.</p>
  </div>
</footer>

<!-- Article footer -->
<article>
  <h2>Article Title</h2>
  <p>Article content...</p>

  <footer>
    <div class="article-meta">
      <p>Last updated: <time datetime="2023-12-01">December 1, 2023</time></p>
      <div class="author-info">
        <img src="/authors/jane-doe.jpg" alt="Jane Doe" width="50" height="50">
        <div>
          <p><strong>Jane Doe</strong></p>
          <p>Senior Web Developer</p>
        </div>
      </div>
    </div>
  </footer>
</article>

<!-- Image with caption -->
<figure>
  <img src="/charts/revenue-2023.png" 
       alt="Bar chart showing revenue growth from Q1 to Q4 2023"
       width="600" 
       height="400">
  <figcaption>
    Revenue growth throughout 2023, showing a 150% increase from Q1 to Q4
  </figcaption>
</figure>

<!-- Code example with caption -->
<figure>
  <pre><code class="language-javascript">
function calculateArea(radius) {
  return Math.PI * radius * radius;
}
  </code></pre>
  <figcaption>
    Example function to calculate the area of a circle
  </figcaption>
</figure>

<!-- Quote with citation -->
<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>
    <cite>Alan Kay</cite>, computer scientist
  </figcaption>
</figure>

<!-- Video with description -->
<figure>
  <video controls width="600" height="400">
    <source src="/videos/tutorial.mp4" type="video/mp4">
    <source src="/videos/tutorial.webm" type="video/webm">
    <track kind="captions" src="/captions/tutorial-en.vtt" srclang="en" label="English">
    Your browser does not support the video tag.
  </video>
  <figcaption>
    Tutorial: Getting Started with HTML5 Semantic Elements
  </figcaption>
</figure>

<!-- FAQ section -->
<section id="faq">
  <h2>Frequently Asked Questions</h2>

  <details>
    <summary>What is semantic HTML?</summary>
    <p>Semantic HTML is the use of HTML markup to reinforce the semantics, 
       or meaning, of the information in webpages rather than merely to 
       define its presentation or look.</p>
  </details>

  <details>
    <summary>Why is accessibility important?</summary>
    <p>Accessibility ensures that websites and applications can be used 
       by people with disabilities, providing equal access to information 
       and functionality.</p>
  </details>

  <details open>
    <summary>How do I test for accessibility?</summary>
    <div>
      <p>There are several ways to test for accessibility:</p>
      <ul>
        <li>Use automated testing tools like axe or Lighthouse</li>
        <li>Test with screen readers</li>
        <li>Navigate using only the keyboard</li>
        <li>Check color contrast ratios</li>
      </ul>
    </div>
  </details>
</section>

<!-- Settings panel -->
<details class="settings-panel">
  <summary>Advanced Settings</summary>
  <form>
    <fieldset>
      <legend>Notification Preferences</legend>
      <label>
        <input type="checkbox" name="email" checked>
        Email notifications
      </label>
      <label>
        <input type="checkbox" name="sms">
        SMS notifications
      </label>
    </fieldset>
  </form>
</details>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Guide - Web Development Blog</title>
</head>
<body>
  <header>
    <h1>Web Development Blog</h1> <!-- Site title -->
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/tutorials">Tutorials</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Understanding Semantic HTML</h1> <!-- Page/Article title -->
        <p>A comprehensive guide to writing meaningful markup</p>
      </header>

      <section>
        <h2>Introduction</h2> <!-- Major section -->
        <p>HTML5 introduced many semantic elements...</p>

        <section>
          <h3>What is Semantic HTML?</h3> <!-- Subsection -->
          <p>Semantic HTML refers to...</p>

          <section>
            <h4>Benefits of Semantic Markup</h4> <!-- Sub-subsection -->
            <ul>
              <li>Improved accessibility</li>
              <li>Better SEO</li>
              <li>Easier maintenance</li>
            </ul>
          </section>
        </section>
      </section>

      <section>
        <h2>HTML5 Semantic Elements</h2>

        <section>
          <h3>Structural Elements</h3>

          <section>
            <h4>Header Element</h4>
            <p>The header element represents...</p>
          </section>

          <section>
            <h4>Nav Element</h4>
            <p>The nav element represents...</p>
          </section>
        </section>
      </section>
    </article>
  </main>

  <aside>
    <section>
      <h2>Related Articles</h2> <!-- Sidebar heading -->
      <ul>
        <li><a href="/css-grid">CSS Grid Layout</a></li>
        <li><a href="/responsive-design">Responsive Design</a></li>
      </ul>
    </section>
  </aside>

  <footer>
    <p>&copy; 2023 Web Development Blog</p>
  </footer>
</body>
</html>

<!-- Explicit ARIA landmarks -->
<body>
  <header role="banner">
    <h1>Site Title</h1>
    <nav role="navigation" aria-label="Main navigation">
      <!-- Navigation content -->
    </nav>
  </header>

  <main role="main">
    <article role="article">
      <!-- Article content -->
    </article>
  </main>

  <aside role="complementary">
    <!-- Sidebar content -->
  </aside>

  <footer role="contentinfo">
    <!-- Footer content -->
  </footer>
</body>

<!-- Implicit landmarks (HTML5 semantic elements automatically provide roles) -->
<body>
  <header> <!-- Automatically has banner role -->
    <nav> <!-- Automatically has navigation role -->
    </nav>
  </header>

  <main> <!-- Automatically has main role -->
  </main>

  <aside> <!-- Automatically has complementary role -->
  </aside>

  <footer> <!-- Automatically has contentinfo role -->
  </footer>
</body>

<!-- Form with ARIA labels -->
<form role="search" aria-label="Site search">
  <div class="form-group">
    <label for="search-input">Search</label>
    <input type="search" 
           id="search-input" 
           name="query"
           aria-describedby="search-help"
           aria-required="true"
           placeholder="Enter search terms">
    <div id="search-help" class="help-text">
      Search across all articles and tutorials
    </div>
  </div>
  <button type="submit" aria-label="Submit search">
    <span aria-hidden="true">🔍</span>
    Search
  </button>
</form>

<!-- Navigation with current page indication -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Dynamic content updates -->
<div id="status-message" 
     role="status" 
     aria-live="polite" 
     aria-atomic="true">
  <!-- Status messages will be announced by screen readers -->
</div>

<div id="error-message" 
     role="alert" 
     aria-live="assertive">
  <!-- Error messages will interrupt screen reader -->
</div>

<!-- Expandable content -->
<button type="button" 
        aria-expanded="false" 
        aria-controls="menu-content"
        aria-label="Open main menu">
  Menu
</button>
<div id="menu-content" aria-hidden="true">
  <!-- Menu items -->
</div>

<!-- Data tables -->
<table role="table" aria-label="Sales data for Q4 2023">
  <caption>Quarterly sales figures by region</caption>
  <thead>
    <tr>
      <th scope="col" id="region">Region</th>
      <th scope="col" id="q1">Q1 Sales</th>
      <th scope="col" id="q2">Q2 Sales</th>
      <th scope="col" id="q3">Q3 Sales</th>
      <th scope="col" id="q4">Q4 Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="north">North America</th>
      <td headers="north q1">$1.2M</td>
      <td headers="north q2">$1.5M</td>
      <td headers="north q3">$1.8M</td>
      <td headers="north q4">$2.1M</td>
    </tr>
    <tr>
      <th scope="row" id="europe">Europe</th>
      <td headers="europe q1">$800K</td>
      <td headers="europe q2">$950K</td>
      <td headers="europe q3">$1.1M</td>
      <td headers="europe q4">$1.3M</td>
    </tr>
  </tbody>
</table>

<!-- Skip links for keyboard navigation -->
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <a href="#main-navigation" class="skip-link">Skip to navigation</a>

  <header>
    <nav id="main-navigation" aria-label="Main navigation">
      <!-- Navigation -->
    </nav>
  </header>

  <main id="main-content">
    <!-- Main content -->
  </main>
</body>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}
</style>

<!-- Focus management in single-page applications -->
<script>
function navigateToPage(pageTitle, contentHtml) {
  // Update page content
  document.getElementById('main-content').innerHTML = contentHtml;

  // Update page title
  document.title = pageTitle;

  // Set focus to main content for screen readers
  const mainContent = document.getElementById('main-content');
  mainContent.setAttribute('tabindex', '-1');
  mainContent.focus();

  // Announce page change to screen readers
  const announcement = document.getElementById('page-announcement');
  announcement.textContent = `Navigated to ${pageTitle}`;
}
</script>

<div id="page-announcement" 
     role="status" 
     aria-live="polite" 
     class="sr-only">
</div>

<!-- Article with rich semantic markup -->
<article itemscope itemtype="http://schema.org/Article">
  <header>
    <h1 itemprop="headline">
      The Complete Guide to HTML5 Semantic Elements
    </h1>

    <div class="article-meta">
      <address itemprop="author" itemscope itemtype="http://schema.org/Person">
        By <span itemprop="name">Jane Developer</span>
      </address>

      <time itemprop="datePublished" datetime="2023-12-01T10:00:00Z">
        December 1, 2023
      </time>

      <time itemprop="dateModified" datetime="2023-12-01T15:30:00Z">
        Updated: December 1, 2023
      </time>
    </div>

    <div itemprop="description">
      Learn how to use HTML5 semantic elements to create more accessible, 
      SEO-friendly, and maintainable web pages.
    </div>
  </header>

  <div itemprop="articleBody">
    <section>
      <h2>Introduction</h2>
      <p>HTML5 introduced a set of semantic elements that provide meaning...</p>
    </section>

    <section>
      <h2>Key Benefits</h2>
      <ul>
        <li>Improved accessibility for users with disabilities</li>
        <li>Better search engine optimization</li>
        <li>Cleaner, more maintainable code</li>
      </ul>
    </section>
  </div>

  <footer>
    <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <span itemprop="name">Web Development Blog</span>
    </div>
  </footer>
</article>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  <ol>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="/tutorials">
        <span itemprop="name">Tutorials</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span itemprop="name">HTML5 Semantic Elements</span>
      <meta itemprop="position" content="3">
    </li>
  </ol>
</nav>

<head>
  <!-- Basic meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Semantic Architecture Guide - Web Dev Blog</title>
  <meta name="description" content="Learn to build meaningful web structure with HTML5 semantic elements. Improve accessibility, SEO, and code maintainability.">
  <meta name="keywords" content="HTML5, semantic elements, web accessibility, SEO, web development">
  <meta name="author" content="Jane Developer">

  <!-- Open Graph meta tags for social sharing -->
  <meta property="og:title" content="HTML5 Semantic Architecture Guide">
  <meta property="og:description" content="Master HTML5 semantic elements for better accessibility and SEO">
  <meta property="og:image" content="/images/html5-semantic-guide.jpg">
  <meta property="og:url" content="https://example.com/html5-semantic-guide">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Web Development Blog">

  <!-- Twitter Card meta tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML5 Semantic Architecture Guide">
  <meta name="twitter:description" content="Master HTML5 semantic elements for better accessibility and SEO">
  <meta name="twitter:image" content="/images/html5-semantic-guide.jpg">
  <meta name="twitter:creator" content="@janedev">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/html5-semantic-guide">

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": "HTML5 Semantic Architecture Guide",
    "description": "Learn to build meaningful web structure with HTML5 semantic elements",
    "author": {
      "@type": "Person",
      "name": "Jane Developer"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Web Development Blog",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    },
    "datePublished": "2023-12-01T10:00:00Z",
    "dateModified": "2023-12-01T15:30:00Z",
    "image": "https://example.com/images/html5-semantic-guide.jpg",
    "url": "https://example.com/html5-semantic-guide"
  }
  </script>
</head>

<!-- Organization information -->
<div itemscope itemtype="http://schema.org/Organization">
  <h1 itemprop="name">ACME Web Development</h1>

  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Web Street</span>,
    <span itemprop="addressLocality">Tech City</span>,
    <span itemprop="addressRegion">CA</span>
    <span itemprop="postalCode">90210</span>
  </div>

  <div>Phone: <span itemprop="telephone">+1-555-123-4567</span></div>
  <div>Email: <a href="mailto:info@acme.com" itemprop="email">info@acme.com</a></div>
  <div>Website: <a href="https://acme.com" itemprop="url">acme.com</a></div>
</div>

<!-- Product information -->
<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Professional Website Package</h2>

  <div itemprop="description">
    Complete website development package including design, development, 
    and hosting setup.
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <span itemprop="price">2999.00</span>
    <span itemprop="priceCurrency">USD</span>
    <span itemprop="availability" content="http://schema.org/InStock">In Stock</span>
  </div>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    Rating: <span itemprop="ratingValue">4.8</span> out of 
    <span itemprop="bestRating">5</span> 
    (<span itemprop="ratingCount">24</span> reviews)
  </div>
</div>

<!-- Event information -->
<div itemscope itemtype="http://schema.org/Event">
  <h3 itemprop="name">Web Development Workshop</h3>

  <div itemprop="description">
    Learn modern web development techniques in this hands-on workshop.
  </div>

  <div>
    Date: <time itemprop="startDate" datetime="2024-01-15T09:00">
      January 15, 2024 at 9:00 AM
    </time>
  </div>

  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">Tech Conference Center</span>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">456 Conference Ave</span>,
      <span itemprop="addressLocality">Tech City</span>
    </div>
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">199</span>
    <span itemprop="priceCurrency">USD</span>
  </div>
</div>

<!-- FAQ section -->
<div itemscope itemtype="http://schema.org/FAQPage">
  <h2>Frequently Asked Questions</h2>

  <div itemscope itemprop="mainEntity" itemtype="http://schema.org/Question">
    <h3 itemprop="name">What is semantic HTML?</h3>
    <div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
      <div itemprop="text">
        Semantic HTML is the use of HTML markup to reinforce the semantics, 
        or meaning, of the information in webpages and web applications.
      </div>
    </div>
  </div>

  <div itemscope itemprop="mainEntity" itemtype="http://schema.org/Question">
    <h3 itemprop="name">Why is accessibility important?</h3>
    <div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
      <div itemprop="text">
        Accessibility ensures that websites can be used by people with 
        disabilities, providing equal access to information and functionality.
      </div>
    </div>
  </div>
</div>

<form novalidate>
  <fieldset>
    <legend>Personal Information</legend>

    <div class="form-group">
      <label for="first-name">
        First Name <span aria-label="required">*</span>
      </label>
      <input type="text" 
             id="first-name" 
             name="firstName"
             required
             aria-describedby="first-name-error"
             aria-invalid="false">
      <div id="first-name-error" class="error-message" role="alert">
        <!-- Error message will appear here -->
      </div>
    </div>

    <div class="form-group">
      <label for="email">
        Email Address <span aria-label="required">*</span>
      </label>
      <input type="email" 
             id="email" 
             name="email"
             required
             aria-describedby="email-help email-error"
             autocomplete="email">
      <div id="email-help" class="help-text">
        We'll never share your email with anyone else.
      </div>
      <div id="email-error" class="error-message" role="alert">
        <!-- Error message will appear here -->
      </div>
    </div>

    <div class="form-group">
      <label for="phone">Phone Number</label>
      <input type="tel" 
             id="phone" 
             name="phone"
             aria-describedby="phone-help"
             autocomplete="tel">
      <div id="phone-help" class="help-text">
        Optional. Format: (123) 456-7890
      </div>
    </div>
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>

    <div class="form-group">
      <fieldset>
        <legend>Notification Method</legend>

        <label>
          <input type="radio" name="notification" value="email" checked>
          Email notifications
        </label>

        <label>
          <input type="radio" name="notification" value="sms">
          SMS notifications
        </label>

        <label>
          <input type="radio" name="notification" value="none">
          No notifications
        </label>
      </fieldset>
    </div>

    <div class="form-group">
      <label>
        <input type="checkbox" name="newsletter" value="yes">
        Subscribe to our newsletter
      </label>
    </div>

    <div class="form-group">
      <label for="comments">Additional Comments</label>
      <textarea id="comments" 
                name="comments"
                rows="4"
                aria-describedby="comments-help"
                maxlength="500"></textarea>
      <div id="comments-help" class="help-text">
        Maximum 500 characters
      </div>
    </div>
  </fieldset>

  <div class="form-actions">
    <button type="submit">Submit Form</button>
    <button type="reset">Reset Form</button>
  </div>
</form>

<form id="contact-form" novalidate>
  <div class="form-summary" id="form-errors" role="alert" aria-live="polite">
    <!-- Form-level errors will appear here -->
  </div>

  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" 
           id="username" 
           name="username"
           required
           minlength="3"
           maxlength="20"
           pattern="^[a-zA-Z0-9_]+$"
           aria-describedby="username-help username-error">
    <div id="username-help" class="help-text">
      3-20 characters, letters, numbers, and underscores only
    </div>
    <div id="username-error" class="error-message"></div>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" 
           id="password" 
           name="password"
           required
           minlength="8"
           aria-describedby="password-help password-error">
    <div id="password-help" class="help-text">
      Minimum 8 characters required
    </div>
    <div id="password-error" class="error-message"></div>
  </div>

  <button type="submit">Create Account</button>
</form>

<script>
// Enhanced form validation
document.getElementById('contact-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const form = e.target;
  const errors = [];

  // Validate each field
  const fields = form.querySelectorAll('input[required]');
  fields.forEach(field => {
    const errorElement = document.getElementById(field.id + '-error');

    if (!field.validity.valid) {
      const error = getErrorMessage(field);
      errorElement.textContent = error;
      field.setAttribute('aria-invalid', 'true');
      errors.push(error);
    } else {
      errorElement.textContent = '';
      field.setAttribute('aria-invalid', 'false');
    }
  });

  // Display form-level errors
  const errorSummary = document.getElementById('form-errors');
  if (errors.length > 0) {
    errorSummary.innerHTML = `
      <h3>Please correct the following errors:</h3>
      <ul>${errors.map(error => `<li>${error}</li>`).join('')}</ul>
    `;
    errorSummary.focus();
  } else {
    errorSummary.innerHTML = '';
    // Submit form
    console.log('Form is valid, submitting...');
  }
});

function getErrorMessage(field) {
  if (field.validity.valueMissing) {
    return `${field.labels[0].textContent} is required`;
  }
  if (field.validity.tooShort) {
    return `${field.labels[0].textContent} must be at least ${field.minLength} characters`;
  }
  if (field.validity.patternMismatch) {
    return `${field.labels[0].textContent} format is invalid`;
  }
  return `${field.labels[0].textContent} is invalid`;
}
</script>