HTML5 Semantic Elements

Introduction

What are Semantic Elements?

A semantic element clearly describes its meanings to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table> and <article> - Clearly defines its context.

Why Semantic Elements?

According to the W3C, a Semantic Web: "Allows data to be shared and reused across applications, enterprises, and communities."

With HTML4, developers used their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container,content, article, sidebar, topnav, etc. This made it impossible for search engines to identify the correct web page content.

Browser Support

HTML5 semantic elements are supported in all modern browsers.