Semantic HTML

Semantic vs non-semantic

अर्थपूर्ण टैग का उपयोग करें ताकि सहायक तकनीक संरचना को समझे। <button> बटन के रूप में घोषित होता है; <div onclick> केवल एक बॉक्स है।

<!-- ✓ Semantic -->
<header>
  <nav>
    <a href="/">Home</a>
    <button>Menu</button>
  </nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>
<footer>© 2024</footer>

<!-- ✗ Non-semantic -->
<div id="header">
  <div id="nav">
    <div onclick="go('/')">Home</div>
    <div onclick="menu()">Menu</div>
  </div>
</div>

मुख्य semantic टैग

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer> संरचना; <button>, <form>, <input>, <label> इंटरैक्शन के लिए; <img alt>, <table>, <ul>, <ol> सामग्री के लिए।

सामान्य गलतियां

सबकुछ के लिए divs का उपयोग करना, nested buttons, links को buttons के रूप में style करना, फॉर्म में fieldsets को भूलना, layout के लिए tables का उपयोग करना।

अभ्यास उदाहरण

एक ब्लॉग पोस्ट के लिए एक उचित semantic संरचना बनाएँ।

<article>
  <header>
    <h1>How to Build Accessible Websites</h1>
    <time datetime="2024-10-01">October 1, 2024</time>
  </header>
  <section>
    <h2>Introduction</h2>
    <p>In this guide...</p>
  </section>
  <section>
    <h2>Best Practices</h2>
    <ol>
      <li>Use semantic HTML</li>
      <li>Test with assistive tech</li>
    </ol>
  </section>
  <footer>
    <p>Posted in <a href="/category/web">Web Development</a></p>
  </footer>
</article>