HTML5 Semantics

The HTML5 Semantics refers to the semantic tags that provide meaning to an HTML page. In HTML5 the tags are divided into two categories - semantic and non-semantic. HTML5 brings several new semantic tags to the HTML.

Some HTML5 Semantic tags are −

figureIt specifies an image with different formats.
articleIt specifies an independent self-containing article.
navIt specifies a container for navigation links.
asideIt specifies a tag for content aside from main content (like a sidebar).
sectionIt represents a section in a document.
detailsIt specifies a tag for additional details.
headerIt specifies a header for a section or for a document.
footerIt specifies a footer for a section or for a document
figcaptionIt specifies a small description for an image on an HTML document.
mainIt specifies the main content of the page and it should be unique.
summaryIt specifies a header for the <details> element.
markIt specifies highlighted text.

Let us see an example of HTML5 Semantics −


 Live Demo

<!DOCTYPE html>
   * {
      box-sizing: border-box;
   body {
      color: #000;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   header {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   nav {
      float: left;
      width: 20%;
      height: 200px;
      background: #282828;
      padding: 60px 10px;
   nav ul {
      list-style-type: none;
      padding: 0;
   nav ul li a {
      text-decoration: none;
      color: #fff;
   article {
      float: left;
      padding: 80px 10px;
      width: 80%;
      background-color: #fff;
      height: 200px;
      text-align: center;
   section:after {
      content: "";
      display: table;
      clear: both;
   footer {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<article>This is an article element.</article>
<footer>This is Footer</footer>


Updated on: 01-Oct-2019


Kickstart Your Career

Get certified by completing the course

Get Started