HTML5 semantic elements provide meaningful tags that clearly describe their purpose, improving readability, accessibility, and SEO for both humans and browsers.
Examples include <form>, <table>, <article>, <header>, and <footer>.
Here are some of the fundamental HTML5 semantic elements that you should use to structure your web content:
<article> TagThe <article> tag is used for content that stands alone and can be independently distributed or reused, such as a blog post or news article.
<!DOCTYPE html>
<html>
<head>
<title>Article Tag</title>
<style>
h1 {
font-family: 'Segoe UI', Verdana, sans-serif;
color: #333333;
font-size: 36px;
font-weight: normal;
line-height: 1.2;
text-align: left;
}
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
margin-top: 0;
}
</style>
</head>
<body>
<article>
<h1>IntricateDevo</h1>
<p>A Computer Science portal for coders. It contains well written, well thought, and well explained computer science and programming articles.</p>
</article>
</body>
</html>
<aside> TagThe <aside> tag is used to place content in a sidebar (i.e., aside from the existing content). It is typically related to the surrounding content.
<!DOCTYPE html>
<html>
<head>
<title>Aside Tag</title>
<style>
h4 {
font-family: 'Segoe UI', Verdana, sans-serif;
color: #333333;
font-size: 17px;
font-weight: normal;
line-height: 1.2;
text-align: left;
margin-bottom: 0px;
}
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
margin-top: 0px;
}
</style>
</head>
<body>
<p>IntricateDevo is a Computer Science Portal</p>
<aside>
<h4>IntricateDevo</h4>
<p>IntricateDevo is a computer science platform where you can learn good programming.</p>
</aside>
</body>
</html>
The <details> tag defines additional details that the user can hide or view. The <summary> tag defines a visible heading for a <details> element that users can click to toggle the visibility of the content.
<!DOCTYPE html>
<html>
<head>
<title>Detail and Summary Tag</title>
<style>
.title-text {
font-family: 'Segoe UI', Verdana, sans-serif;
color: #333333;
font-size: 21px;
font-weight: normal;
line-height: 1.2;
text-align: left;
margin-bottom: 0px;
cursor: pointer;
}
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
margin-top: 0px;
}
</style>
</head>
<body>
<details>
<summary class="title-text">
IntricateDevo
</summary>
<p>IntricateDevo is a Computer Science portal where you can learn good programming.</p>
</details>
</body>
</html>
The <figure> and <figcaption> tags are used together in HTML to display an image (or illustration) with a descriptive caption.
<!DOCTYPE html>
<html>
<head>
<title>Figcaption Tag</title>
<style>
h2 {
font-family: 'Segoe UI', Verdana, sans-serif;
color: #333333;
font-size: 26px;
font-weight: normal;
line-height: 1.2;
text-align: left;
margin-bottom: 0px;
}
</style>
</head>
<body>
<h2>IntricateDevo</h2>
<figure>
<img src="/images/intricate.png" alt="IntricateDevo Logo" style="width:20%">
<figcaption style="font-size: 13px; font-family: 'Segoe UI', Verdana, sans-serif;">
IntricateDevo Logo
</figcaption>
</figure>
</body>
</html>
<header> TagAs the name suggests, it is for the header of a section or an introductory piece of a page. There can be multiple headers on a single page.
<!DOCTYPE html>
<html>
<head>
<title>Header Tag</title>
<style>
h1, h3 {
text-align: left;
margin-bottom: 0px;
}
h1 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 36px;
font-weight: normal;
line-height: 1.2;
}
h3 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 21px;
font-weight: normal;
line-height: 1.2;
}
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
margin-top: 0px;
}
</style>
</head>
<body>
<article>
<header>
<h1>IntricateDevo</h1>
<h3>Platform Overview</h3>
<p>A computer science portal</p>
</header>
</article>
</body>
</html>
<footer> TagThe footer is located at the bottom of any article or document. It can contain contact details, copyright information, etc. There can be multiple footers on a single page.
<!DOCTYPE html>
<html>
<head>
<title>Footer Tag</title>
<style>
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
margin-top: 0px;
}
</style>
</head>
<body>
<footer>
<p>Posted by: IntricateDevo</p>
<p>
Contact:
<a href="https://www.intricatedevo.com/">
intricatedevo.com
</a>.
</p>
</footer>
</body>
</html>
<main> TagIt defines the main content of the document. The content inside the main tag should be unique to the document and should not contain content that is repeated across documents like sidebars, navigation links, copyright information, etc.
<!DOCTYPE html>
<html>
<head>
<title>Main Tag</title>
<style>
h1 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 36px;
font-weight: normal;
line-height: 1.2;
color: #333333;
}
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
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 the United States of America.</p>
</article>
</main>
</body>
</html>
<section> TagA page can be split into sections like Introduction, Contact Information, Details, etc., and each of these parts can be wrapped in a different <section> tag.
<!DOCTYPE html>
<html>
<head>
<title>Section Tag</title>
<style>
h1 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 36px;
font-weight: normal;
line-height: 1.2;
color: #333333;
}
p {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 17px;
line-height: 1.5;
text-align: left;
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>
<nav> TagThe <nav> tag 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 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 36px;
font-weight: normal;
line-height: 1.2;
color: #333333;
}
</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>
<mark> TagThe <mark> tag is used to highlight or mark specific text for reference or notation purposes.
<!DOCTYPE html>
<html>
<head>
<title>Mark Tag</title>
<style>
h1 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 36px;
font-weight: normal;
line-height: 1.2;
color: #333333;
}
</style>
</head>
<body>
<h1>Mark Tag Example</h1>
<p>
IntricateDevo is a
<mark>Computer Science</mark>
portal
</p>
</body>
</html>
<div>: Use semantic elements where appropriate instead of non-semantic <div> elements to provide more specific information about the content structure.Which HTML5 semantic element is typically used to represent a standalone, independently distributable piece of content?