বিকাশকারী হিসাবে আমাদের যে বিষয়গুলি বিবেচনা করতে হবে তা হল কীভাবে আমাদের সাইটগুলিকে তাদের কাছে অ্যাক্সেসযোগ্য করে তোলা যায় যাদের একটি ওয়েবসাইট ব্যবহার করার জন্য স্ক্রিন রিডার প্রয়োজন৷ এইচটিএমএল মার্কআপে শব্দার্থিক উপাদানের ব্যবহার প্রদান করে সেই প্রচেষ্টায় সহায়তা করে। এই নিবন্ধে, আমরা ওয়েব ডেভেলপমেন্টে ব্যবহার করার জন্য আরও কিছু জনপ্রিয় শব্দার্থক উপাদান কভার করব।
অর্থসূচক HTML
'অর্থবোধক এইচটিএমএল' এর অর্থ কী তা বর্ণনা করার সময়, আমরা আমাদের সাহায্য করার জন্য সরাসরি 'শব্দার্থবিদ্যা' শব্দের সংজ্ঞায় যেতে পারি। মেরিয়াম-ওয়েবস্টারের মতে, শব্দার্থবিদ্যা হল অর্থ বা চিহ্নের অর্থের অধ্যয়ন। তাই যখন আমরা শব্দার্থিক HTML লিখছি, তখন আমরা একটি HTML কোড তৈরি করছি যা একেবারে ট্যাগগুলির অর্থ কী তা বোঝায়।
আমরা শব্দার্থিক মার্কআপ ব্যবহার করি যাতে আমরা আমাদের ওয়েব পৃষ্ঠাগুলির গঠন একটি আদর্শ উপায়ে বর্ণনা করতে পারি:এটি স্ক্রিন রিডার এবং ভয়েস সহকারীকে আমাদের HTML উপাদানগুলি স্ক্যান করতে এবং ব্যবহারকারীর অনুরোধ করলে প্রাসঙ্গিক তথ্য ফেরত দিতে দেয়৷
অর্থবোধক উপাদান
2014 সালে যখন HTML5 স্পেসিফিকেশন প্রকাশিত হয়েছিল, তখন এটি একটি ওয়েব পৃষ্ঠার গঠনকে আরও ভালভাবে নির্দেশ করার জন্য অতিরিক্ত শব্দার্থিক উপাদানগুলির সাথে এসেছিল৷ এখানে কিছু ট্যাগ আছে যেগুলিকে শব্দার্থিক ট্যাগ হিসেবে বিবেচনা করা হবে:
শিরোনামগুলি প্রাথমিকভাবে ধারক উপাদান যা বিভাগীয় শব্দার্থিক HTML উপাদান হিসাবে কাজ করে। এগুলিতে সাধারণত লোগো থাকে, <nav> এবং একটি <h1> যে ওয়েবসাইট নিজেই বর্ণনা করে. এটি সাধারণত আপনার সাইটের সমস্ত পৃষ্ঠা জুড়ে সামঞ্জস্যপূর্ণ।
একটি <nav> উপাদান একটি নেভিগেশনাল উপাদান জন্য সংক্ষিপ্ত. এটি এমন লিঙ্ক ধারণ করে যা ব্যবহারকারীদের আপনার সাইটের অন্যান্য অংশে নিয়ে যায়:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
নেভিগেশন উপাদানের লিঙ্ক, মেনু এবং সাবমেনু থাকতে পারে। তবে উপাদানগুলিতে অন্য <nav> থাকতে পারে না উপাদান উপরের উদাহরণে, আমার কাছে একটি <img> আছে যেটি একটি লোগো এবং একটি <nav> এর জন্য একটি স্থানধারক হিসাবে কাজ করে৷ যেটিতে আমাদের অ্যাঙ্কর () উপাদান রয়েছে। এগুলি সবই একটি <header>-এর ভিতরে নেস্টেড .
, , –
–
<main> প্রাথমিক <header> এর বাইরে ট্যাগ আমাদের সাইটের মূল বিষয়বস্তু জানায় . এতে <section> থাকতে পারে ট্যাগগুলির নিজস্ব <header> থাকতে পারে এবং <h2> –<h6> উপাদান
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
শিরোনাম ট্যাগ সম্পর্কে সাধারণ নিয়ম হল যে শুধুমাত্র একটি আছে <h1> পৃষ্ঠা প্রতি উপাদান যা পৃষ্ঠায় দেওয়া শিরোনামের সাথে মেলে। উপরন্তু, আপনি একটি উচ্চ নম্বরযুক্ত শিরোনাম ব্যবহার করতে পারবেন না, যতক্ষণ না আপনি একটি নিম্ন-সংখ্যাযুক্ত একটি ব্যবহার করেন। তবে, আপনার কাছে একটি উচ্চ-সংখ্যার শিরোনাম থেকে একটি নিম্ন-সংখ্যার শিরোনামে যাওয়ার ক্ষমতা আছে। এটি মূলত একটি ওয়েব পৃষ্ঠার কাঠামো অনুসরণ করে:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header.main-header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
h6 {
text-decoration: line-through;
}
h6.ok {
text-decoration: none;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="main-header">
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<body>
<main>
<header>
<h2>
I'm an h2 -- Semantic Elements -- Describes purpose of main content
</h2>
</header>
<section>
<header>
<h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3>
</header>
<div>Content and More stuff and things that pertain to h3 </div>
<h4> I'm an h4 -- Even less important heading </h4>
<div>More content that pertains to h4</div>
</section>
<section>
<header>
<h3> We can go back up to h3 even though we used h4</h3>
</header>
<div>More stuff and things that pertain to h3 </div>
<h6>No h6 until h4 and h5</h6>
<h4> This can't be h6, unless h4</h4>
<div>More content that pertains to h4</div>
<h5> and h5 are used first. </h5>
<div>More content that pertains to h5</div>
<h6 class="ok">Now h6 can be used!</h6>
</section>
</main>
<footer>
</footer>
<script src="script.js"></script>
</body>
</html> মনে রাখবেন যে যদিও আমরা শিরোনাম ট্যাগগুলি ব্যবহার করতে পারি না, তবে এটি করা সর্বোত্তম অনুশীলন নয়৷ সঠিক শ্রেণিবিন্যাস থাকলে তা আরও ভালো অ্যাক্সেসযোগ্যতার দিকে নিয়ে যায়।
উপসংহার
শব্দার্থিক এইচটিএমএল ব্যবহারের জন্য অনেক সম্ভাবনা রয়েছে শব্দার্থিক এইচটিএমএল ব্যবহারের জন্য ডকুমেন্টেশন MDN ওয়েবসাইটের পাশাপাশি W3C সাইটে অবস্থিত। অন্যান্য ট্যাগ যা তাদের উদ্দেশ্য বর্ণনা করে উভয় সাইটেই তালিকাভুক্ত করা হয়েছে। ডকুমেন্টেশনটি কীভাবে দেখতে হয় তা নিশ্চিত হন এবং বুঝতে পারেন যে HTML প্রসেসররা প্রয়োজন হলে ব্যবহারকারীদের অতিরিক্ত শ্রেণিবিন্যাস তথ্য দিতে শব্দার্থবিদ্যা ব্যবহার করে।
