Back to: HTML Tutorials
HTML Semantic Elements with Examples
In this article, I am going to discuss HTML Semantic Elements with Examples. Please read our previous article where we discussed Header Elements in HTML with Examples. At the end of this article, you will learn everything about HTML Semantic Elements with Examples.
HTML Semantic Elements
In simple words, semantic elements mean elements with meaning. A semantic element defines the type of content to be present in it. For example, consider the footer element, we all know that in every website footer we get the same type of information like navigation links, social links, company info, etc. A semantic element defines its meaning accurately to both the browser and the developer.
- Non-semantic elements: <div> and <span> – Tells nothing about its content.
- Semantic elements: <form>, <table>, and <article> – Clearly defines its content.
HTML <section> Element
The <section> element is used to add section in an HTML document. Sections are used as a container to store different elements together. In the example below we have created two sections that contain one heading and one paragraph.
<!DOCTYPE html>
<html>
<style>
body{
padding:2% 4%;}
</style>
<body>
<section>
<h1>Ferrari</h1>
<p>Ferrari S.p.A. is an Italian luxury sports car manufacturer based in Maranello, Italy. Founded by Enzo Ferrari in 1939 out of the Alfa Romeo race division as Auto Avio Costruzioni, the company built its first car in 1940, and produced its first Ferrari-badged car in 1947.</p>
</section>
<section>
<h1>Bugatti</h1>
<p>Automobiles Ettore Bugatti was a German then French car manufacturer of high-performance automobiles, founded in 1909 in the then-German city of Molsheim, Alsace by the Italian-born industrial designer Ettore Bugatti. The cars were known for their design beauty and for their many race victories.</p>
</section>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML <article> Element
The <article> element is used to define articles in Html document. The content within the article> tag is independent of the rest of the site’s content. Articles can be used to create blog posts, product cards, news articles, etc. In the example below we have created a sample product card using the article.
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
padding:2% 4%;
height:100vh;
}
article{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin:15px;
padding:10px;
border:3px solid #dedede;
}
</style>
<body>
<article>
<img src="https://m.media-amazon.com/images/I/61uIgwiP90S._AC_UY218_.jpg">
<h4>iQOO Z3 5G </h4>
</article>
<article>
<img src="https://m.media-amazon.com/images/I/71r69Y7BSeL._AC_UY218_.jpg">
<h4>Samsung Galaxy M12 </h4>
</article>
<article>
<img src="https://m.media-amazon.com/images/I/817clKAKcqL._AC_UY218_.jpg" >
<h4>Redmi 10 Prime </h4>
</article>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML <header> Element
The header section of web pages is created using the <header> element. The web page’s header contains the page’s introductory content, heading element, logo, or icon. The Html header element usually contains logos, icons, website names, navigation links, etc. In the example below we have created a sample header with navigation links.
<!DOCTYPE html>
<html>
<style>
/* Style the header with a grey background and some padding */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
</style>
<body>
<br>
<div class="header">
<a href="#default" class="logo">Logo</a>
<div class="header-right">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#contact">Contact</a>
</div>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML <footer> Element
The footer for a web page is defined by the HTML footer> element. It mostly comprises information about the author, copyright, and other references. In the example below we have created a sample footer element with navigation links.
<!DOCTYPE html>
<html>
<style>
ul {
display:flex;
flex-direction:column;
justify-content:center;
margin: 0;
padding: 0;
background-color: slateblue;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:arial;
}
li a:hover:not(.active) {
background-color: hotpink;
}
</style>
<body>
<br>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML <nav> Element
The major block of navigation links is contained within the <nav> element. It can include links to the same page as well as links to different pages. In the example below we have created a sample nav element.
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: hotpink;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:arial;
}
li a:hover:not(.active) {
background-color: dodgerblue;
}
.active {
background-color: #141414;
}
</style>
<body>
<br>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML <aside> Element
The aside> element is used to explain the main objective of the web page in a more concise way. The <aside> element is generally used to include author information, links, related content, and so on.
<!DOCTYPE html>
<html>
<body>
<style>
body{
background-color:lightpink;}
</style>
<br>
<html>
<body>
<h1>Dot Net Tutorials</h1>
<aside>
<h3>This is heading inside an aside Tag</h3>
<p>This is paragraph inside an aside Tag</p>
</aside>
</body>
</html>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML <figure> and <figcaption> Elements
The figure element is used as a container for different images, diagrams, illustrations, etc. The figcaption element is used to define a caption for a figure element. We can insert the figcaption element at the beginning or end of the figure element. In the example below we have used figcaption to give a caption to an image.
<!DOCTYPE html> <html> <body> <br> <figure> <img src="https://cdn.pixabay.com/photo/2021/11/01/08/39/petit-minou-lighthouse-6759731_960_720.jpg" alt="Trulli" style="width:100%"> <figcaption> Petit Minou Lighthouse </figcaption> </figure> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss HTML Responsive Web Design with Examples. Here, in this article, I try to explain Semantic Elements in HTML with Examples and I hope you enjoy this HTML Semantic Elements with Examples article.