Semantic elements are HTML elements that carry inherent meaning or convey a specific purpose within the structure of a web page.
Semantic elements provide clear meaning to both browsers and developers about the content they contain.
For instance, while non-semantic elements like <div> and <span> lack inherent meaning about their content, semantic elements such as <form>, <table>, and <article> clearly define the type and purpose of their content.
Numerous websites utilize HTML code such as <div id="nav">, <div class="header">, and <div id="footer"> to designate navigation, header, and footer sections.
HTML offers semantic elements specifically designed to delineate various components of a webpage.
The <section> element in HTML defines a distinct portion of content within a document.
As per W3C’s HTML documentation, a section represents a cohesive grouping of content, usually accompanied by a heading.
Instances where the <section> element finds application include:
For instance, a webpage might logically segment into sections for introduction, main content, and contact details.
Example
Two segments within a document:
| <section> <h1>WWF</h1> <p>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.</p> </section> <section> <h1>WWF’s Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section> |
The <article> element denotes content that is standalone and self-contained.
An article should be comprehensible independently and capable of distribution apart from the surrounding website.
Instances where the <article> element is suitable include:
Example
Three pieces of content, each self-contained and independent:
| <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
Utilize CSS for styling the <article> element:
| <html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; } .all-browsers > h1, .browser { .browser { .browser > h2, p { </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> </body> </html> |
Although the <article> element denotes self-contained content, and the <section> element defines sections within a document, their definitions don’t dictate how they should be nested.
Therefore, it’s common to encounter HTML pages where <section> elements contain <article> elements, and vice versa.
The <header> element serves as a container for introductory content or a collection of navigational links.
Typically, a <header> element includes:
Note: It’s possible to have multiple <header> elements within a single HTML document. However, a <header> element cannot be nested within a <footer>, <address>, or another <header> element.
Example
An introductory section 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> |
The <footer> element delineates a footer for a document or a specific section.
A <footer> element commonly includes:
Multiple <footer> elements can exist within a single document.
Example
A section at the bottom of a document:
| <footer> <p>Author: Hege Refsnes</p> <p><a href=”mailto:[email protected]”>[email protected]</a></p> </footer> |
The <nav> element specifies a collection of navigation links.
|
Notably, not all links within a document should reside within a <nav> element. The <nav> element is specifically designed for significant sets of navigation links. Browsers, including screen readers utilized by individuals with disabilities, utilize this element to decide whether to prioritize rendering this content initially. |
Example
A collection of links for navigation:
| <nav> <a href=”/html/”>HTML</a> | <a href=”/css/”>CSS</a> | <a href=”/js/”>JavaScript</a> | <a href=”/jquery/”>jQuery</a> </nav> |
The <aside> element specifies content that is tangentially related to the main content it accompanies, often used for elements like sidebars.
The content within <aside> should have some connection to the surrounding content but not be directly integral to it.
Example
Present content alongside but separate from the main content it accompanies:
| <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
Apply 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 Epcot center this summer. The weather was nice, and Epcot 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 Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <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> </body> </html> |
The <figure> tag denotes content that is self-contained, such as illustrations, diagrams, photos, or code listings.
The <figcaption> tag specifies a caption for a <figure> element, and it can be positioned as the first or last child within a <figure>.
The <img> element specifies the actual image or illustration.
Example
| <figure> <img src=”pic_trulli.jpg” alt=”Trulli”> <figcaption>Fig1. – Trulli, Puglia, Italy.</figcaption> </figure> |
