Semantic elements describe their meaning or purpose to the browser and to the developer. HTML5 has new semantically rich elements that can convey the purpose of the element to both developers and browsers. 

Earlier, developers used IDs and classes with <div> tags. Though, this conveyed meaning to the developers, but it didn't helped browsers to understand the purpose of that markup. For example

<div id="footer">

The <div> tag defines a division or a section in an HTML document. This division is for footer section of the web page. But for the browser, footer is just a name of the id. It does not have any semantic structure.

Commonly Used HTML5 Semantic Elements

  • header
  • nav
  • section
  • article
  • aside
  • footer

The <nav> element defines a menu bar or navigation links.

The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading. It can be used together with h1-h6 to indicate the document structure.

The <article> element specifies independent, self-contained content. For example, blog post or news article.

The <aside> element defines some content aside from the content that is generally placed in a sidebar.

Other HTML5 Semantic Elements

  • figure
  • figcaption
  • details
  • main
  • mark
  • summary
  • time