What is Semantics ?
Something which have specific meaning to it.
What is a HTML Tag ?
HTML tag is the root of the html document which is used to specify that the document is html.
What are the types of HTML tag elements ?
HTML tags are classified in to two types.
1. Semantic elements
2. Non-Semantic elements
1. Semantic elements
Semantic elements have meaningful names which tells about type of content.
example <header>,<p>,<table> tag elements.
2. Non-Semantic elements
The element has no special meaning at all.
non-semantic elements are implemented with a class attribute to define the structure and express the meaning of content.
example <div>,<span> tags etc.
HTML5 Semantics
HTML5 provides more semantic elements which make easy understanding of the code.
HTML5 semantic elements are supported in all major browsers.
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
Why to use semantic elements?
In HTML4, developers have to specify their own id/class names to style elements, and only with that id/class names he/she can do modifications in webpage.
It is so difficult for search engines to identify the correct web page content.
Now in HTML5 have introduced Semantic elements.
HTML5 semantic elements allows to share data across the entire application.
Reusability of the code , accessibility and maintenance of the webpage is easy.
HTML5 Semantic elements also helps us to create a better website structure.
Semantic Elements in HTML5
Sno | Semantic Tag | Description |
1 | <header></header> | Specifies a header for a document or section |
2 | <nav></nav> | Defines navigation links |
3 | <section></section> | Defines a section in a document |
4 | <article></article> | Defines an article |
5 | <aside></aside> | Defines content aside from the page content |
6 | <details></details> | Defines additional details that the user can view or hide |
7 | <summary></summary> | Defines a visible heading for a <details> element |
8 | <figure></figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
9 | <figcaption></figcaption> | Defines a caption for a <figure> element |
10 | <main></main> | Specifies the main content of a document |
11 | <mark></mark> | Defines marked/highlighted text |
12 | <time></time> | Defines a date/time |
13 | <footer></footer> | Defines a footer for a document or section |
1. <header></header>
<header></header> tag is used to define a header elements for a document.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
</body>
</html>
Output :
2. <nav></nav>
<nav></nav> tag is used to define a container for navigation links
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
</body>
</html>
Output :
3. <section></section>
<section></section> tag is used to define a section in a document
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
</body>
</html>
Output :
4. <article></article>
<article></article> tag is used to define an independent self-contained article
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
</body>
</html>
Output :
5. <aside></aside>
<aside></aside> tag is used to define content aside from the content (like a sidebar)
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
</body>
</html>
Output :
6.<details></details> and <summary></summary> tag
<details></details> tag is used to define additional details that the user can view or hide
<summary></summary> tag defines a visible heading for a <details> element
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
details{
background-color: yellow;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
</body>
</html>
Output :
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
7.<figure></figure>
<figure></figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
<h2>Figure Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
</figure>
</body>
</html>
Output :
8.<figcaption></figcaption>
<figcaption></figcaption> tag defines a caption for a <figure> element
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
<h2>Figure Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
</figure>
<h2>Figure with FigCaption Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
<figcaption>HTML5 Tutorials.</figcaption>
</figure>
</body>
</html>
Output :
9.<main></main>
<main></main> tag specifies the main content of a document
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
main{
border:4px solid red;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<main>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
<h2>Figure Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
</figure>
<h2>Figure with FigCaption Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
<figcaption>HTML5 Tutorials</figcaption>
</figure>
</main>
</body>
</html>
Output :
<main></main> tag with border red color.
10.<mark></mark>
<mark></mark> tag defines marked/highlighted text
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
width: 50%;
background-color:#e6e6fa;
}
main{
width: 50%;
border:4px solid red;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<main>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
<h2>Figure Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
</figure>
<h2>Figure with FigCaption Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
<figcaption>HTML5 Tutorials</figcaption>
</figure>
<h2>Mark Element</h2>
<p>One of the greatest scientist of our nation is <mark>Abdul Kalam</mark>, He is so simpe and humble</p>
</main>
</body>
</html>
Output :
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
11.<time></time>
<time></time> tag defines a date/time
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
main{
border:4px solid red;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<main>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
<h2>Figure Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
</figure>
<h2>Figure with FigCaption Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
<figcaption>HTML5 Tutorials</figcaption>
</figure>
<h2>Mark Element</h2>
<p>One of the greatest scientist of our nation is <mark>Abdul Kalam</mark>, He is so simpe and humble</p>
<h2>Time Element</h2>
<p>Shop Opens from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have an important meeting on<time datetime="2008-02-14 20:00">Monday</time>.</p>
</main>
</body>
</html>
Output :
12. <footer></footer>
<footer></footer> tag is used to define a footer for a document or a section
Example :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
header{
background-color: orange;
height: 80px;
width: 50%;
}
nav{
background-color:brown;
width: 50%;
}
section{
background-color:#ff7f50;
width: 50%;
border: 1px solid black;
}
article{
width: 50%;
border:2px solid black;
background-color: #fff0f5;
}
aside{
background-color:#e6e6fa;
width: 50%;
}
main{
border:4px solid red;
width: 50%;
}
footer{
border:4px solid blue;
width: 50%;
}
</style>
</head>
<body>
<p>Different Layouts in HTML</p>
<header>
<p>This is the header section</p>
</header>
<nav>
<h1 style="text-align: center;">Nav section</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
<main>
<section>
<h2>HTML Section</h2>
<p>HTML Section part</p>
</section>
<article>
<h2>HTML Article</h2>
<p>HTML Article part</p>
</article>
<aside>
<h2>HTML Aside part</h2>
<p>HTML Aside part</p>
</aside>
<h2>Details Tag</h2>
<details>
<summary>CSTechbook</summary>
<p>Tutorial website for Students</p>
<div>It is a computer science programming portal where you
can learn programming.</div>
</details>
<h2>Figure Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
</figure>
<h2>Figure with FigCaption Tag</h2>
<figure>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" alt="Trulli" style="width:10%">
<figcaption>HTML5 Tutorials</figcaption>
</figure>
<h2>Mark Element</h2>
<p>One of the greatest scientist of our nation is <mark>Abdul Kalam</mark>, He is so simpe and humble</p>
<h2>Time Element</h2>
<p>Shop Opens from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have an important meeting on<time datetime="2008-02-14 20:00">Monday</time>.</p>
</main>
<footer>
<h3>HTML Footer</h3>
<p>HTML Footer part</p>
</footer>
</body>
</html>
Output :
Who cares about the semantics of site navigation? For one, people with disabilities. Why is that? Consider this scenario: your motion is limited, and using a mouse is difficult or impossible. To compensate, you might use a browser add-on that allows you to jump to (or jump past) major navigation links. Or consider this: if your sight is limited, you might use a dedicated program called a screenreader that uses text-to-speech to speak and summarize web pages. Once you get past the page title, the next important pieces of information about a page are the major navigation links. If you want to navigate quickly, you ll tell your screenreader to jump to the navigation bar and start reading. If you want to browse quickly, you might tell your screenreader to jump
Great post! We are linking to this particularly great article on our website. Keep up the good writing. Joelle Agustin Litton
Thanks a lot for your support.
Say, you got a nice blog. Really looking forward to read more. Awesome. Mathilde Kelvin Janenna
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.
Pretty! This has been an incredibly wonderful post. Thank you for supplying this info. Carey Chaim Merola
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.
Sweet site, super pattern, real clean and employ pleasant. Lillis Callean Faus
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.
I really like your blog.. very nice colors & theme. Erinna Cole Caneghem
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.