Using HTML5 Semantic Tags

HTML5 introduced a number of new semantic tags that allow you to add meaning and structure to your HTML documents. These tags help to improve the accessibility and readability of your web pages, and they make it easier for search engines to understand the content of your pages.

In this article, we’ll take a closer look at how to use HTML5 semantic tags in your web pages.

HTML5 Semantic Tags

HTML5 semantic tags are HTML elements that are used to define the different parts of an HTML document, such as the header, footer, main content, and navigation.

Here’s a list of some of the most commonly used HTML5 semantic tags:

• <header>: Defines the header of a web page
• <footer>: Defines the footer of a web page
• <main>: Defines the main content of a web page
• <nav>: Defines a section of the web page that contains navigation links
• <article>: Defines an independent piece of content, such as a blog post or news article
• <section>: Defines a section of the web page that contains related content
• <aside>: Defines content that is related to the main content of the web page, but is separate from it
• <figure>: Defines a group of content, such as an image or video, that is self-contained and can be moved around the page

Here’s an example of how to use HTML5 semantic tags in an HTML document:

<header>
  <h1>My Website</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>Welcome to My Website</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam nunc vel est iaculis, eu ornare lacus tincidunt.</p>
  </article>
  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>Copyright 2021 My Website</p>
</footer>

In this example, we have used the <header>, <main>, <article>, <aside>, and <footer> tags to structure the HTML document. The <header> element contains the website’s logo and navigation links, the <main> element contains the main content of the web page, the <article> element contains a standalone piece of content, the <aside> element contains related content, and the <footer> element contains the website’s copyright information.

HTML5 Semantic Tags and SEO

Using HTML5 semantic tags can improve the SEO (Search Engine Optimization) of your web pages. SEO is the process of optimizing your web pages to rank higher in search engine results pages (SERPs).

Search engines use algorithms to crawl and index web pages, and they use various factors to determine the relevance and quality of a web page. One of these factors is the use of HTML5 semantic tags, which help search engines understand the structure and content of a web page.

By using HTML5 semantic tags, you can help search engines understand the purpose and content of different parts of your web pages. This can improve the ranking of your web pages in search engine results pages, and it can also increase the chances of your web pages being shown as rich snippets in search results.

Conclusion

HTML5 semantic tags are a powerful tool for adding meaning and structure to your HTML documents. By using these tags, you can improve the accessibility, readability, and SEO of your web pages.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

<section>
  <h2>Section Title</h2>
  <p>Lorem ipsum onec ullamcorper tempus mauris, a convallis dolor viverra quis.</p>
</section>