HTML Tutorial: List of Semantic Tags

In this HTML tutorial, we will discuss all the HTML semantic tags. In this article, I will explain some of them through a list.

 List of Semantic Tags

Tag Name	<u>
Uses	The <header> tag is used to define the header section on a webpage. The <header> tag contains content such as the website name or logo, navigation links, search bar, etc.
Syntax	<header> < !-- Header content --> </header>
Example	<header> <h1>Welcome to My Website</h1> <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> </header>

Tag Name	<nav>
Uses	The <nav> tag is used to create navigation links. It is considered a good practice to use it along with the header tag.
Syntax	<nav> <!-- Navigation links --> </nav>
Example	<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>

Tag Name	<main>
Uses	The <main> tag is used to display the main content of the web page. This tag is used inside the body tag.
Syntax	<main> <!-- Main content --> </main>
Example	<main> <h2>Main Content</h2> <p>This is the main area of the webpage where most content resides.</p> </main>

Tag Name	<article>
Uses	Used to indicate a self-contained composition on a web page, such as a blog post or news article.
Syntax	<article> <!-- Article content -- > </article>
Example	<article> <h2>Understanding Semantic HTML</h2> <p>Semantic HTML is crucial for accessibility and SEO...</p> </article>

Tag Name	<section>
Uses	The <section> tag is used to group related content on a webpage such as testimonials, contact forms, etc.
Syntax	<section> <!-- Section content -- > </section>
Example	<section> <h2>Features</h2> <p>Our product offers a variety of features...</p> </section>

Tag Name	<footer>
Uses	<footer> tag is a tag that contains some information related to the website, copyright and some important links. This tag is used at the end of the webpage.
Syntax	<footer> <!-- Footer content -- > </footer>
Example	<footer> <p>© 2024 MyWebsite. All rights reserved.</p> </footer>

Tag Name	<aside>
Uses	The <aside> tag adds some content that is unrelated to the content of the webpage. A simple example of this is a sidebar.
Syntax	<aside> <!-- Sidebar content -- > </aside>
Example	<aside> <h3>Related Articles</h3> <ul> <li><a href="#article1">Article 1</a></li> <li><a href="#article2">Article 2</a></li> </ul> </aside>

Tag Name	<figure>
Uses	It is used to indicate self-contained content, such as a picture, diagram, or illustration, that is usually referred to in the main text.
Syntax	<figure> <!-- Figure content -- > </figure>
Example	<figure> <img src="image.jpg" alt="Descriptive text"> <figcaption>Figure 1: A sample image</figcaption> </figure>

Tag Name	<figcaption>
Uses	The <figcaption> tag defines a caption for the <figure> element.
Syntax	<figcaption> <!-- Caption content -- > </figcaption>
Example	<figure> <img src="image.jpg" alt="Descriptive text"> <figcaption>Figure 1: A sample image</figcaption> </figure>

Tag Name	<details>
Uses	Used to create a disclosure widget, allowing users to show or hide additional information.
Syntax	<details> <!-- Summary and detailed content -- > </details>
Example	<details> <summary>More information</summary> <p>This is the additional information that is initially hidden.</p> </details>

Tag Name	<summary>
Uses	Used to create a disclosure widget, allowing users to show or hide additional information.
Syntax	<summary> <!-- Summary content -- > </summary>
Example	<details> <summary>More information</summary> <p>This is the additional information that is initially hidden.</p> </details>

Tag Name	<mark>
Uses	Represents highlighted text that has a specific reference or importance in the document.
Syntax	<mark> <!-- Highlighted text -- > </mark>
Example	<p> The most <mark>important</mark> part of the document is highlighted. </p>

Tag Name	<time>
Uses	Represents a specific period in time, such as dates, times, or events.
Syntax	<time datetime="2024-09-01"> <!-- Displayed content -- > </time>
Example	<p> The event starts at <time datetime="2024-09-01T20:00">8:00 PM on September 1, 2024</time>. </p>

Tag Name	<address>
Uses	The <address> tag is used to show the owner information of the article.
Syntax	<address> <!-- Contact information -- > </address>
Example	<address> Written by <a href="mailto:webmaster@example.com"> John Doe</a> .<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

Tag Name	<blockquote >
Uses	Used for quoting a large section of content from another source, usually with attribution.
Syntax	<blockquote cite="source" > <!-- Contact information --> </blockquote>
Example	<blockquote cite="https://www.example.com"> "This is a blockquote from another source." </blockquote>

Tag Name	<cite>
Uses	Used to represent the title of a work, such as a book, article, or movie.
Syntax	<cite> <!-- Cited work --> </cite>
Example	<p> <cite>The Great Gatsby</cite> is a classic novel by F. Scott Fitzgerald. </p>

Tag Name	<code>
Uses	Represents a fragment of computer code.
Syntax	<code> <!-- Code content --> </code>
Example	<p> To display a message in JavaScript, use <code>alert('Hello, World!');</code> </p>

Tag Name	<pre>
Uses	Represents preformatted text, where the text is displayed in a fixed-width font, and whitespace and line breaks are preserved.
Syntax	<pre> <!-- Preformatted text --> </pre>
Example	<pre> Line 1 Line 2 Line 3 </pre>

Tag Name	<strong>
Uses	Indicates that the enclosed text has strong importance or emphasis.
Syntax	<strong> <!-- Strongly emphasized text --> </strong>
Example	<p> This is <strong>important</strong> information. </p>

Tag Name	<em>
Uses	Marks text that has emphasis, usually rendering it in italic.
Syntax	<em> <!-- Emphasized text --> </em>
Example	<p> It's <em>important</em> to understand how to use semantic tags in HTML. </p>