Semantic HTML tags: The key to SEO

Posted on:April 5, 2023 at 11:00 AM

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. While HTML has always been used to structure web pages, with the introduction of HTML5, there are now a variety of semantic tags that help to better define the content of a web page.

In this article, we’ll take a closer look at some of the most common semantic HTML tags, including headers, sections, articles, nav, and footer.

Table of contents

Open Table of contents

Headers

The <header> tag is used to define the header of a web page or section. This typically includes a logo, navigation links, and other information that is repeated across multiple pages on a website.

Here’s an example of using a header in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Website Logo">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <!-- Main content goes here -->
    </main>
    <footer>
      <!-- Footer content goes here -->
    </footer>
  </body>
</html>

Sections

The <section> tag is used to define a section of a web page. This can be used to divide a web page into different areas, such as different chapters in an article or different products in an online store.

Here’s an example of using sections in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget lorem sit amet metus mollis venenatis vitae sed eros. Donec pulvinar, eros eu vestibulum convallis, sapien orci rhoncus libero, in bibendum felis libero sit amet ex. Nam imperdiet elit id quam efficitur fringilla.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Nulla ultrices risus eget tincidunt vestibulum. Proin nec justo non velit dictum molestie. Nam eget ipsum at quam aliquam euismod nec eget urna. Suspendisse potenti. Pellentesque sed velit lorem.</p>
    </section>
  </body>
</html>

Articles

The <article> tag is used to define an independent, self-contained piece of content, such as a blog post, news article, or product review.

Here’s an example of using an article in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <article>
      <h2>Blog Post Title</h2>
      <p>By John Smith | 5th April 2023</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget lorem sit amet metus mollis venenatis vitae sed eros. Donec pulvinar, eros eu vestibulum convallis, sapien orci rhoncus libero, in bibendum felis libero sit amet ex. Nam imperdiet elit id quam efficitur fringilla </p>
  <p>Nullam venenatis lectus vitae elit congue elementum. Aliquam erat volutpat. Sed eu eros eget risus vestibulum efficitur. Nam luctus, sapien ut pretium ullamcorper, lorem ante lobortis ex, at efficitur risus nisi at ex.</p>
</article>
</body>
</html>

The <nav> tag is used to define a section of a web page that contains navigation links. This can be used to create a navigation menu for a website.

Here’s an example of using nav in an HTML document:

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Website Logo">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

The <footer> tag is used to define the footer of a web page or section. This typically includes copyright information, contact information, and other details about the website or organization.

Here’s an example of using a footer in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
      <!-- ... -->
    <footer>
      <p>&copy; 2023 MyWebsite.com</p>
      <p>Contact: info@mywebsite.com</p>
    </footer>
  </body>
</html>

Conclusion

Semantic HTML tags provide a way to add meaning and structure to web pages, making them more accessible to both humans and search engines. By using headers, sections, articles, nav, and footer tags, you can create well-structured and easy-to-navigate web pages.

What’s next?

In the coming article, we will be covering HTML Forms in depth. Don’t forget to follow and share this with your friends that are just starting their web development journey