Semantic elements are the elements with a meaning.
What is meant by Semantic Elements?
A semantic element defines its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> – Tells nothing about the content.
Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.
Semantic Elements in HTML
Several web sites have HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.
In HTML, there are some semantic elements that are used to define different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML <section> Element
The <section> element denotes a section in a document.
Examples of where a <section> element can be used:
Chapters
Introduction
News items
Contact information
WWF
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
HTML <article> Element
The <article> element defines independent, self-contained content.
An article must have sense, and it should be possible to distribute it independently from the rest of the website.
Examples of where the <article> element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
Google Chrome
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!
Nesting <article> in <section> or Vice Versa?
The <article> element defines independent, self-contained content.
The <section> element specifies section in a document.
You can find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
HTML <header> Element
The <header> element illustrates a container for introductory content or a set of navigational links.
A <header> element consists of :
one or more heading elements (<h1> – <h6>)
logo or icon
authorship information
What Does WWF Do?
WWF's mission:
HTML <footer> Element
The <footer> element is used to define a footer for a document or section
A <footer> element consists:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
Several <footer> elements can be used in one document
HTML <nav> Element
The <nav> element denotes a set of navigation links.
HTML <aside> Element
The <aside> element describes some content aside from the content it is placed in (like a sidebar).
The <aside> content must indirectly related to the surrounding content.
HTML <figure> and <figcaption> Elements
The <figure> tag denotes self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag is used to caption a <figure> element. The <figcaption> element can be placed either as first or the last child of a <figure> element.
The <img> element denotes the actual image/illustration.