HTML Semantic Elements and Semantic Tags
Free Web development courses with real-time projects Start Now!!
HTML tags are of two types – semantic tags and non-semantic tags. Typically, semantic refers to the meaning of a particular piece of code. In HTML5, a semantic tag defines the meaning of the code to the developer, user and the browser. Semantic tags clearly define the content surrounded by them, unlike the non-semantic tags.
Advantages of HTML Semantic Elements
1. Readability- The block of code becomes easier to read by the use of semantic elements. The semantic elements easily group similar elements together.
2. Accessibility- Semantic elements provide greater accessibility to assistive technologies like screen-readers and also to developers.
3. Consistent coding- With the use of semantic elements, one can easily get hold of consistent coding since the overall view of the web-page is defined by these elements.
4. Reusability- An HTML document created using semantic elements can be easily shared and reused across various developers and enterprises.
HTML Semantic Tags
Below are the semantic tags in HTML which we often use:
1. <section>
This element defines a section within an HTML document. It groups similar content together with a heading.
Syntax-
<section></section>
<!DOCTYPE html> <html> <body> <section> <h1>DataFlair</h1> <p>Walking with the crowd is good. But performing outstanding in the crowd is what makes you different. This is what DataFlair aims to make its students. We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p> </section> </body> </html>
Output-
2. <article>
We can specify independent and self-contained content using the <article> element. An article is distributed solely as opposed to the rest of the website and has its unique significance. It can be used for creating forums, blogs, and newspaper editorials.
Syntax-
<article></article>
For Example
<!DOCTYPE html> <html> <body> <h1>Welcome to DataFlair!</h1> <article> <h2>About Us</h2> <p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p> </article> <article> <h2>Vision</h2> <p>To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.</p> </article> <article> <h2>Mission</h2> <p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24×7 support, live project, resume and interview preparation and ready to work level learning. </p> </article> </body> </html>
Output-
Use of CSS
We can use CSS styling to explicitly style the article element.
<!DOCTYPE html>
<html>
<head>
<style>
.DataFlair {
margin: 0;
padding: 5px;
background-color: #ffcccc;
}
.DataFlair > h1, .df {
margin: 10px;
padding: 5px;
}
.df {
background: white;
}
.df > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="DataFlair">
<h1>Welcome to DataFlair!</h1>
<article class="df">
<h2>About Us</h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</article>
<article class="df">
<h2>Vision</h2>
<p>To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.</p>
</article>
<article class="df">
<h2>Mission</h2>
<p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24×7 support, live project, resume and interview preparation and ready to work level learning. </p>
</article>
</article>
</body>
</html>
Output-
Nesting of <article> and <section> Elements in HTML
It is possible to nest section elements in article elements and vice-versa. As per the definition, article elements are self-contained, and section elements define a particular section, but this does not affect their nesting in an HTML document.
1. HTML <header> element
We can display the introductory content or navigational links as a container, using the <header> element. It contains the logo of a particular brand or website, the title or heading of the web-page, and information related to the ownership of the website.
A single HTML document can have multiple <header> elements but we cannot place a <header> element in a <footer> or <address> element.
Syntax-
<header></header>
For Example
<!DOCTYPE html> <html> <head> </head> <body> <article class="DataFlair"> <header> <h1>Welcome to DataFlair!</h1> </header> <article class="df"> <h2>About Us</h2> <p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p> </article> </article> </body> </html>
Output-
2. HTML <footer> element
The footer of an HTML document is defined by the <footer> element. It contains information such as copyright, contact, related documents, sitemap, etc.
An HTML document can have multiple footer elements.
Syntax-
<footer></footer>
For Example
<!DOCTYPE html> <html> <body> <footer> <p>Posted by DataFlair</p> <p>Contact information: <a href="mailto:[email protected]"> https://data-flair.training/</a>.</p> </footer> </body> </html>
Output-
3. HTML <nav> element
The <nav> element contains the set of major links related to an HTML document. It is not necessary for all the links to be a part of the <nav> elements.
Syntax-
<nav></nav>
For Example
<!DOCTYPE html> <html> <body> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">PhP</a> | <a href="#">XML</a> </nav> </body> </html>
Output-
4. HTML <aside> element
The <aside> element contains information that may not be directly related to the web-content but is relevant to the overall website.
It can also be styled using CSS.
Syntax-
<aside></aside>
For Example
<!DOCTYPE html>
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: #ffcccc;
}
</style>
</head>
<body>
<p>I visited the Central Park this morning. The weather was nice, and it was amazing. I had a great time with my family!</p>
<aside>
<p>The Central Park is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>I visited the Central Park this morning. The weather was nice, and it was amazing. I had a great time with my family!</p>
<p>I visited the Central Park this morning. The weather was nice, and it was amazing. I had a great time with my family!</p>
</body>
</html>
Output-
5. HTML <figure> and <figcaption> elements
The <figure> caption is a self-contained element that contains illustrations, images, diagrams, etc. The caption for the element in the <figure> element is given by <figcaption>.
The <figcaption> element can be the first or last child of the <figure> element depending on the display preference.
Syntax-
<figure><figcaption></figcaption</figure>
For Example
<!DOCTYPE html> <html> <body> <h2>Scenery</h2> <p>Here is a landscape</p> <figure> <img src="images/landscape.jpg" alt="landscape" style="width:75%"> <figcaption>Fig.1.</figcaption> </figure> </body> </html>
Output-
The other semantic elements that have been discussed before are <main>, <details>, <mark>, <summary> and <time>.
Examples of non-semantic elements are <div> and <span>. We can also use syntax such as <div id= “header”>, <div id= “nav”>, <div id= “footer”> to create such elements.
Summary
In this article, we’ve looked at the HTML semantic elements. Semantic elements provide a better meaning or semantic to the web-page. These elements also provide better readability, reusability, accessibility, and consistent coding. The elements that have been discussed are <section>,<article>, <header>, <footer>, <aside>, <figure> and <figcaption>.
If you are Happy with DataFlair, do not forget to make us happy with your positive feedback on Google
