The Importance of Semantic HTML: Why we Should Use It

In this tutorial, you will learn how to use the proper structure of an HTML document by using semantic HTML. In HTML, semantic tags describe the meaning of content.

The semantic HTML is used to help search engines understand the content of a webpage and makes the content more accessible to people with disabilities.

Why use semantic HTML?

•  Improves accessibility: Assistive technologies, like screen readers, rely on semantic HTML to understand the content and structure of a webpage. Using semantic HTML tags like <header>, <nav>, and <main> can help these technologies more easily navigate and interpret the content of the page.
• Enhances SEO: Search engines use the structure and content of a webpage to understand what it is about and how relevant it is to a user's search query. Using semantic HTML tags like <h1> and <h2> can help search engines understand the hierarchy of your content and determine the importance of each heading.
• Makes code easier to read and maintain: Semantic HTML can make it easier for developers to understand the structure and purpose of the content on a webpage, which can make it easier to update and maintain the code.

Examples of semantic HTML tags

• <header>: Used to contain the header content of a webpage, which might include a logo, navigation links, and search bar.
• <nav>: Used to contain the main navigation links for a webpage.
• <main>: Used to contain the main content of a webpage.
• <section>: Used to group content into related sections.
• <article>: Used to contain self-contained content, such as a blog post or news article.
• <aside>: Used to contain content that is tangentially related to the main content of the page, such as a sidebar.
• <footer>: Used to contain the footer content of a webpage, which might include the copyright information and site navigation links.

Markup in a semantic HTML way

Here we are going to talk about what are semantic HTML and the importance of semantic HTML. By using the semantic HTML it describes the meaning of content.

<header>
  <h1>This is a main heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>This is an article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, nisi vel tincidunt tempor, nisi nisi tempus nisi, ut condimentum mauris ligula sed risus.</p>
  </article>
</main>

<footer>
  <p>Copyright 2021</p>
</footer>

Markup non-semantic HTML

Semantic HTML is the use of HTML tags that are meaningful to the structure and content of a webpage, rather than just the appearance of the content. This means using tags like <h1> for headings, <p> for paragraphs, and <article> for self-contained content, rather than using tags like <div> or <span> that do not have any inherent meaning.

<header>
  <h1>This is a main heading</h1>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>

<div>
  <div>
    <h2>This is an article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, nisi vel tincidunt tempor, nisi nisi tempus nisi, ut condimentum mauris ligula sed risus.</p>
  </div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, nisi vel tincidunt tempor.</span>
</div>

<footer>
  <p>Copyright 2021</p>
</footer>

Conclusion

In this blog, we successfully learned about how to use semantic HTML for building better-structured websites. Thank you for taking the time to read.