What are Semantic Elements?

Semantic elements in HTML are tags that carry meaning about the structure and content of a web page.

Unlike non-semantic elements, which are mainly used for presentation purposes and do not convey specific meaning, semantic elements provide information about the role and importance of the enclosed content. This helps browsers, search engines, and developers understand the document's structure and improve accessibility.

Here are some common semantic elements in HTML:

Semantic Elements in HTML

tag	Description
<article>	Defines independent, self-contained content
<aside>>	Defines content aside from the page content
<details	Defines additional details that the user can view or hide
<aside>>	Defines content aside from the page content
<figcaption>	Defines a caption for a <figure> element
<article>	Defines independent, self-contained content
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<main>	Specifies the main content of a document
<section>	Defines a section in a document
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time

<header>:

Represents the header of a document or section and can contain headings, logos, navigation, etc.

Example


<header>
<h1>Website Title</h1>
<nav>
<!-- Navigation links go here -->
</nav>
</header>

You can click on above box to edit the code and run again.

Output

<nav>: Defines a navigation menu, typically containing links to other pages or sections within the website.

Example


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

You can click on above box to edit the code and run again.

Output

<article>: Represents a self-contained piece of content that could be distributed and reused independently, such as a news article, blog post, or forum post.

Example



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

You can click on above box to edit the code and run again.

Output

<section>: Defines a section of content with a related theme or purpose. It is a generic container and does not imply a specific meaning.

Example



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

You can click on above box to edit the code and run again.

Output

<aside>: Represents content that is tangentially related to the content around it, such as a sidebar, pull quote, or related links.

Example


<asid>
 <h3>
   <ul>
      <li><a href="#"Link 1</a></li>
      <li><a href="#"Link 2</a></li>
  </ul>
 </h3>
</asid>

You can click on above box to edit the code and run again.

Output

<footer>: Represents the footer of a document or section, often containing copyright information, links to terms of service, or contact information.

Example


<footer>
      <p>© 2024 Your Website<</p>
</footer>

You can click on above box to edit the code and run again.

Output

Using semantic elements not only improves the structure and readability of your HTML but also helps assistive technologies, search engines, and other tools understand the content and context of your web pages. It's a good practice to use semantic elements where appropriate to create well-organized and accessible web documents.