HTML सिमेंटिक टैग

सिमेंटिक HTML क्यों महत्वपूर्ण है

Semantic HTML aise tags use karta hai jo apne content ka matlab batate hain: <header>, <nav>, <article>, <section>, <aside>, <footer>. Yeh tags browsers aur search engines dono ko batate hain ki content ka meaning kya hai, sirf dikhta kaisa hai yeh nahi. Google page ka structure aur topic samajhne ke liye semantics parse karta hai.

सिमेंटिक संरचना का उदाहरण

Apne page ki outline banane ke liye semantic elements use karein. Crawlers samajhte hain ki <article> main content hai, <header> mein navigation hota hai aur <footer> mein metadata.

<!DOCTYPE html>
<html>
<head>
  <title>Blog Post: SEO Tips for Developers</title>
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>SEO Tips for Developers</h1>
      <p>Published: <time datetime="2025-10-01">Oct 1, 2025</time></p>
      <section>
        <h2>Introduction</h2>
        <p>SEO is not just marketing; it's an engineering discipline...</p>
      </section>
      <section>
        <h2>Technical SEO Checklist</h2>
        <ul>
          <li>Mobile-first indexing</li>
          <li>Core Web Vitals</li>
          <li>Structured data markup</li>
        </ul>
      </section>
    </article>
    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="/web-performance">Web Performance Optimization</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>&copy; 2025 My Blog. All rights reserved.</p>
  </footer>
</body>
</html>

डिव सूप से बचें

Sirf <div> tags use karne se page ka saara semantic meaning chala jata hai. Search engines aur assistive readers pehchan nahi paate ki kaun sa content header, navigation ya article hai. Jahan possible ho, divs ki jagah semantic tags lagayein.