HTML Semantic tags are used to give a layout to your website. It refers to the meaning and purpose of different elements in an HTML document. These elements give structure and meaning to the content on a webpage and help web browsers and search engines understand the purpose and context of the information being presented.

Some of the benefits of writing semantic markup are as follows:

• Finding parts of meaningful code is significantly easier than searching through multiple nested dives with or without semantic tags or properly named classes.

• By using HTML semantics tags correctly, you can create a well-organized and easy-to-navigate webpage that is both user-friendly and search engine friendly.

• Screen readers can use it as a signpost to help visually impaired users navigate a page.

There are many semantic elements available in HTML5, but the most used ones are:

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<nav>

<section>

Let's discuss briefly in what scenarios all these elements are used:

HTML <section> Element

The <section> element defines a section in a document.

Examples of where a <section> element can be used:

• Chapters
• Introduction
• Contact information

A web page could normally be split into sections for introduction, content, and contact information.

HTML <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the website.

Examples of where the <article> element can be used:

• Blog Posts
• User Comments
• Product Cards
• Newspaper Articles
• Forum Posts

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

• single or multiple heading elements (<h1> - <h6>)
• Hero section of the page
• Navbar with logos, links, and icons
• author information

Important! You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer> or another <header>(nested) element.

HTML <footer> Element

The <footer> element defines a footer or ends for a document or a section.

A <footer> element typically contains:

• Author Information
• Copyright Information
• Contact Information
• Sitemap
• Back to Top Links
• Related Documents
• Social Media Links
• Subscribe Forms etc.

HTML <nav> Element

The <nav> element usually contains a set of navigation links. For example, Navbar can be made under the <nav> element.

HTML <aside> Element

The <aside> element defines some content aside from the main content it is placed with (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code snippets, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

Here's a brief example in which we have shown how HTML Semantics elements can be used. They don't provide any additional styling in comparison with the <div> element but they hold some meaning and are easier to understand.