HTML5 Semantics
HTML5 Semantics refers to the use of specific tags like <header>, <footer>, <nav>, <article>, <section>, etc., to provide clearer structure and meaning to web content. This improves accessibility, and SEO, and facilitates better understanding by both humans and machines.
Why Do I Need to Use Semantic HTML Tags?
Using semantic HTML tags enhances website accessibility, improves search engine optimization (SEO), and provides clearer structure and meaning to content. This fosters better understanding by both users and machines, leading to improved usability and user experience.
HTML tags are classified into two types:
- Semantic
- Non-Semantic
Semantic Elements
Semantic elements have meaningful names that tell about the type of content. For example header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them.
The article Tag
It contains independent content which doesn’t require any other context blog Post, Newspaper Article, etc.
Example: The below example shows the implementation of the article Tag.
<!DOCTYPE html>
<html>
<head>
<title>Article Tag</title>
<style>
h1 {
Color:#006400;
font-size:50px;
Text-align:left;
}
p {
font-size:25px;
text-align:left;
margin-top:-40px;
}
</style>
</head>
<body>
<article>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
</article>
</body>
</html>
Output:
Aside
It is used to place content in a sidebar i.e. aside from the existing content. It is related to surrounding content.
Example: The below example shows the implementation of the aside Tag.
<!DOCTYPE html>
<html>
<head>
<title>Aside Tag</title>
<style>
h4 {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<p>GeeksforGeeks is a Computer Science Portal</p>
<aside>
<h4>GeeksForGeeks</h4>
<p>GeeksforGeeks is a computer Science platform
where you can learn good programming.
</p>
</aside>
</body>
</html>
Output:
Details and Summary
The “details” defines additional details that the user can hide or view. “summary” defines a visible heading for a “details” element.
Example: The below example shows the implementation of the Details and Summary.
<!DOCTYPE html>
<html>
<head>
<title>Detail and summary Tag</title>
<style>
.GFG {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<details>
<summary class="GFG">
GeeksforGeeks
</summary>
<p>GeeksforGeeks is a Computer Science portal
where you can learn good programming.
</p>
</details>
</body>
</html>
Output:
Figure and Figcaption
These are used to add an image to a web page with a small description.
Example: The below example shows the implementation of Figure and Figcaption.
<!DOCTYPE html>
<html>
<head>
<title>Figcaption Tag</title>
<style>
h2 {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<figure>
<img src="4.jpg"
alt="gfg"
style="width:20%">
<figcaption>
GeeksforGeeks Logo
</figcaption>
</figure>
</body>
</html>
Output:
Header
As the name suggests, it is for the header of a section introductory of a page. There can be multiple headers on a page.
Example: The below example shows the implementation of the Header.
<!DOCTYPE html>
<html>
<head>
<title>Header Tag</title>
<style>
h1, h3 {
Color:#006400;
Text-align:left;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:left;
margin-top:0px;
}
</style>
</head>
<body>
<article>
<header>
<h1>GeeksforGeeks</h1>
<h3>GeeksforGeeks</h3>
<p>A computer Science portal</p>
</header>
</article>
</body>
</html>
Output:
Footer
Footer located at the bottom of any article or document, they can contain contact details, copyright information etc. There can be multiple footers on a page.
Example: The below example shows the implementation of the Footer.
<!DOCTYPE html>
<html>
<head>
<title>footer Tag</title>
<style>
p {
font-size:25px;
text-align:left;
margin-top:0px;
}
</style>
</head>
<body>
<footer>
<p>
Posted by: GeeksforGeeks
</p>
<p>
Contact:
<a href=
"https://www.geeksforgeeks.org">
geeksforgeeks.org
</a>.
</p>
</footer>
</body>
</html>
Output:
Main
It defines the main content of the document. The content inside the main tag should be unique.
Example: The below example shows the implementation of the Main in HTML.
<!DOCTYPE html>
<html>
<head>
<title>main Tag</title>
<style>
h1 {
color:#006400;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<main>
<h1>Important Residences</h1>
<p>
A few of them are
Rashtrapati Bhavan,
White House etc
</p>
<article>
<h1>Rashtrapati Bhavan</h1>
<p>
It is the home of
the President of India.
</p>
</article>
<article>
<h1>The White House</h1>
<p>
It is the home of the
President of United
States of America.
</p>
</article>
</main>
</body>
</html>
Output:
Section
A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.
Example: The below example shows the implementation of the section Tag.
<!DOCTYPE html>
<html>
<head>
<title>section Tag</title>
<style>
h1 {
color:#006400;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<section>
<h1>Data Structure</h1>
<p>
Data Structure is a data
organization and storage
format that enables efficient
access and modification.
</p>
</section>
<section>
<h1>Algorithm</h1>
<p>
A process or set of rules to
be followed in calculations
or other problem-solving
operations, especially by
a computer.
</p>
</section>
</body>
</html>
Output:
The nav Tag
It is used to define a set of navigation links in the form of a navigation bar or nav menu.
Example: The below example shows the implementation of the nav tag.
<!DOCTYPE html>
<html>
<head>
<title>nav Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>
<body>
<h1>Navigation Bar</h1>
<nav>
<a href="/home/">
Home
</a> |
<a href="/about-us/">
About Us
</a> |
<a href="/data-structure/">
Data Structure
</a> |
<a href="/operating-system/">
Operating System
</a>
</nav>
</body>
</html>
Output:
Mark
It is used to highlight the text.
Example: The below example shows the implementation of the Mark in HTML.
<!DOCTYPE html>
<html>
<head>
<title>mark Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>
<body>
<h1>mark tag</h1>
<p>
GeeksforGeeks is a
<mark>Computer Science</mark>
portal
</p>
</body>
</html>
Output:
Non-Semantic Elements
Tags like div, and span fall under the Non-Semantic categories as their names don’t tell anything about what kind of content is present inside them.
div It is a block-level element or division of a section. It is used as a container.
Example: The below example shows the implementation of Non-Semantic Elements.
<!DOCTYPE html>
<html>
<head>
<title>div Tag</title>
<style>
.GFG {
color:#006400;
}
</style>
</head>
<body>
<h1>div Tag</h1>
<div class="GFG">
<h1>GeeksforGeeks</h1>
<p>GeeksforGeeks is a Computer Science portal</p>
</div>
</body>
</html>
Output:
span: It is an inline element that doesn’t start on a new line and takes up only the necessary width. For more details use https://www.geeksforgeeks.org/span-tag-html/.
Supported Browsers
- Google Chrome: 1
- Edge: 12
- Mozilla: 1
- Opera: 15
- Safari: 4
