What are semantic tags in HTML

Expert Posts
, ,
1

Semantic tags in HTML are elements that provide meaning and structure to the content of a webpage. They are used to describe the type of content within the tags, making it easier for search engines, screen readers, and other web technologies to understand and interpret the content correctly.

Some commonly used semantic tags in HTML include:

  1. <header>: Represents the introductory content or a group of navigational links at the top of a webpage.
  2. <nav>: Defines a section of navigation links.
  3. <main>: Represents the main content of a webpage.
  4. <article>: Defines a self-contained composition that can be independently distributed or reused, such as a blog post or news article.
  5. <section>: Represents a standalone section of content within a document, such as chapters, tabs, or different parts of a webpage.
  6. <aside>: Represents content that is tangentially related to the main content, such as sidebars or pull quotes.
  7. <footer>: Represents the footer of a webpage or a section, typically containing information about the author, copyright, or contact details.

Here’s an example of using semantic tags in HTML with JavaScript to create a simple webpage:

<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<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>
<section>
<h2>About</h2>
<article>
<h3>Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article>
<h3>Experience</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</section>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</aside>
</main>
<footer>
<p>&copy; 2022 My Website. All rights reserved.</p>
</footer>
</body>
</html>

In this example, we have used semantic tags like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to structure the webpage’s content and provide meaning to each section.