HTML5 Semantic Elements
HTML5 Semantic Elements
HTML5 Semantic elements can convey its meaning to both the browser and web developer. Some well-known non-semantic elements are <div> and <span>.
On the other hand, some widely used semantic elements are <figcaption>, <article>, <aside>, <form>, <header>, and <footer>.
What Does It Mean by Semantic Elements?
Many web developers use HTML code like <div id=”header”> <div id=”nav”> <div id=”footer”> to represent header, navigation, and footer.
But with the recent developments in HTML, HTML5 semantic elements can represent different parts of the webpage.
Without any further ado, let’s explore some common HTML5 semantic elements.
HTML5 <section> Element
HTML5 <section> element defines a section within a document. According to the W3C’s official documentation: “A section is used to organize content and makes it visually attractive.”
<section> element can be used to display:
- Contact information
- News items
- Chapters
- Introduction
Generally, a webpage is categorized into introductory content, main content, and contact information.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Semantic Elements </title>
</head>
<body>
<section>
<h1> HTML5 -language of the web </h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed voluptas, temporibus animi, iusto soluta
explicabo ipsum in molestiae fugiat deserunt, mollitia delectus dolorum dolor laboriosam. Delectus
exercitationem vel quaerat iste.
</p>
</section>
<section>
<h1> Meeting "HT" in HTML</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores inventore officia placeat provident,
laudantium fuga quo modi dignissimos expedita deserunt, iure minus accusamus temporibus cumque nulla
eligendi totam. Fugit, voluptatum.
</p>
</section>
</body>
</html>
The output of this code will be
HTML5 <article> Element
<article> element encloses independent and self-contained content. It is worth mentioning here that he content inside <article> element should be distinguishable from the rest of the content.
HTML5 <article> element can be used to display:
- Blog posts
- Forum posts
- Newspaper articles
- Product cards
- User comments
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Semantic Elements </title>
</head>
<body>
<article>
<h2> Webpage Constuction </h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, id omnis suscipit, libero aspernatur
velit dignissimos temporibus fugit minus voluptate, natus nesciunt in. Quod veritatis atque porro! Dolorem,
alias cupiditate?
</p>
</article>
<article>
<h2>A trip to Webvile</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit veritatis dignissimos aliquam quo deserunt
molestias atque earum sunt nostrum quasi suscipit quibusdam ullam quisquam culpa vero dolorem, beatae
incidunt perspiciatis?
</p>
</article>
<article>
<h2>Adding Images to webpage</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque aliquam beatae, quibusdam asperiores
voluptate corporis earum perferendis provident qui possimus distinctio quidem voluptates ipsam, odit dolores
ipsum commodi sint quis?
</p>
</article>
</body>
</html>
The output of this code will be
Nesting HTML5 Semantic Elements
The <article> element displays independent and self-contained content. The <section> element specifies a faction of a content.
Therein the question arises. Can we use the definitions to decide which element to nest inside another? The answer is not.
For this reason, you might have across many web pages wherein <article> element is nested in <section> element or vice versa.
HTML5 <header> Element
The <header> acts as a container in our HTML document for introductory content or a set of navigational links.
The <header> element comprises:
- Logo or icon
- One or more heading element
- Author information
You can place on <header> element inside the HTML document. However, <header> cannot be nested in <footer>, <header> or <address> element.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Semantic Elements </title>
</head>
<body>
<article>
<header>
<h1> Serious HTML</h1>
<p> What else to know about HTML</p>
</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis accusamus nostrum rerum culpa dolorem
debitis laudantium enim repellat sit, totam animi nemo, aspernatur autem necessitatibus inventore earum nam
maxime ipsum.
</p>
</article>
<article>
<header>
<h1> Adding a Little Style</h1>
<p> CSS decorates your HTML elements </p>
</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat consequatur quibusdam dolor explicabo sunt
aut. Eos hic provident id nemo laudantium sequi labore quisquam, fugit, dolor maiores dolorem molestiae
nisi.
</p>
</article>
</body>
</html>
The output of this code will be
HTML <footer> Element
<footer> element specifies footer for a section of a document.
We can place the following type of content inside the <footer> element:
- Copyright information
- Sitemap
- Back to top links
- Contact information
- Author information
HTML5 allows you to embed many <footer> element in one document.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Semantic Elements </title>
</head>
<body>
<footer>
<p> Author: Vinay singh</p>
<p> <a href="https://www.vishacademy.com"> Vish Academy</a> </p>
</footer>
</body>
</html>
The output of this code will be
HTML5 <nav> Element
HTML <nav> comprises a set of navigational links.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Semantic Elements </title>
</head>
<body>
<nav>
<nav>
<a href="https://www.vishacademy.com/HTML">HTML5</a>
<a href="https://www.vishacademy.com/CSS">CSS</a>
<a href="https://www.vishacademy.com/JAVASCRIPT">JAVASCRIPT</a>
<a href="https://www.vishacademy.com/ES6">ES6</a>
<a href="https://www.vishacademy.com/C">C</a>
<a href="https://www.vishacademy.com/C++">C++</a>
</nav>
</nav>
</body>
</html>
The Output of this code will be
HTML <aside> Element
HTML <aside> element highlights content like the sidebar. The content enclosed in the <aside> element should have an indirect link with the surrounding content.
Example
<!DOCTYPE html>
<html>
<head>
<style>
aside {
width: 60%;
padding-left: 45px;
float: right;
font-style: sans-serif;
background-color: salmon;
margin-left: 25px;
}
</style>
<title> HTML5 Semantic Elements </title>
</head>
<body>
<p>
Your CSS language lessons are coming along nicely. You
already have the basics of CSS down, and you know how to create CSS rules to
select and specify the style of an element
</p>
<aside>
<h4>Expanding Your Vocabulary</h4>
<p>
Now it’s time to build your vocabulary,
and that means picking up some new properties and learning what they can do
for you. In this chapter, we’re going to work through some of the most common
properties that affect the display of text
</p>
</aside>
</body>
</html>
The output of this code will be
HTML <figure> and <figcaption> Element
<figure> element displays self-contained content like picture, illustrations, and code.
On the other hand, <figcaption> element specifies caption for the figure. The <figcaption> element is normally nested in the <figure> element.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Semantic Elements </title>
<style>
img {
width: 30%;
}
figcaption {
font-weight: bold;
font-size: x-large;
}
</style>
</head>
<body>
<figure>
<img src="web development.jpg" alt="web development">
<figcaption> Kunway Vinay singh, New Delhi | India </figcaption>
</figure>
</body>
</html>
The output of this code will be
Why Should We Use HTML5 Semantic Elements?
According to the official documentation of W3C, “Semantic elements allow us to share data across applications, enterprises, and communities.”
To know more about semantic elements, read our form tutorials.
