HTML Semantics
Elements possessing a meaning are called HTML semantic elements.
What are Semantic Elements?
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.
Semantic Elements in HTML
To denote navigation, header, and footer, many websites use HTML code such as <div id=”nav”> <div class=”header”> <div id=”footer”>.
Certain semantic components in HTML can be used to define various sections of a web page:Â
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML < section > Element
A document’s segment is defined via the <section> element.
“A section is a thematic grouping of content, typically with a heading,” states the HTML documentation published by W3C.
Instances in which one may employ a <section> element include:
- Chapters
- Introduction
- News items
- Contact information
A web page could normally be split into sections for introduction, content, and contact information.
Example
Two sections in a document:
<section>
<h1>WWF</h1>
<p>Formerly known as the World Wildlife Fund, the World Wide Fund for Nature (WWF) is an international organization that works on issues pertaining to environmental protection, research, and restoration. 1961 saw the founding of WWF.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The panda has come to represent the WWF. In the year that WWF was founded, Chi Chi, a panda from the Beijing Zoo, was moved to the London Zoo, where it became the inspiration for the organization's iconic panda logo.</p>
</section>
HTML < article > Element
Independent, self-contained material is specified via the <article> element.
An article need to make sense on its own and be able to be distributed apart from the website’s other content.
Examples of use for the <article> element include:
- Forum posts
- Blog posts
- User comments
- Product cards
- Newspaper articles
Example
Three articles with independent, self-contained content:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
Example 2
Use CSS to style the <article> element:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Nesting < article > in < section > or Vice Versa?
Independent, self-contained material is specified via the <article> element.
A document’s segment is defined via the <section> element.
Can we determine how to nest those elements using the definitions? No, we are unable to!
So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
HTML < header > Element
A collection of navigational links or introductory content can be contained within the <header> element.
Typically, a <header> element includes:
- one or more components of the header (<h1>–<h6>)
- logo or icon
- Authorization details
Note: An HTML page may contain multiple <header> elements. Having said that, <header> cannot be nested inside <address>, <footer>, or another <header> element.
Example
A header for an <article>:Â
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML < footer > Element
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
You can have several <footer> elements in one document.
Example
A footer section in a document:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
HTML < nav > Element
A set of navigation links is defined by the <nav> element.
Example
A set of navigation links:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML < aside > Element
Aside from the text it is positioned in (such as a sidebar), the <aside> element defines some material.
The content <aside> ought to have an indirect connection to the content that surrounds it.
Example
Display some content aside from the content it is placed in:
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
Example 2
Use CSS to style the <aside> element:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Rome center this summer. The weather was nice, and Rome was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Rome center this summer. The weather was nice, and Rome was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Rome center this summer. The weather was nice, and Rome was amazing! I had a great summer together with my family!</p>
</body>
</html>
HTML < figure > and < figcaption > Elements
Self-contained material, such as pictures, code listings, diagrams, and illustrations, is specified using the <figure> element.
A <figure> element’s caption is specified using the <figcaption> tag. It is possible to arrange the <figcaption> element as the first or last child of a <figure> element.
The actual image or illustration is defined by the <img> element.
Example
<figure>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Rome" title="Html Semantics 3" data-lazy-src="pic_rome.jpg"><noscript><img decoding="async" src="pic_rome.jpg" alt="Rome" title="Html Semantics 3"></noscript>
<figcaption>Fig1. - Rome, Puglia, Italy.</figcaption>
</figure>
Why Semantic Elements?
As stated by the CODINGASK: “A semantic Web allows data to be shared and reused across applications, enterprises, and communities.”
Semantic Elements in HTML
Below is a list of some of the semantic elements in HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <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 |
