HTML Semantic Elements

Semantic HTML elements give meaning and structure to web page content, making it more accessible and understood to browsers and developers alike. Here are some examples of semantic HTML elements:

1. <header> :

Represents the document or section header.   

<header>
  <h1>Website Title</h1>
  <p>A brief description of the website.</p>
</header>

2. <nav> :

Defines a set of navigation links.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

3. <main> :

Contains the main content of the document.

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>

4. <article> :

A self-contained piece of content that may be disseminated and utilized on its own.

<article>
  <h2>Article Title</h2>
  <p>Article content goes here.</p>
</article>

5. <section> :

A portion of a document is defined.

<section>
  <h2>Section Title</h2>
  <p>Section content goes here.</p>
</section>

6. <aside> :

Content that is only distantly related to the content surrounding it.

<article>
  <h2>Article Title</h2>
  <p>Article content goes here.</p>
  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </aside>
</article>

7. <footer> :

This element represents the footer of a document or section.

<footer>
  <p>&copy; 2024 Your Website</p>
</footer>

8. <time> :

Represents a certain time period.

<p>Published on <time datetime="2024-01-01">January 1, 2024</time></p>

9. <mark> :

Text that has been highlighted for reference or notation.

<p>This is <mark>important</mark> information.</p>

10. <figure> and <figcaption> :

<figure> is used to group and depict content, whereas <figcaption> is used to offer a caption for the content included within <figure> .

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Caption for the image.</figcaption>
</figure>

Using semantic HTML elements improves the structure and accessibility of your web page while also assisting search engines and other technologies in better understanding the content and its relationships. When feasible, use semantic elements to create a more understandable and well-organized content structure.