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.
HTML5 semantic elements are supported in all modern browsers.