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.
article:
It contains independent content which doesn’t require any other context blog Post, Newspaper Article, etc.
<!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>w3wiki</h1>
<p>A Computer Science Portal for Beginner</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.
<!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>w3wiki is a Computer Science Portal</p>
<aside>
<h4>w3wiki</h4>
<p>w3wiki is a computer Science platform
where you can learn good programming.
</p>
</aside>
</body>
</html>
Output:
Details and Summary:
“details” defines additional details that the user can hide or view. “summary” defines a visible heading for a “details” element.
<!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">
w3wiki
</summary>
<p>w3wiki 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.
<!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>w3wiki</h2>
<figure>
<img src="4.jpg"
alt="gfg"
style="width:20%">
<figcaption>
w3wiki 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.
<!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>w3wiki</h1>
<h3>w3wiki</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.
<!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: w3wiki
</p>
<p>
Contact:
<a href=
"https://www.w3wiki.net">
w3wiki.net
</a>.
</p>
</footer>
</body>
</html>
Output:the
Main:
It defines the main content of the document. The content inside the main tag should be unique.
<!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.
<!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:
nav:
It is used to define a set of navigation links in the form of a navigation bar or nav menu.
<!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.
<!DOCTYPE html>
<html>
<head>
<title>mark Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>
<body>
<h1>mark tag</h1>
<p>
w3wiki 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.
<!DOCTYPE html>
<html>
<head>
<title>div Tag</title>
<style>
.GFG {
color:#006400;
}
</style>
</head>
<body>
<h1>div Tag</h1>
<div class="GFG">
<h1>w3wiki</h1>
<p>w3wiki 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.w3wiki.net/span-tag-html/.
Supported Browsers:
- Google Chrome 1
- Edge 12
- Mozilla 1
- Opera 15
- Safari 4
Contact Us