এইচটিএমএল ট্যাগসমূহ (HTML Tags)

১. ভূমিকা — সুমাইয়া একটা ম্যাগাজিন বানাচ্ছে

সুমাইয়া MS Word-এ স্কুল ম্যাগাজিন বানাচ্ছে। সে একটা লাইনকে শিরোনাম বানাতে চাইল — তাই সেটা select করে "Heading" বোতাম চাপল। আরেকটা লাইনকে bold করল।

সে চোখে দেখে বোঝে কোনটা শিরোনাম, কোনটা সাধারণ লেখা।

কিন্তু একটা প্রশ্ন — Browser তো মানুষের চোখ নয়। তাকে একটা text file দিলে সে কীভাবে বুঝবে কোনটা শিরোনাম, কোনটা অনুচ্ছেদ, কোনটা তালিকা?

উত্তর: Tag (ট্যাগ)। Tag হলো সেই চিহ্ন যা দিয়ে আমরা browser-কে বলে দিই — "এটা শিরোনাম", "এটা অনুচ্ছেদ"।

২. সমস্যা — Browser-কে content-এর মানে বোঝাব কীভাবে?

ধরো একটা text file-এ লেখা:

আমার স্কুল
এটা একটা সুন্দর প্রতিষ্ঠান।
বাংলা ইংরেজি গণিত

Browser বুঝবে না — "আমার স্কুল" কি শিরোনাম? "বাংলা ইংরেজি গণিত" কি একটা তালিকা?

আসল সমস্যা: সাধারণ text-এ content-এর কোনো "অর্থ" বা "ভূমিকা" নেই। Browser-কে জানাতে হবে — কোন অংশ কী।

সমাধান — প্রতিটি content-কে Tag দিয়ে চিহ্নিত (mark) করা। এটাই HTML-এর মূল কাজ — Markup (চিহ্নিতকরণ)।

৩. চিত্রের মাধ্যমে বোঝো

একটি HTML Tag-এর গঠন:

   <p>  এটা একটা অনুচ্ছেদ  </p>
   └┬┘  └──────┬───────┘  └┬─┘
 Opening    Content      Closing
   Tag                     Tag

   পুরোটা একসাথে = Element (এলিমেন্ট)

< ও > — এই কোণ-বন্ধনী (angle bracket) দিয়ে tag লেখা হয়।

৪. বাস্তব জীবনের সাথে মিল

পার্সেলের লেবেলের সাথে তুলনা করো:

কুরিয়ারে পার্সেল পাঠানোর সময় বাক্সের গায়ে লেবেল লাগাও — "ভঙ্গুর", "উপরের দিক", "প্রাপক"।

লেবেল না থাকলে কুরিয়ার বুঝবে না কীভাবে সামলাবে।

Tag হলো content-এর গায়ের লেবেল — browser লেবেল দেখে বোঝে কীভাবে দেখাবে।

Module 1: সংজ্ঞা ও মৌলিক ধারণা

HTML Tag কী?

Tag (ট্যাগ) হলো HTML-এর মূল গাঁথুনি (building block) — কোণ-বন্ধনী < >-এর ভেতরে লেখা একটি কীওয়ার্ড, যা browser-কে বলে দেয় content-টির ভূমিকা কী এবং কীভাবে দেখাতে হবে।

Tag, Element ও Content — পার্থক্য

শব্দ	মানে	উদাহরণ
Tag	`< >`-এর ভেতরের চিহ্ন	`<p>` বা `</p>`
Content	tag-এর ভেতরের লেখা	এটা অনুচ্ছেদ
Element	opening tag + content + closing tag — পুরোটা	`<p>এটা অনুচ্ছেদ</p>`

Module 2: Tag-এর প্রকারভেদ

Paired Tag (জোড়া ট্যাগ)

opening ও closing — দুটো tag থাকে। closing tag-এ একটি / থাকে।

<h1>শিরোনাম</h1>
<p>অনুচ্ছেদ</p>

Unpaired / Void Tag (একক / স্বয়ংবন্ধ ট্যাগ)

closing tag নেই — শুধু একটি tag।

<br>     ← নতুন লাইন (line break)
<hr>     ← অনুভূমিক রেখা (horizontal rule)
<img>    ← ছবি

ধরন	closing tag	উদাহরণ
Paired	আছে	`<p></p>`, `<h1></h1>`
Void	নেই	`<br>`, `<hr>`, `<img>`

Module 3: Attribute কী?

Attribute (অ্যাট্রিবিউট) হলো tag-এর অতিরিক্ত তথ্য, যা opening tag-এর ভেতরে লেখা হয়।

<img src="photo.jpg" alt="আমার ছবি" width="300">
     └─┬─────────┘ └─┬──────────┘ └─┬──────┘
     attribute     attribute      attribute

   প্রতিটির গঠন:  name="value"

এখানে src, alt, width — attribute-এর নাম; "photo.jpg" ইত্যাদি — value (মান)।

Module 4: Nesting — Tag-এর ভেতরে Tag

একটি tag-এর ভেতরে আরেকটি tag রাখাকে Nesting (নেস্টিং) বলে। নিয়ম — যেটা শেষে খোলে, সেটা আগে বন্ধ হয় (LIFO — Last In First Out)।

✅ সঠিক:  <b><i>মোটা ও তির্যক</i></b>
❌ ভুল:   <b><i>মোটা ও তির্যক</b></i>

ভুল nesting করলে browser বিভ্রান্ত হয় এবং ভুল দেখাতে পারে।

বাক্সের ভেতরে বাক্সের মতো: বড় বাক্সের ভেতরে ছোট বাক্স রাখলে — ছোটটা আগে বন্ধ করতে হয়, তারপর বড়টা।

Module 5: HSC সিলেবাসের গুরুত্বপূর্ণ Tag

Heading Tag (h1–h6)

শিরোনামের জন্য। h1 সবচেয়ে বড় ও গুরুত্বপূর্ণ, h6 সবচেয়ে ছোট।

<h1>সবচেয়ে বড় শিরোনাম</h1>
<h2>দ্বিতীয় স্তর</h2>
<h6>সবচেয়ে ছোট শিরোনাম</h6>

Paragraph Tag (p)

অনুচ্ছেদের জন্য — HTML-এর সবচেয়ে বেশি ব্যবহৃত tag।

<p>এটা একটি অনুচ্ছেদ।</p>

Line Break (br) ও Horizontal Rule (hr)

<p>প্রথম লাইন<br>দ্বিতীয় লাইন</p>
<hr>

  নতুন লাইনে নেয়; <hr> একটি অনুভূমিক রেখা আঁকে। দুটোই void tag।

Text Formatting Tag

Tag	কাজ	উদাহরণ
`<b>`	Bold — শুধু মোটা দেখায়	`<b>মোটা</b>`
`<strong>`	Bold + গুরুত্বপূর্ণ (অর্থবহ)	`<strong>জরুরি</strong>`
`<i>`	Italic — শুধু তির্যক	`<i>তির্যক</i>`
`<em>`	Italic + জোর (অর্থবহ)	`<em>জোর</em>`
`<u>`	Underline — নিম্নরেখা	`<u>রেখা</u>`
`<sub>`	Subscript — নিচে	H<sub>2</sub>O
`<sup>`	Superscript — উপরে	x<sup>2</sup>

 vs : দুটোই মোটা করে, কিন্তু  browser ও screen reader-কে বলে "এটা গুরুত্বপূর্ণ"।  শুধু চেহারা বদলায়, কোনো অর্থ দেয় না। একইভাবে  vs ।

List Tag (ul, ol, li)

<ul>                  <ol>
  <li>ভাত</li>          <li>পানি ফুটাও</li>
  <li>মাছ</li>          <li>চা পাতা দাও</li>
</ul>                 </ol>

<ul> = bullet তালিকা, <ol> = সংখ্যাযুক্ত তালিকা, <li> = প্রতিটি item।

Comment Tag

<!-- এটা একটি comment। browser দেখাবে না। -->

Comment হলো developer-এর নিজের জন্য নোট — browser পর্দায় দেখায় না।

Module 6: একটি সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>আমার পাতা</title>
</head>
<body>
  <h1>আমার স্কুল</h1>
  <p>এটি একটি <strong>সেরা</strong> প্রতিষ্ঠান।</p>
  <hr>
  <h2>বিষয়সমূহ</h2>
  <ul>
    <li>বাংলা</li>
    <li>ICT</li>
  </ul>
  <!-- নিচে আরও content যোগ হবে -->
</body>
</html>

Module 7: সাধারণ ভুল ও সতর্কতা

ভুল ১: closing tag ভুলে যাওয়া

❌ <p>অনুচ্ছেদ        ✅ <p>অনুচ্ছেদ</p>

ভুল ২: void tag বন্ধ করার চেষ্টা

  ঠিক;  লেখার দরকার নেই — এটা void tag।

ভুল ৩: ভুল nesting

❌ <b><i>লেখা</b></i>    ✅ <b><i>লেখা</i></b>

ভুল ৪: size বড় করতে heading tag ব্যবহার

<h1> শুধু গুরুত্ব বোঝায়, font size বদলাতে CSS ব্যবহার করো।

Module 8: সুবিধা-অসুবিধা

বিষয়	সুবিধা	অসুবিধা
Semantic tag (`<strong>`)	অর্থবহ, SEO ও accessibility ভালো	একটু বেশি ভাবতে হয়
Visual tag (`<b>`)	সহজ, দ্রুত	কোনো অর্থ দেয় না
Comment	code বোঝা সহজ	বেশি হলে file বড় হয়
Nesting	জটিল structure সম্ভব	ভুল করলে render ভাঙে

🔁 নিজে পরীক্ষা করো

MCQ:

১. HTML tag কোন চিহ্নের ভেতরে লেখা হয়?

ক) { }
খ) < > ✓
গ) ( )
ঘ) [ ]

২. নিচের কোনটি void (unpaired) tag?

ক) 
খ) <h1>
গ)   ✓
ঘ) <ul>

৩. opening tag + content + closing tag — পুরোটাকে বলে —

ক) Attribute
খ) Element ✓
গ) Comment
ঘ) Nesting

৪. কোন tag content-কে "গুরুত্বপূর্ণ" (semantic) হিসেবে চিহ্নিত করে?

ক) 
খ)  ✓
গ) 
ঘ)

৫. Attribute-এর সঠিক গঠন কোনটি?

ক) name="value" ✓
খ) value="name"
গ) name:value
ঘ) {name=value}

সংক্ষিপ্ত প্রশ্ন:

৬. Paired ও Void tag-এর পার্থক্য উদাহরণসহ লেখো।

৭.  ও  tag-এর পার্থক্য কী?

📝 HSC পরীক্ষার প্রস্তুতি

১. Tag, Element ও Attribute — তিনটি আলাদা করে উদাহরণসহ ব্যাখ্যা করো।

২. HTML-এ Nesting কী? সঠিক ও ভুল nesting-এর উদাহরণ দাও।

৩. ordered ও unordered list-এর পার্থক্য কী? কখন কোনটি ব্যবহার করবে?

💡 পরীক্ষার টিপস:  vs  এবং  vs  — semantic vs visual পার্থক্য পরীক্ষায় প্রিয় প্রশ্ন।

🎯 অনুশীলন প্রশ্ন

সহজ: ৩টি heading, ১টি অনুচ্ছেদ ও ১টি bullet তালিকা দিয়ে একটি HTML কোড লেখো।

মাঝারি: নিচের ভুল কোডটি ঠিক করো:

<p><b>আমার <i>স্কুল</b></i>

কঠিন: H₂SO₄ এবং (a+b)² — এই দুটি লেখা HTML-এ সঠিক tag দিয়ে কীভাবে দেখাবে?

✅ সারাংশ

🎯 মনে রেখো:

Tag = < >-এর ভেতরের চিহ্ন যা content-এর ভূমিকা বোঝায়
Element = opening tag + content + closing tag (পুরোটা)
Paired tag → closing আছে (); Void tag → closing নেই ( , <hr>, <img>)
Attribute = tag-এর অতিরিক্ত তথ্য, গঠন name="value"
Nesting → LIFO নিয়ম: শেষে খোলা tag আগে বন্ধ
Semantic (, ) অর্থ দেয়; Visual (, ) শুধু চেহারা বদলায়
গুরুত্বপূর্ণ tag: h1–h6, p, br, hr, b/strong, i/em, u, sub, sup, ul/ol/li, comment