Tell us about the main semantic tags used in development

HTMLJunior~2 min read

Semantic tags are HTML elements that describe the meaning of the content, not its appearance. They help browsers, search engines, and users understand the structure and significance of the parts of a page.

1. `<header>` - the header of a page or section

Used for titles, a logo, navigation, and contact information. It can appear at the start of the whole page or inside an article.

html

<header>
  <h1>My blog</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Contacts</a>
  </nav>
</header>

Marks a section with links used to move around the site.

html

<nav>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contacts</a>
</nav>

3. `<main>` - the main content of the page

Contains the reason the user opened the page: articles, products, posts and so on. A page should have only one <main>.

html

<main>
  <article>...</article>
</main>

4. `<article>` - a standalone block of content

Usually used for news, posts, comments: anything that can exist on its own.

html

<article>
  <h2>How to start learning HTML</h2>
  <p>HTML is the foundation of any site...</p>
</article>

5. `<section>` - a meaningful section of the page

Groups elements related by topic inside a page or an article.

html

<section>
  <h2>Customer reviews</h2>
  <p>"Great work!"</p>
</section>

6. `<aside>` - additional information

Used for sidebars, ad blocks, links, and notes.

html

<aside>
  <h3>Popular articles</h3>
  <ul>
    <li><a href="#">CSS basics</a></li>
  </ul>
</aside>

7. `<footer>` - the footer of a page or section

Used to place copyright, contacts, links to social media and so on.

html

<footer>
  <p>© 2025 My site</p>
</footer>

8. `<figure>` and `<figcaption>` - an image and a caption

Let you add a meaningful caption to an illustration.

html

<figure>
  <img src="photo.jpg" alt="Mountain view">
  <figcaption>Sunset over the Alps</figcaption>
</figure>

9. `<mark>`, `<time>`, `<address>` - contextual tags

<mark> highlights an important fragment of text;
<time> indicates a date or time;
<address> holds contact details.

html

<p>The meeting will take place on <time datetime="2025-10-20">October 20</time>.</p>

Summary:

Tag	Purpose
`<header>`	The header of a page or section
`<nav>`	Navigation
`<main>`	The main content
`<article>`	A standalone article or block
`<section>`	A thematic section
`<aside>`	Additional information
`<footer>`	The footer
`<figure>`, `<figcaption>`	An image and a caption
`<mark>`, `<time>`, `<address>`	Contextual, meaningful elements

Semantic tags make HTML understandable, logical, and convenient: for the user, for search engines, and for the site's future development.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.