DAY 10

#webdev #programming #javascript #react

Hi all good evening! So we did not learn anything new in the last class....we just continued building a sample site using the semantic tags. I wanted to know more about how exactly writing a structured code helps in SEO so I googled about it and let me share you my understanding.

First of all SEO or Search Engine Optimization refers to the practice of improving our website's visibility when a user searches for content related to our site's content. So if our site's visibility is better then it will attract more views and traffic. This is where writing semantic HTML helps the site and it does so in the following ways:

1.Improved Indexing: Semantic tags help the SEO to identify the arrangement of content and also helps understanding the relevance of the content. For eg: main tag will indicate that this is the main content whereas aside will indicate that it is supplementary content...this will help in indexing.

2.Enhanced Relevance: When our content is marked in proper tags it will make search engines match it to user queries and this in turn will increase visibility.

3.Better Accessibility: Semantic tags is very useful for assistive technologies and screen readers to read content and thus improves user experience.

4.Featured Results: Structured content will help search engines use them as answers for FAQ's and display our site's content as small snippets in the results page.

So this is how writing semantic code helps our website's overall performance. I hope that this increased your understanding of SEO also as it did for me. I will provide a sample code of how a semantic HTML page looks like below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Blog Post</title>
  </head>
  <body>
    <header>
      <h1>My Awesome Blog</h1>
      <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>
        <header>
          <h2>The Power of Semantic HTML</h2>
          <p>Published on June 22, 2025 by Dev Guru</p>
        </header>
        <section>
          <h3>Why Semantics Matter</h3>
          <p>
            Using semantic elements improves accessibility and SEO, making your
            content easier to read for both humans and search engines.
          </p>
        </section>
        <section>
          <h3>Key Elements</h3>
          <ul>
            <li>&lt;article&gt;</li>
            <li>&lt;section&gt;</li>
            <li>&lt;header&gt; and &lt;footer&gt;</li>
          </ul>
        </section>
        <footer>
          <p>Tags: HTML, SEO, Web Development</p>
        </footer>
      </article>

      <aside>
        <h3>Related Posts</h3>
        <ul>
          <li><a href="#">Intro to HTML5</a></li>
          <li><a href="#">Building Better Navigation</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2025 My Awesome Blog</p>
    </footer>
  </body>
</html>

References: www.devto.com , www.quattr.com

That's all for today....see you all in the next post!