HTML5 শব্দার্থবিদ্যা বলতে সেম্যান্টিক ট্যাগগুলিকে বোঝায় যা একটি HTML পৃষ্ঠার অর্থ প্রদান করে। HTML5-এ ট্যাগ দুটি বিভাগে বিভক্ত - শব্দার্থিক এবং অ-অর্থবোধক। HTML5 HTML-এ বেশ কিছু নতুন শব্দার্থিক ট্যাগ নিয়ে আসে।
কিছু HTML5 শব্দার্থিক ট্যাগ হল −
| ট্যাগ | ব্যাখ্যা |
|---|---|
| চিত্র | এটি বিভিন্ন ফরম্যাটের সাথে একটি ছবি নির্দিষ্ট করে। |
| নিবন্ধ | এটি একটি স্বাধীন স্বয়ংসম্পূর্ণ নিবন্ধ নির্দিষ্ট করে৷ | ৷
| nav | এটি নেভিগেশন লিঙ্কগুলির জন্য একটি ধারক নির্দিষ্ট করে৷ | ৷
| একপাশে | এটি প্রধান বিষয়বস্তু (যেমন একটি সাইডবারের মতো) বাদ দিয়ে সামগ্রীর জন্য একটি ট্যাগ নির্দিষ্ট করে৷ |
| বিভাগ | এটি একটি নথিতে একটি বিভাগ উপস্থাপন করে৷ | ৷
| বিশদ বিবরণ | এটি অতিরিক্ত বিবরণের জন্য একটি ট্যাগ নির্দিষ্ট করে৷ | ৷
| হেডার | এটি একটি বিভাগ বা একটি নথির জন্য একটি শিরোনাম নির্দিষ্ট করে৷ | ৷
| ফুটার | এটি একটি বিভাগ বা একটি নথির জন্য একটি ফুটার নির্দিষ্ট করে |
| figcaption | এটি একটি HTML নথিতে একটি চিত্রের জন্য একটি ছোট বিবরণ নির্দিষ্ট করে৷ | ৷
| প্রধান | এটি পৃষ্ঠার মূল বিষয়বস্তু নির্দিষ্ট করে এবং এটি অনন্য হওয়া উচিত। |
| সারাংশ | এটি <বিস্তারিত> উপাদানের জন্য একটি হেডার নির্দিষ্ট করে। |
| চিহ্ন | এটি হাইলাইট করা পাঠ্য নির্দিষ্ট করে। |
আসুন HTML5 শব্দার্থবিদ্যা -
এর একটি উদাহরণ দেখিউদাহরণ
<!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> আউটপুট
