Skip to main content

Command Palette

Search for a command to run...

Semantic HTML

Updated
•2 min read•View as Markdown
Semantic HTML

The word semantic relates to meaning. Semantic HTML simply means meaningful Markup. It helps tells the purpose an HTML element serves. It describes the meaning of an element to both developers as well as the browser.

Before HTML5, developers had to use attributes such as id and class to describe the purpose of an element but with HTML5, many tags were introduced which give an element a semantic meaning

<div class="header">This is the header section</div>
<div id="nav">Page Navigation links</div>

What is HTML5?

HTML5 is neither a new application that one needs to download from the internet nor is it some set of new programming languages for HTML5.

HTML5 is simply the latest evolution of the current living standard that describes how HTML should work. It includes new features and elements that gives meaningful content to a web page. It is managed by Web Hypertext Application Technology Working Group**(WHATWG)** html.spec.whatwg.org

Advantages of HTML

  • It helps promotes accessibility

  • Provides support for both video and audio

  • Gives meaning to HTML element

  • Gives structure to a webpage

  • It helps influence SEO page ranking

  • Helps screen readers to navigate pages easily

What is Semantic element?

Semantic element is the elements that give meaning to both the browser as well as the developers. It is part of the HTML5 features. Semantic elements include the following

  • main

  • header

  • footer

  • section

  • article

  • nav

  • aside

  • figcaption

  • figure

  • details

  • address

  • summary

  • time