What are the Semantic HTML Code?

Semantic tags in HTML are elements that actual meanings for browsers, search engines, and developers. As oppose to non-semantic elements such as <div> and <span>, semantic elements clearly describe the purpose of the content, making it easier for search engines to understand your content, which is crucial for SEO purposes.

In terms of their purposes, the semantic tags can be classified into structural tags and content tags. The structural tags define the overall structure and layout of the webpage. Some common examples are:

<header>: Defines a header section for the webpage, usually contains a navigation menu and a grounp of introductory content for the webpage.
<nav>: Defines a navigation menu.
<main>: The main content for the HTML document. Should exclude <head>, <footer>, or <aside>.
<section>: Defines a group of related contents under a common theme.
<article>: A group of content that is self-contained and independent from other content in the webpage.
<aside>: Content that might be related to the main content, but not part of the main content. Often used for sidebars, advertisements, and more.
<footer>: The footer content, typically at the end of the webpage.

The content tags are those that are used to display text or embed media files within a webpage. Some common examples are:

<h1> to <h6>: Defines different levels of headings.
<p>: Defines a paragraph of text.
<a>: Defines a link.
<blockquote>: Defines a block level quote.
<q>: Defines an inline level quote.

The above HTML tags are used to define text content. Besides text, there are also semantic elements used to embed media files:

<img>: Embeds an image.
<audio>: Embeds an audio file.
<video>: Embeds a video.
<figure> and <figcaption>: Embeds graphical content, with a caption. Usually used in combination with <img>

html

1<figure>
2  <img src="chart.jpg" alt="A bar chart" />
3  <figcaption>Figure 1: A sample bar chart.</figcaption>
4</figure>

As well as tables and lists:

<table>: Defines a table.
<tr>: Defines a row in the table.
<td>: Defines a cell inside a table row.
<th>: Defines a header for the table.
<ul>: Defines an unordered list.
<ol>: Defines an ordered list.
<li>: Defines a list item.

And lastly, we also have semantic tags that are used purely for formatting purposes:

<strong>: Indicates important with bold text.
<em>: Emphasizes content with italic text.
<mark>: Highlight content.
<small>: Displays smaller text.