Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 Semantics
The HTML5 Semantics refers to the semantic tags that provide meaning to an HTML page. In HTML5 the tags are divided into two categories - semantic and non-semantic. HTML5 brings several new semantic tags to the HTML.
Some HTML5 Semantic tags are −
| Tags | Explanation |
|---|---|
| figure | It specifies an image with different formats. |
| article | It specifies an independent self-containing article. |
| nav | It specifies a container for navigation links. |
| aside | It specifies a tag for content aside from main content (like a sidebar). |
| section | It represents a section in a document. |
| details | It specifies a tag for additional details. |
| header | It specifies a header for a section or for a document. |
| footer | It specifies a footer for a section or for a document |
| figcaption | It specifies a small description for an image on an HTML document. |
| main | It specifies the main content of the page and it should be unique. |
| summary | It specifies a header for the <details> element. |
| mark | It specifies highlighted text. |
Let us see an example of HTML5 Semantics −
Example
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>Output
Updated on: 01-Oct-2019
498 Views
Advertisements