Thread by @eyeshreya

Semantic Elements in HTML: How to Use Them
(with examples)

Learn with visuals ↓

<nav>

It includes our website's primary navigation links (such as Home, Contact Us, and About):

<header>

The logo, headings, and other introductory elements of the webpage make up this section.

<figure>

It includes illustrations, code examples, and images.

To add a caption, we can just use the <figcaption> tag also.

<main>

This is the body (all the necessary content) of our page.
It's important to keep in mind that a document should only have one <main> tag.

<section> and <article>

People often get confused between these two.

A section tag is used to group content together, whereas an article tag is a standalone element that can be placed anywhere on our page, such as in a blog post.

<mark>

It is used to highlight text in a paragraph.

<details> and <summary>

Have you seen toggle lists?
When you click on them, they reveal a hidden text.

We can create them with the help of these two HTML tags. Take a look at how:

<aside>

You've probably seen a sidebar on a blog site with related articles or contact information. It all comes under the aside tag.

<footer>

A footer is located at the bottom of a webpage.
It typically contains copyright information, contact information, and some site navigation.

And with that, we've covered nearly all of the essential HTML semantic tags.
I hope this thread has been useful to you.

Thanks for reading! 👋

😅 Read it as a thread scroll here:

threadreaderapp.com/scrolly/149359…