সিরিজের সপ্তম পর্ব — Semantic HTML।
আগের পর্বে আমরা শিখেছি Form। আজকে শিখবো Semantic HTML — এমন কিছু ট্যাগ, যেগুলো শুধু কন্টেন্ট দেখায় না, বরং সেই কন্টেন্টের অর্থ ও গুরুত্বও বহন করে।
Semantic HTML কী?
"Semantic" শব্দের অর্থ "অর্থবহ"। একটা semantic ট্যাগের নাম দেখেই বোঝা যায় সেটার ভেতরে কী ধরনের কন্টেন্ট আছে। যেমন <nav> দেখলেই বোঝা যায় এটা নেভিগেশন মেনু — অথচ <div> দেখে কিছুই বোঝা যায় না।
আগের পর্বগুলোতে আমরা যা শিখেছি তার প্রায় সবই semantic — <table>, <form>, <h1>, <strong> — এগুলো সবই তাদের নাম দিয়ে কাজ বুঝিয়ে দেয়। আজকে আমরা শিখবো পেজের বড় বড় অংশ (layout) কীভাবে semantic ট্যাগ দিয়ে সাজাতে হয়।
একটা সাধারণ ওয়েবপেজের কাঠামো
বেশিরভাগ ওয়েবপেজের কয়েকটা কমন অংশ থাকে — উপরে হেডার, একটা নেভিগেশন মেনু, মূল কন্টেন্ট, আর নিচে ফুটার। Semantic HTML দিয়ে এগুলো এভাবে সাজানো হয়:
<header> <!-- লোগো, সাইটের নাম --> </header> <nav> <!-- মেনু লিংক --> </nav> <main> <!-- পেজের মূল কন্টেন্ট --> </main> <footer> <!-- কপিরাইট, সোশ্যাল লিংক --> </footer>
<header>
পেজ বা কোনো সেকশনের ভূমিকা অংশ — সাধারণত এখানে লোগো, সাইটের নাম, বা শিরোনাম থাকে:
<header> <h1>আমার ব্লগ</h1> <p>ওয়েব ডেভেলপমেন্ট নিয়ে টিউটোরিয়াল</p> </header>
<nav>
নেভিগেশন লিংক রাখার জন্য — মেনু বার এখানে থাকে:
<nav>
<ul>
<li><a href="/">হোম</a></li>
<li><a href="/about">আমার সম্পর্কে</a></li>
<li><a href="/contact">যোগাযোগ</a></li>
</ul>
</nav>
<main>
পেজের সবচেয়ে গুরুত্বপূর্ণ, মূল কন্টেন্ট এখানে থাকে। একটা পেজে <main> শুধু একবারই ব্যবহার করা উচিত:
<main> <h2>সাম্প্রতিক পোস্ট</h2> <p>এখানে ব্লগ পোস্টগুলো দেখানো হবে...</p> </main>
<section> vs <article>
এই দুইটা নিয়ে beginner-রা সবচেয়ে বেশি বিভ্রান্ত হয়। পার্থক্যটা মনে রাখার সহজ উপায়:
| ট্যাগ | কখন ব্যবহার হবে |
|---|---|
<section> |
পেজের একটা থিমেটিক অংশ — যেমন "আমাদের সেবা", "গ্রাহকদের মতামত" |
<article> |
এমন কন্টেন্ট যেটা একা দাঁড়াতে পারে ও আলাদাভাবে শেয়ার করা যায় — যেমন একটা ব্লগ পোস্ট, নিউজ আর্টিকেল, কমেন্ট |
<section>
<h2>সাম্প্রতিক পোস্টসমূহ</h2>
<article>
<h3>HTML শেখা শুরু করি</h3>
<p>এই পোস্টে আমরা HTML-এর বেসিক শিখবো...</p>
</article>
<article>
<h3>CSS দিয়ে ডিজাইন করি</h3>
<p>এই পোস্টে আমরা CSS শিখবো...</p>
</article>
</section>
টিপস: সহজ নিয়ম — যদি কন্টেন্টটা RSS ফিডে আলাদা আইটেম হিসেবে যেতে পারে বা অন্য কোথাও কপি-পেস্ট করে বসালেও অর্থবহ থাকে, তাহলে সেটা <article>। আর যদি সেটা পেজের একটা ভাগ মাত্র, তাহলে সেটা <section>।
<aside>
মূল কন্টেন্টের সাথে সম্পর্কিত কিন্তু আলাদা কিছু — যেমন সাইডবার, বিজ্ঞাপন, রিলেটেড পোস্ট লিস্ট:
<aside>
<h3>জনপ্রিয় পোস্ট</h3>
<ul>
<li><a href="#">পোস্ট ১</a></li>
<li><a href="#">পোস্ট ২</a></li>
</ul>
</aside>
<footer>
পেজ বা সেকশনের শেষের অংশ — কপিরাইট তথ্য, সোশ্যাল মিডিয়া লিংক, যোগাযোগের তথ্য এখানে থাকে:
<footer> <p>© ২০২৬ আমার ব্লগ। সর্বস্বত্ব সংরক্ষিত।</p> </footer>
কেন Semantic ট্যাগ ব্যবহার করা উচিত?
শুধু <div> দিয়েও একই লেআউট বানানো সম্ভব, কিন্তু semantic ট্যাগ ব্যবহারের কিছু বড় সুবিধা আছে:
- SEO: গুগল বুঝতে পারে কোনটা মূল কন্টেন্ট, কোনটা নেভিগেশন — ফলে র্যাংকিং ভালো হয়
- Accessibility: স্ক্রিন রিডার ব্যবহারকারীরা সহজে পেজের বিভিন্ন অংশে জাম্প করতে পারে
- Readability: কোড পড়েই বোঝা যায় কোন অংশ কী কাজ করছে — টিম ওয়ার্কে এটা অনেক সাহায্য করে
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Semantic HTML উদাহরণ</title>
</head>
<body>
<header>
<h1>আমার ব্লগ</h1>
</header>
<nav>
<ul>
<li><a href="/">হোম</a></li>
<li><a href="/about">সম্পর্কে</a></li>
</ul>
</nav>
<main>
<section>
<h2>সাম্প্রতিক পোস্ট</h2>
<article>
<h3>HTML শেখা শুরু করি</h3>
<p>পোস্টের সংক্ষিপ্ত বর্ণনা...</p>
</article>
</section>
<aside>
<h3>জনপ্রিয় পোস্ট</h3>
<ul>
<li><a href="#">CSS টিউটোরিয়াল</a></li>
</ul>
</aside>
</main>
<footer>
<p>© ২০২৬ আমার ব্লগ</p>
</footer>
</body>
</html>
নিজে চেষ্টা করো
Exercise:
- আগের পর্বগুলোর কোনো একটা ফাইল নাও, সেটাকে
header,nav,main,footerদিয়ে সাজাও main-এর ভেতরে দুইটাarticleবানাও- একটা
asideযোগ করো, যেখানে কিছু রিলেটেড লিংক থাকবে
পরের পর্বে যা থাকছে
পর্ব ৮-এ আমরা শিখবো Div, Span ও Layout বেসিক — Block vs Inline element, এবং id vs class এর পার্থক্য, উদাহরণসহ।
প্রশ্ন থাকলে কমেন্টে জানাতে পারো।