ডেভেলপাররা হিসেবে আমাদের যে জিনিসগুলো বিবেচনা করতে হয় সেগুলোর মধ্যে একটি হল আমাদের সাইটগুলোকন স্ক্রিন রিডার ব্যবহার করে ওয়েবসাইট কনজিউম করার লোকদের জন্য কীভাবে অ্যাক্সেসিবল করব। HTML সেটি করতে সিম্যান্টিক এলিমেন্ট মার্কআপে ব্যবহার করার সুবিধা দেয়। এই আর্টিকেলে, আমরা ওয়েব ডেভেলপমেন্টে ব্যবহৃত কিছু জনপ্রিয় সিম্যান্টিক এলিমেন্ট কভার করব।
সিম্যান্টিক HTML
যখন ‘সিম্যান্টিক HTML’ মানে কী তা বোঝাতে আসে, তখন আমরা শব্দ ‘সিম্যান্টিক্স’-র ডেফিনিশনই রেফারেন্স নিতে পারি। মেরিয়াম-ওয়েবস্টারের অনুযায়ী, সিম্যান্টিক্স হল মানিংয়ের অধ্যয়ন বা একটি সাইন এর মানে। তাই যখন আমরা সিম্যান্টিক HTML লিখছি, আমরা এমন একটি HTML কোড তৈরি করছি যা ট্যাগগুলোর অর্থ নিঃসন্দেহে ইমপ্লাই করে।
আমরা সিম্যান্টিক মার্কআপ ব্যবহার করি যাতে আমরা আমাদের ওয়েব পেজের কাঠামো একটি স্ট্যান্ডার্ড উপায়ে বর্ণনা করতে পারি: এটি স্ক্রিন রিডার এবং ভয়েস অ্যাসিস্টেন্টকে আমাদের HTML এলিমেন্ট স্ক্যান করে এবং ইউজার রিকোয়েস্ট করলে প্রাসঙ্গিক ইনফরমেশন রিটার্ন করতে দেয়।
সিম্যান্টিক এলিমেন্ট
যখন ২০১৪ সালে HTML5 স্পেসিফিকেশন রিলিজ হয়েছিল, তখন এটা ডাক 추가 সিম্যান্টিক এলিমেন্ট নিয়ে এসেছিল একটি ওয়েব পেজের কাঠামো আরও ভালোভাবে ইন্ডিকেট করতে। এখানে কিছু ট্যাগ যা সিম্যান্টিক ট্যাগ হিসেবে বিবেচিত হয়:
<header>
হেডারগুলো প্রাথমিকভাবে কন্টেইনার এলিমেন্ট যা সেকশনাল সিম্যান্টিক HTML এলিমেন্ট হিসেবে কাজ করে। সেগুলো সাধারণত লোগো, <nav> এবং একটি <h1> ধারণ করে যা ওয়েবসাইটটিকে বর্ণনা করে। এটি সাধারণত আপনার সাইটের সব পেজে কনসিস্টেন্ট থাকে।
<nav>
একটি <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> আছে যেটি আমাদের অ্যাঙ্কর (<a>) এলিমেন্টগুলো ধারণ করছে। এগুলো সব একটি <header>-এ নেস্টেড।
<main>, <section>, <h2> – <h6>
<main> ট্যাগ আমাদের বলে সাইটের মূল কন্টেন্ট, প্রাথমিক <header>-এর বাইরে। এতে <section> ট্যাগ থাকতে পারে যেগুলোর নিজস্ব <header> এবং <h2>–<h6> এলিমেন্ট থাকতে পারে।
হেডিং ট্যাগ সম্পর্কে জেনেরেল রুল অফ থাম্ব হল প্রতি পেজে শুধু একটি <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>
মনে রাখবেন যে যদিও আমরা হেডিং ট্যাগ আউট অফ অর্ডার ব্যবহার করতে পারি, এটি 베스트 প্র্যাকটিস নয়। প্রপার হায়ারার্কি রেখে থাকলে बेटার অ্যাক্সেসিবিলিটি হয়।
উপসংহার
সিম্যান্টিক HTML ব্যবহারের অনেক সম্ভাবনা আছে। সিম্যান্টিক HTML ব্যবহারের ডকুমেন্টেশন MDN ওয়েবসাইটে এবং W3C সাইটেও আছে। অন্যান্য ট্যাগ যা তাদের উদ্দেশ্য বর্ণনা করে সেখানে লিস্টেড। ডকুমেন্টেশন কীভাবে লুক আপ করতে হয় সেটি জানা নিশ্চিত করুন এবং বুঝুন যে HTML প্রসেসররা সিম্যান্টিক্স ব্যবহার করে ইউজারদের অতিরিক্ত হায়ারার্কিক্যাল ইনফরমেশন দেয় যদি সেটি দরকার হয়।
