Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements:
<span> – Tells nothing about its content.
Examples of semantic elements:
<article> – Clearly defines its content.
New Semantic Elements in HTML5
Many web sites contain HTML code like:
<div id=”nav”> <div class=”header”> <div id=”footer”>
to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page:
Why Semantic Elements?
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.
With the new HTML5 elements (
<header> <footer> <nav> <section> <article>), this
will become easier.
According to the W3C, a Semantic Web: “Allows data to be shared and reused across applications, enterprises, and communities.”