10 HTML Semantic Tags and When To Use Them

Everything you need from the section tag to the header tag

Photo by Pankaj Patel on Unsplash.

One thing that developers who don’t know better often shove aside is semantics in HTML. Semantics is one of the most important features of HTML5 and should be mastered by any web developer.

The most popular video on my YouTube channel is “When to use Section vs Article vs Div in Html?” and it made me realize how many developers out there are trying to understand the meaning behind these tags as they enter the web development industry. Because of that, I decided to put it all in one article in simple words.

1. section

The section tag groups content of a part of the page (document) that makes sense together and must almost always have a heading (a title). The section is like a slice of a pie if the page is the pie. All the sections and parts of the page together help the page make sense, the content of the section makes sense together, and the section itself helps the page make sense as a whole.

There are many other tags that group part of the page, like the nav, article, and aside tags. The section tag should be used if there is no other, more specific semantic tag available.

<section>
  <h2>Welcome to the Before Semicolon</h2>
  <p>Millions of people rely on this space to save and discover the best articles, stories and videos on the web.</p>
  <img src="path/to/some/hero/image" alt="img description"/>
</section>

A section should appear in the outline of the document and can be used for things like search results, page hero, group post categories, etc. If you use the section tag without a title, it won't appear in the outline. Besides, a titled section is good for SEO and accessibility. Untitled sections are common in web applications rather than websites, and in case you want the section to appear in the document outline and not be visible to the user, you can make the title hidden.

<section class="secondary-menu">
  <h2 class="hidden">Controls</h2>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

2. article