Common Semantic HTML Elements:

Here are some commonly used semantic HTML tags and their purposes:

1. <header>

Represents the header of a webpage or a section, often containing the logo, navigation, or introductory content.

Example:

<header> 
 <h1>My Website</h1> 
 <nav> 
  <a href="#home">Home</a> 
  <a href="#about">About</a> 
  <a href="#contact">Contact</a>
 </nav> 
</header>

2. <nav>

Contains the navigation links for the website.

Example:

<nav> 
 <a href="#home">Home</a> 
 <a href="#services">Services</a> 
 <a href="#contact">Contact</a> 
</nav>

3. <main>

Holds the main content of the document that is unique to the page. This is particularly useful for accessibility, as it allows screen readers to skip directly to the main content.

Example:

<main> 
 <h2>Welcome to Our Services</h2> 
 <p>We offer a range of services to meet your needs.</p> 
</main>

4. <article>

Represents a self-contained piece of content like a blog post, news article, or forum entry.

Example:

<article> 
 <h2>Understanding HTML Semantics</h2> 
 <p>This article explains the importance of HTML semantics...</p> 
</article>

5. <section>

Defines a thematic grouping of content, like a chapter in a book or a section within a website.

Example:

<section> 
 <h2>Our Services</h2> 
 <p>We provide web development, SEO, and digital marketing services.</p> 
</section>

6. <aside>

Holds content related to the main content, like a sidebar, ads, or additional resources.

Example:

<aside> 
 <h3>Related Articles</h3> 
 <ul> 
  <li><a href="#html">HTML Basics</a></li> 
  <li><a href="#css">CSS Styling Tips</a></li> 
 </ul> 
</aside>

7. <footer>

Represents the footer of a document or a section, often containing contact information, copyright info, or links.

Example:

<footer> 
 <p>© 2024 My Website. All Rights Reserved.</p>
</footer>

8. <figure> and <figcaption>

• <figure> is used to group media elements (like images, videos) along with their captions, if needed.
• <figcaption> provides a caption or explanation for the content within the <figure>.

Example:

<figure> 
 <img src="image.jpg" alt="Sample image"> 
 <figcaption>A descriptive caption for the image.</figcaption> 
</figure>

9. <time>

Represents a specific time or date, which can be useful for events or blog post dates.

Example:

<p>Published on 
 <time datetime="2024-11-08">November 8, 2024</time>
</p>