HTML5 Semantic Elements

HTML5 Semantic elements clearly describes its meaning to both the browser and the developer. HTML5 defines eight new Semantic elements. All these are block-level elements.

In HTML4, we have to use only one element for all page sections, i.e. div tag. Div is a non-semantic element because it does not tell anything about its content.

HTML4 Semantic elements are <form>, <table>, and <img> - Clearly defines its content.

HTML5 Semantic Element list:
HTML5 Semantic Element Description
<header> Define the Page/Section header
<footer> Define the Page/Section Footer
<aside> Defines content aside from the page content
<nav> Stands for navigation, defines the menu list.
<main> Specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not repeat on multiple documents such as sidebars, navigation links, copyright information, site logos, and search forms. Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
<section> Defines a section in a document
<article> Defines an article in a document
<figure> Defines a figure in a document

Exercise 1: HTML basic page layout using HTML5 semantic tags.