শেষ বিভাগে আপনি শিখেছেন যে, কোনও পৃষ্ঠার শব্দের অর্থ না জানলেও, সিম্যান্টিক এলিমেন্ট ডকুমেন্টকে অর্থপূর্ণ স্ট্রাকচার প্রদান করলে, অন্যরা—সার্চ ইঞ্জিন, সহায়ক প্রযুক্তি, ভবিষ্যতের রক্ষণাবেক্ষণকারী, নতুন টিম মেম্বার—ডকুমেন্টের রূপরেখা বুঝতে পারবেন।
এই বিভাগে, আপনি ডকুমেন্টের গঠন সম্পর্কে জানতে পারবেন; আগের বিভাগ থেকে সেকশনিং এলিমেন্ট রিক্যাপ করবেন; এবং আপনার অ্যাপ্লিকেশনের জন্য আউটলাইন মার্ক-আপ করবেন।
কোড লেখার সময় কাজের জন্য সঠিক এলিমেন্ট বেছে নিলে, আপনাকে HTML রিফ্যাক্টর করতে বা কমেন্ট হিসেবে চিহ্নিত করতে হবে না। আপনি যদি কাজের জন্য সঠিক এলিমেন্ট ব্যবহার করার কথা ভাবেন, তাহলে আপনি প্রায়শই কাজের জন্য সঠিক এলিমেন্ট বেছে নেবেন। আপনি যদি না করেন, তাহলে সম্ভবত আপনি করবেন না।
এখন আপনি মার্কআপ সিম্যান্টিক্স বোঝেন এবং সঠিক এলিমেন্ট বেছে নেওয়া কেন গুরুত্বপূর্ণ তা জানেন, তাই আপনি একবার সব বিভিন্ন এলিমেন্ট সম্পর্কে জেনে গেলে, সাধারণত খুব বেশি, যদি থাকে, অতিরিক্ত প্রচেষ্টা ছাড়াই সঠিক এলিমেন্ট বেছে নিতে পারবেন।
সাইট <header>
প্রথমে, আপনাকে সাইট হেডার তৈরি করতে হবে। নন-সিম্যান্টিক মার্ক-আপ দিয়ে শুরু করুন এবং ভাল সমাধানের দিকে এগিয়ে যান যাতে আপনি HTML সেকশন ও হেডিং এলিমেন্টের সুবিধাগুলি বুঝতে পারেন।
আপনি যদি আমাদের হেডারের শব্দার্থবিদ্যা নিয়ে খুব বেশি না ভাবেন, তাহলে আপনি এই ধরনের কোড ব্যবহার করতে পারেন:
<!-- start header -->
<div id="pageHeader">
<div id="title">Machine Learning Workshop</div>
<!-- navigation -->
<div id="navigation">
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</div>
<!-- end navigation bar -->
</div>
<!-- end of header -->
CSS-এর সাহায্যে (প্রায়) যেকোনও মার্কআপকে ঠিকমতো দেখানো যায়। কিন্তু সবকিছুর জন্য নন-সিম্যান্টিক <div> ব্যবহার করলে আসলে অতিরিক্ত কাজ করতে হয়। CSS-এর মাধ্যমে একাধিক <div> টার্গেট করতে, আপনি কন্টেন্ট শনাক্ত করার জন্য আইডি বা ক্লাস ব্যবহার করেন। এছাড়াও, প্রতিটি বন্ধ করার </div>-এর জন্য কোডে একটি কমেন্ট থাকে যা প্রতিটি </div> কোন খোলার ট্যাগ বন্ধ করেছে তা নির্দেশ করে।
id এবং class অ্যাট্রিবিউট স্টাইলিং এবং জাভাস্ক্রিপ্টের জন্য হুক প্রদান করলেও, স্ক্রিন রিডার এবং (বেশিরভাগ ক্ষেত্রে) সার্চ ইঞ্জিনের জন্য কোনও শব্দার্থিক ভ্যালু যোগ করে না।
স্ক্রিন রিডারের জন্য একটি ভাল অ্যাক্সেসিবিলিটি অবজেক্ট মডেল (AOM) তৈরি করতে আপনি role অ্যাট্রিবিউট অন্তর্ভুক্ত করতে পারেন:
<!-- start header -->
<div role="banner">
<div role="heading" aria-level="1">Machine Learning Workshop</div>
<div role="navigation">
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</div>
<!-- end navigation bar -->
</div>
<!-- end of header -->
এটি অন্তত শব্দার্থ প্রদান করে এবং CSS-এ অ্যাট্রিবিউট সিলেক্টর ব্যবহার করার সুবিধা দেয়, তবে এটি এখনও প্রতিটি </div> কোন <div> বন্ধ করে তা শনাক্ত করার জন্য কমেন্ট যোগ করে।
আপনি HTML জানলে, কন্টেন্টের উদ্দেশ্য সম্পর্কে আপনাকে শুধু ভাবতে হবে। তারপর আপনি role ব্যবহার না করে এবং ক্লোজিং ট্যাগ কমেন্ট করার প্রয়োজন ছাড়াই এই কোডটি শব্দার্থগতভাবে লিখতে পারেন:
<header>
<h1>Machine Learning Workshop</h1>
<nav>
<a href="#reg">Register</a>
<a href="#about">About</a>
<a href="#teachers">Instructors</a>
<a href="#feedback">Testimonials</a>
</nav>
</header>
এই কোড দুটি সেম্যান্টিক ল্যান্ডমার্ক ব্যবহার করে: <header> এবং <nav>।
এটি হল প্রধান হেডার। <header> এলিমেন্ট সবসময় ল্যান্ডমার্ক হয় না। এটি কোথায় নেস্ট করা আছে তার উপর নির্ভর করে এর বিভিন্ন শব্দার্থ আছে। <header> টপ লেভেলে থাকলে, এটি হল সাইট banner, একটি ল্যান্ডমার্ক ভূমিকা, যা আপনি হয়ত role কোড ব্লকে লক্ষ্য করেছেন। <header>-কে <main>, <article> বা <section>-এ নেস্ট করা হলে, এটি শুধু সেই বিভাগের হেডার হিসেবে শনাক্ত করে এবং এটি কোনও ল্যান্ডমার্ক নয়।
<nav> এলিমেন্ট কন্টেন্টকে নেভিগেশন হিসেবে শনাক্ত করে। যেহেতু এই <nav> সাইটের হেডিংয়ে নেস্ট করা আছে, তাই এটি সাইটের প্রধান নেভিগেশন। এটি <article> বা <section>-এ নেস্ট করা থাকলে, এটি শুধুমাত্র সেই বিভাগের জন্য ইন্টার্নাল নেভিগেশন হবে। সিম্যান্টিক এলিমেন্ট ব্যবহার করে, আপনি একটি অর্থপূর্ণ অ্যাক্সেসিবিলিটি অবজেক্ট মডেল বা AOM তৈরি করেছেন। AOM স্ক্রিন রিডারকে ব্যবহারকারীকে জানাতে দেয় যে এই বিভাগে একটি প্রধান নেভিগেশন ব্লক রয়েছে যা তারা নেভিগেট করতে বা এড়িয়ে যেতে পারে।
</nav> এবং </header> ক্লোজিং ট্যাগ ব্যবহার করলে, প্রতিটি এন্ড ট্যাগ কোন এলিমেন্ট বন্ধ করেছে তা শনাক্ত করার জন্য কমেন্টের প্রয়োজন হয় না। এছাড়াও, বিভিন্ন এলিমেন্টের জন্য বিভিন্ন ট্যাগ ব্যবহার করলে id এবং class হুকের প্রয়োজন হয় না। CSS বাছাইকারীর কম নির্দিষ্টতা থাকতে পারে; আপনি সম্ভবত কোনও দ্বন্দ্বের চিন্তা না করেই header nav a-এর মাধ্যমে লিঙ্ক টার্গেট করতে পারবেন।
আপনি খুব কম HTML এবং কোনও ক্লাস বা আইডি ছাড়াই একটি হেডার লিখেছেন। সিম্যান্টিক HTML ব্যবহার করলে, আপনাকে এটি করতে হবে না।
সাইট <footer>
সাইটের ফুটারে কোড যোগ করুন।
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>
<header>-এর মতো, ফুটারটি ল্যান্ডমার্ক কিনা তা নির্ভর করে ফুটারটি কোথায় নেস্ট করা হয়েছে তার উপর। এটি সাইটের ফুটার হলে, এটি একটি ল্যান্ডমার্ক এবং এতে সাইটের ফুটার সংক্রান্ত তথ্য থাকা উচিত যা আপনি প্রতিটি পৃষ্ঠায় চান, যেমন কপিরাইট বিবৃতি, যোগাযোগের তথ্য এবং আপনার গোপনীয়তা এবং কুকি নীতির লিঙ্ক। সাইটের ফুটারে ইমপ্লিসিট role হল contentinfo। অন্যথায়, ফুটারের কোনও অন্তর্নিহিত ভূমিকা নেই এবং এটি কোনও ল্যান্ডমার্ক নয়, যেমনটি Chrome-এ AOM-এর নিম্নলিখিত স্ক্রিনশটে দেখানো হয়েছে (যেটিতে <header> ও <footer>-এর মধ্যে <header> ও <footer> সহ <article> আছে)।
এই স্ক্রিনশটে, দুটি ফুটার আছে: একটি <article>-এ এবং একটি টপ লেভেলে। টপ লেভেল ফুটার হল একটি ল্যান্ডমার্ক যার অন্তর্নিহিত ভূমিকা হল contentinfo। অন্য ফুটারটি ল্যান্ডমার্ক নয়। Chrome-এ এটি FooterAsNonLandmark হিসেবে দেখানো হয়; Firefox-এ এটি section হিসেবে দেখানো হয়।
তার মানে এই নয় যে আপনি <footer> ব্যবহার করবেন না। যেমন, আপনার কোনও ব্লগ থাকলে, আপনার সাইটের ফুটার থাকতে পারে যার একটি অন্তর্নিহিত contentinfo ভূমিকা আছে। এছাড়াও, প্রতিটি ব্লগ পোস্টে একটি <footer> থাকতে পারে। আপনার ব্লগের প্রধান ল্যান্ডিং পৃষ্ঠায়, ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডার জানে যে প্রধান ফুটার হল টপ-লেভেল ফুটার এবং অন্যান্য সব ফুটার সেইসব পোস্টের সাথে সম্পর্কিত যেগুলিতে সেগুলি নেস্ট করা আছে।
<footer> যদি <article>, <aside>, <main>, <nav> বা <section>-এর বংশধর হয়, তাহলে সেটি ল্যান্ডমার্ক নয়। পোস্টটি যদি নিজে থেকে দেখা যায়, তাহলে মার্কআপের উপর নির্ভর করে, সেই ফুটারটি প্রোমোট করা হতে পারে।
ফুটারেই সাধারণত যোগাযোগের তথ্য থাকে, যা <address>-এর মধ্যে থাকে, এটি হল যোগাযোগের ঠিকানা এলিমেন্ট। এটি এমন একটি এলিমেন্ট যার নাম খুব একটা ভালো নয়; এটি কোনও ব্যক্তি বা সংস্থার যোগাযোগের তথ্য এনক্লোজ করতে ব্যবহার করা হয়, ফিজিক্যাল মেলিং অ্যাড্রেস নয়।
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
<address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>
ডকুমেন্টের গঠন
এই মডিউল <header> এবং <footer> দিয়ে শুরু হয়, কারণ এগুলি কখনও কখনও ল্যান্ডমার্ক (বা "সেকশনিং") এলিমেন্ট হিসেবে কাজ করে। আরও বেশ কিছু ঘন ঘন সেকশনিং এলিমেন্ট আছে।
হেডার, দুটি সাইডবার ও ফুটার সহ লেআউটকে হোলি গ্রেল লেআউট বলা হয়। এই কন্টেন্ট মার্ক-আপ করার অনেক উপায় আছে, যার মধ্যে রয়েছে:
<body>
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
আপনি কোনও ব্লগ তৈরি করলে, <main>-এ আপনার কাছে একাধিক নিবন্ধ থাকতে পারে:
<body>
<header>Header</header>
<nav>Nav</nav>
<main>
<article>First post</article>
<article>Second post</article>
</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
সিম্যান্টিক এলিমেন্ট ব্যবহার করার সময়, ব্রাউজার অর্থপূর্ণ অ্যাক্সেসিবিলিটি ট্রি তৈরি করতে পারে। এটি স্ক্রিন রিডার কীভাবে নেভিগেট করে তা উন্নত করতে সাহায্য করে। এখানে, banner এবং contentinfo, <header> এবং <footer> সাইটের মাধ্যমে প্রদান করা হয়। এখানে যোগ করা নতুন এলিমেন্টের মধ্যে রয়েছে <main>, <aside> ও <article>; এছাড়াও, <h1> ও <nav> যা আপনি আগে ব্যবহার করেছেন এবং <section> যা আপনি এখনও ব্যবহার করেননি।
<main>
একটিই <main> ল্যান্ডমার্ক এলিমেন্ট আছে। <main> এলিমেন্ট ডকুমেন্টের মূল কন্টেন্ট শনাক্ত করে। প্রতি পৃষ্ঠায় শুধুমাত্র একটি <main> থাকতে হবে।
<aside>
<aside> হল এমন কন্টেন্টের জন্য যা ডকুমেন্টের মূল কন্টেন্টের সাথে পরোক্ষভাবে বা স্পর্শকভাবে সম্পর্কিত। যেমন, এই ডকুমেন্টটি HTML সম্পর্কে। তিনটি সাইট হেডার উদাহরণের (div, role, and semantic) জন্য CSS সিলেক্টর স্পেসিফিসিটি সংক্রান্ত বিভাগের ক্ষেত্রে, স্পর্শকভাবে সম্পর্কিত অ্যাসাইড <aside>-এ অন্তর্ভুক্ত করা যেতে পারে; এবং, বেশিরভাগের মতো, <aside> সম্ভবত সাইডবার বা কল-আউট বক্সে দেখানো হবে। <aside> হল একটি ল্যান্ডমার্ক, যার অন্তর্নিহিত ভূমিকা হল complementary।
<article>
<main>-এর মধ্যে আমরা দুটি <article> এলিমেন্ট যোগ করেছি। প্রথম উদাহরণে এটি করার প্রয়োজন ছিল না, কারণ মূল কন্টেন্ট ছিল একটি শব্দ বা বাস্তব জগতের ক্ষেত্রে কন্টেন্টের একটি বিভাগ। কিন্তু, আপনি যদি ব্লগ লেখেন, যেমন আমাদের দ্বিতীয় উদাহরণে দেখানো হয়েছে, তাহলে প্রতিটি পোস্ট <main>-এর মধ্যে নেস্ট করা <article>-এ থাকতে হবে।
<article> হল কন্টেন্টের সম্পূর্ণ বা স্বয়ংসম্পূর্ণ অংশ যা নীতিগতভাবে স্বাধীনভাবে ব্যবহার করা যায়। খবরের কাগজের নিবন্ধের মতো করে নিবন্ধের কথা ভাবুন। প্রিন্ট মিডিয়াতে, নিউজিল্যান্ডের প্রধানমন্ত্রী জেসিন্ডা আর্ডার্ন সম্পর্কে খবর সম্পর্কিত নিবন্ধ শুধুমাত্র একটি বিভাগে, যেমন আন্তর্জাতিক খবর, দেখানো হতে পারে। সংবাদপত্রের ওয়েবসাইটে, একই খবর সম্পর্কিত নিবন্ধ হোম পেজে, রাজনীতি বিভাগে, ওশেনিয়া বা এশিয়া প্যাসিফিক খবর বিভাগে এবং খবরের বিষয়ের উপর নির্ভর করে খেলাধূলা, লাইফস্টাইল বা প্রযুক্তি বিভাগে দেখানো হতে পারে। নিবন্ধটি Pocket বা Yahoo News-এর মতো অন্যান্য সাইটেও দেখা যেতে পারে!
<section>
ব্যবহার করার জন্য আরও নির্দিষ্ট শব্দার্থিক এলিমেন্ট না থাকলে, কোনও ডকুমেন্টের জেনেরিক স্ট্যান্ডঅ্যালোন বিভাগ অন্তর্ভুক্ত করতে <section> এলিমেন্ট ব্যবহার করা হয়। খুব কম ব্যতিক্রম ছাড়া, বিভাগগুলিতে একটি শিরোনাম থাকতে হবে।
জেসিন্ডা আর্ডার্নের উদাহরণে ফিরে যাওয়া যাক, সংবাদপত্রের হোম পেজে ব্যানারে সংবাদপত্রের নাম থাকবে, তারপরে একটি <main> থাকবে, যা একাধিক <section>-এ বিভক্ত থাকবে, প্রতিটিতে একটি করে হেডার থাকবে, যেমন "বিশ্বের খবর" এবং "রাজনীতি"; এবং প্রতিটি বিভাগে আপনি একাধিক <article> দেখতে পাবেন। প্রতিটি <article>-এর মধ্যে, আপনি এক বা একাধিক <section> এলিমেন্টও দেখতে পেতে পারেন। আপনি এই পৃষ্ঠাটি দেখলে, সম্পূর্ণ "হেডার ও বিভাগ" অংশটি হল <article>। এই <article>-কে তারপর site header, site footer ও ডকুমেন্টের স্ট্রাকচার সহ একাধিক <section>-এ ভাগ করা হয়। নিবন্ধের নিজস্ব একটি হেডার আছে, যেমন প্রতিটি বিভাগের আছে।
<section>-এর অ্যাক্সেসযোগ্য নাম না থাকলে সেটি ল্যান্ডমার্ক নয়; অ্যাক্সেসযোগ্য নাম থাকলে, অন্তর্নিহিত ভূমিকা হল region। ডকুমেন্টের সামগ্রিক বড় অংশ শনাক্ত করতে ল্যান্ডমার্ক ভূমিকা খুব কম ব্যবহার করা উচিত। অনেক বেশি ল্যান্ডমার্ক রোল ব্যবহার করলে স্ক্রিন রিডারে "নয়েজ" তৈরি হতে পারে, যার ফলে পৃষ্ঠার সামগ্রিক লেআউট বোঝা কঠিন হয়ে যায়। আপনার <main>-এ যদি দুই বা তিনটি গুরুত্বপূর্ণ সাব-সেকশন থাকে, তাহলে প্রত্যেকটির জন্য একটি অ্যাক্সেসযোগ্য নাম <section> অন্তর্ভুক্ত করা উপকারী হতে পারে।
শিরোনাম: <h1>-<h6>
ছয়টি বিভাগ শিরোনাম এলিমেন্ট আছে: <h1>, <h2>, <h3>, <h4>, <h5> এবং <h6>। প্রতিটি ট্যাগ বিভাগের শিরোনামের ছয়টি লেভেলের একটিকে দেখায়, যেখানে <h1> হল সবচেয়ে বেশি বা গুরুত্বপূর্ণ বিভাগের লেভেল এবং <h6> হল সবচেয়ে কম।
কোনও ডকুমেন্টের ব্যানারে <header> হেডিং নেস্ট করা থাকলে, সেটি অ্যাপ্লিকেশন বা সাইটের হেডিং। <main>-এ নেস্ট করা থাকলে, এটি <main>-এর মধ্যে <header>-এ নেস্ট করা থাকুক বা না থাকুক, এটি সেই পৃষ্ঠার হেডার, পুরো সাইটের নয়। <article> বা <section>-এ নেস্ট করা থাকলে, এটি পৃষ্ঠার সেই উপবিভাগের হেডার।
টেক্সট এডিটরে হেডিং লেভেল যেভাবে ব্যবহার করা হয়, এখানেও সেইভাবে হেডিং লেভেল ব্যবহার করার সাজেশন দেওয়া হয়: মূল হেডিং হিসেবে <h1> দিয়ে শুরু করে, সাব-সেকশনের হেডিং হিসেবে <h2> এবং সেই সাব-সেকশনে কোনও সেকশন থাকলে <h3> ব্যবহার করুন; হেডিং লেভেল এড়িয়ে যাবেন না। এখানে বিভাগের শিরোনামের উপর একটি ভাল নিবন্ধ আছে।
কিছু স্ক্রিন রিডার ব্যবহারকারী কোনও পৃষ্ঠার কন্টেন্ট বুঝতে শিরোনাম অ্যাক্সেস করেন। মূলত, হেডিংয়ের মাধ্যমে ডকুমেন্টের আউটলাইন তৈরি করার কথা ছিল, ঠিক যেমন MS Word বা Google Docs হেডিংয়ের উপর ভিত্তি করে আউটলাইন তৈরি করতে পারে, কিন্তু ব্রাউজার কখনই এই স্ট্রাকচার প্রয়োগ করেনি এবং প্রস্তাবিত আউটলাইন অ্যালগরিদম HTML স্পেসিফিকেশন থেকে সরিয়ে দেওয়া হয়েছে। ব্রাউজারগুলি ঐতিহাসিকভাবে ছোট ফন্ট সাইজে সেকশনিং এলিমেন্টে নেস্ট করা <h1> এলিমেন্টগুলি প্রদর্শন করলেও, আধুনিক ব্রাউজারগুলি সেই ডিফল্ট স্টাইলগুলি সরিয়ে দিয়েছে এবং অটোমেটিক ডকুমেন্ট আউটলাইনিং সমর্থন করে না।
MachineLearningWorkshop.com-এর আউটলাইন তৈরি করার জন্য আপনার কাছে এখন যথেষ্ট জ্ঞান আছে:
MLW.com-এর <body>-এর আউটলাইন তৈরি করা হচ্ছে
মেশিন লার্নিং ওয়ার্কশপ সাইটের দৃশ্যমান কন্টেন্টের আউটলাইন এখানে দেওয়া হল:
যেহেতু কোনও কন্টেন্টই স্বতন্ত্র, সম্পূর্ণ কন্টেন্ট নয়, তাই <article>-এর চেয়ে <section> বেশি উপযুক্ত; যদিও প্রতিটির একটি করে শিরোনাম আছে, কোনও বিভাগই <footer>-এর যোগ্য নয়।
এই পয়েন্টে এটি বলার অপেক্ষা রাখে না, তবে টেক্সট বোল্ড বা বড় করতে হেডিং ব্যবহার করবেন না; পরিবর্তে CSS ব্যবহার করুন। আপনি যদি টেক্সটকে জোর দিতে চান, তাহলে তা করার জন্য সিম্যান্টিক এলিমেন্টও রয়েছে। আমরা সেটি কভার করব এবং টেক্সটের প্রাথমিক বিষয় নিয়ে আলোচনা করার সময় পৃষ্ঠার বেশিরভাগ কন্টেন্ট পূরণ করব; অ্যাট্রিবিউট নিয়ে আরও গভীরভাবে আলোচনা করার পরে।
আপনি কতটা বুঝেছেন তা চেক করুন
শিরোনাম ও বিভাগ সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।
আপনার সাইটের লোগো বা শীর্ষক এবং মূল নেভিগেশন সহ সাইটের এলাকা ধারণ করতে কোন এলিমেন্ট ব্যবহার করা হয়।
<heading><header><title>একটি পৃষ্ঠায় কতগুলি <main> এলিমেন্ট দেখানো যায়?