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

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

Semantic HTML uses tags that describe their content: <header>, <nav>, <article>, <section>, <aside>, <footer>. These tags tell both browsers and search engines what the content means, not just how it looks. Google parses semantics to understand page structure and topic.

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

Use semantic elements to outline your page. Crawlers understand that <article> is the main content, <header> contains navigation, and <footer> holds 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>

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

Using only <div> tags strips all semantic meaning from your page. Search engines and assistive readers can't tell what content is a header, navigation, or article. Replace divs with semantic tags when possible.