Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning 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 content.
HTML5 semantic elements are supported in all modern browsers.
In addition, you can "teach" older browsers how to handle "unknown elements".
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:
The <section> element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."
A home page could normally be split into sections for introduction, content, and contact information.
<p>The World Wide Fund for Nature (WWF) is....</p>
The <img> element defines the image, the <figcaption> element defines the caption.
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."
Below is an alphabetical list of the new semantic elements in HTML5.
|<article>||Defines an article|
|<aside>||Defines content aside from the page content|
|<details>||Defines additional details that the user can view or hide|
|<figcaption>||Defines a caption for a <figure> element|
|<figure>||Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.|
|<footer>||Defines a footer for a document or section|
|<header>||Specifies a header for a document or section|
|<main>||Specifies the main content of a document|
|<mark>||Defines marked/highlighted text|
|<nav>||Defines navigation links|
|<section>||Defines a section in a document|
|<summary>||Defines a visible heading for a <details> element|
|<time>||Defines a date/time|