অধ্যায় ৫: HTML Table ও Semantic Tags (বাংলায়)
এই অধ্যায়ে আপনি শিখবেন কীভাবে টেবিল তৈরি করতে হয় এবং কীভাবে ওয়েবসাইটে সঠিক অর্থবোধক (semantic) ট্যাগ ব্যবহার করে কোডকে পরিষ্কার ও SEO-বান্ধব করা যায়।
১. HTML Table (টেবিল তৈরি)
HTML টেবিল তৈরি হয় এই ট্যাগগুলোর মাধ্যমে:
| ট্যাগ | অর্থ |
|---|---|
<table> |
টেবিল শুরু ও শেষ |
<tr> |
টেবিলের একটি সারি (row) |
<th> |
হেডার সেল (bold + centered) |
<td> |
সাধারণ সেল (data) |
টেবিলের একটি উদাহরণ:
<table border="1">
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>শহর</th>
</tr>
<tr>
<td>রাহুল</td>
<td>২১</td>
<td>ঢাকা</td>
</tr>
<tr>
<td>তানিয়া</td>
<td>২৩</td>
<td>চট্টগ্রাম</td>
</tr>
</table>
ফলাফল:
| নাম | বয়স | শহর |
|---|---|---|
| রাহুল | ২১ | ঢাকা |
| তানিয়া | ২৩ | চট্টগ্রাম |
অতিরিক্ত ট্যাগ:
-
colspan="2"→ একটি সেল দুইটি কলাম নেবে -
rowspan="2"→ একটি সেল দুইটি সারি জুড়ে থাকবে
<td colspan="2">একই কলামের নিচে</td>
২. Semantic Tags (অর্থবোধক ট্যাগ)
Semantic tags এমন ট্যাগ যেগুলো শুধু ডিজাইন না, ব্রাউজার ও SEO বুঝে কোডের কাঠামো কী। এগুলো দিয়ে কোড পরিষ্কার হয়।
| Semantic Tag | কাজ |
|---|---|
<header> |
পেজের শিরোনাম অংশ |
<nav> |
মেনু বা নেভিগেশন |
<main> |
মূল কনটেন্ট |
<article> |
একটি নির্দিষ্ট কনটেন্ট ব্লক |
<section> |
কনটেন্টের আলাদা সেকশন |
<aside> |
সাইড কনটেন্ট বা বিজ্ঞাপন |
<footer> |
পেজের নিচের অংশ |
Semantic Layout উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Semantic ট্যাগ উদাহরণ</title>
</head>
<body>
<header>
<h1>আমার ব্লগ</h1>
</header>
<nav>
<a href="#">বাড়ি</a>
<a href="#">পোস্ট</a>
</nav>
<main>
<article>
<h2>প্রথম পোস্ট</h2>
<p>এটি আমার প্রথম পোস্ট।</p>
</article>
</main>
<aside>
<p>বিজ্ঞাপন: নতুন কোর্স শিখুন</p>
</aside>
<footer>
<p>Copyright © 2025</p>
</footer>
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
কীভাবে HTML টেবিল তৈরি করতে হয়
-
কীভাবে সারি ও কলাম বানাতে হয়
-
কীভাবে semantic tag ব্যবহার করে ওয়েবসাইটকে আরও গঠনমূলক করা যায়
পরবর্তী অধ্যায়:
অধ্যায় ৬: CSS পরিচিতি ও Syntax