HTML ট্যাগ হলো এমন কোড এলিমেন্ট যা HTML ডকুমেন্টে বিভিন্ন ধরণের কন্টেন্ট বা স্ট্রাকচার নির্ধারণ করতে ব্যবহৃত হয়। ট্যাগগুলো সাধারণত কোণাকৃতির বন্ধনী (< >) দিয়ে ঘেরা থাকে এবং ট্যাগের নামের মাধ্যমে ট্যাগটি কোন কাজের জন্য ব্যবহৃত হবে তা বোঝানো হয়। প্রতিটি ট্যাগের কাজ নির্দিষ্ট এবং তা অনুযায়ী HTML ডকুমেন্টে বিভিন্ন ধরণের কন্টেন্ট যেমন টেক্সট, ছবি, লিঙ্ক, তালিকা ইত্যাদি সংযোজন ও প্রদর্শনের জন্য ব্যবহৃত হয়।
HTML ট্যাগের প্রকারভেদ:
ওপেনিং এবং ক্লোজিং ট্যাগ:
অধিকাংশ HTML ট্যাগের দুটি অংশ থাকে: একটি
ওপেনিং ট্যাগ (<>) এবং একটি ক্লোজিং ট্যাগ (</>)।
ওপেনিং ট্যাগ যেমন `<p>` এবং ক্লোজিং
ট্যাগ যেমন `</p>`।
ওপেনিং ট্যাগের মাধ্যমে ট্যাগের কাজ শুরু
হয় এবং ক্লোজিং ট্যাগের মাধ্যমে কাজ শেষ হয়। ক্লোজিং ট্যাগে `/` থাকে, যা ট্যাগের
সমাপ্তি নির্দেশ করে।
উদাহরণ:
<p>This is a paragraph.</p>
এখানে কিছু সাধারণ ওপেনিং এবং ক্লোজিং ট্যাগের
তালিকা দেওয়া হলো:
|
টেক্সট ফরম্যাটিং ট্যাগ |
|
|
প্যারাগ্রাফ ট্যাগ |
<p>...</p> |
|
হ্যাডিং ট্যাগ |
<h1>...</h1>,
<h2>...</h2>, <h3>...</h3>, <h4>...</h4>,
<h5>...</h5>, <h6>...</h6> |
|
বোল্ড ট্যাগ |
<strong>...</strong>
বা <b>...</b> |
|
ইটালিক ট্যাগ |
<em>...</em>
বা <i>...</i> |
|
আন্ডারলাইন ট্যাগ |
<u>...</u> |
|
লিস্ট ট্যাগ |
|
|
আনঅর্ডারড লিস্ট ট্যাগ (বুলেট
পয়েন্ট লিস্ট) |
<ul>...</ul> |
|
অর্ডারড লিস্ট ট্যাগ (সংখ্যা বা
অক্ষর ভিত্তিক লিস্ট) |
<ol>...</ol> |
|
লিস্ট আইটেম ট্যাগ (উপরের দুইটি
লিস্টের জন্য ব্যবহার করা হয় |
<li>...</li> |
|
লিঙ্ক এবং ইমেজ ট্যাগ |
|
|
লিঙ্ক ট্যাগ |
<a
href="URL">...</a> |
|
ইমেজ ট্যাগ (এইটি একটি সিঙ্গেল
ট্যাগ তবে বেশিরভাগ সময় এটি ক্লোজিং ট্যাগ ছাড়াই ব্যবহার করা হয়) |
<img
src="image.jpg" alt="description"> |
|
টেবিল ট্যাগ |
|
|
টেবিল ট্যাগ |
<table>...</table> |
|
টেবিল রো ট্যাগ |
<tr>...</tr> |
|
টেবিল হেডার সেল ট্যাগ |
<th>...</th> |
|
টেবিল ডেটা সেল ট্যাগ |
<td>...</td> |
|
ফরম ট্যাগ |
|
|
ফরম ট্যাগ |
<form>...</form> |
|
ইনপুট ট্যাগ |
<input>
(এই ট্যাগের ক্লোজিং ট্যাগ থাকে না) |
|
টেক্সট এরিয়া ট্যাগ |
<textarea>...</textarea> |
|
সিলেক্ট ট্যাগ (ড্রপডাউন মেনু) |
<select>...</select> |
|
অপশন ট্যাগ (ড্রপডাউন মেনুর প্রতিটি
অপশন) |
<option>...</option> |
|
কন্টেইনার ট্যাগ |
|
|
ডিভিশন ট্যাগ |
<div>...</div> |
|
স্প্যান ট্যাগ |
<span>...</span> |
|
মিডিয়া ট্যাগ |
|
|
ভিডিও ট্যাগ |
<video>...</video> |
|
অডিও ট্যাগ |
<audio>...</audio> |
|
ডকুমেন্ট স্ট্রাকচার ট্যাগ |
|
|
HTML |
<html>...</html> |
|
Head Tag |
<head>...</head> |
|
Body Tag |
<body>...</body> |
সিঙ্গেল ট্যাগ (Self-closing Tag):
কিছু ট্যাগের ক্লোজিং ট্যাগ থাকে না, এগুলো
সিঙ্গেল ট্যাগ নামে পরিচিত।
যেমন <img> ট্যাগ শুধুমাত্র একক ট্যাগ
হিসেবে ব্যবহৃত হয়।
<img src="image.jpg" alt="example image" />
HTML-এ কিছু ট্যাগ থাকে যেগুলোর ক্লোজিং ট্যাগ
প্রয়োজন হয় না। এগুলোকে সিঙ্গেল ট্যাগ বা সেলফ-ক্লোজিং ট্যাগ বলা হয়। সাধারণত, এগুলোতে
শুধুমাত্র ওপেনিং ট্যাগ থাকে এবং ট্যাগের ভিতরে কোনো কন্টেন্ট থাকে না। এখানে কিছু
সাধারণ সিঙ্গেল ট্যাগের তালিকা দেওয়া হলো:
|
ব্রেক ট্যাগ: <br> |
|
ইমেজ ট্যাগ: <img
src="image.jpg" alt="description"> |
|
ইনপুট ট্যাগ: <input
type="text"> |
|
লিঙ্ক ব্রেক: <hr> |
|
মেটা ট্যাগ: <meta charset="UTF-8"> |
|
লিঙ্ক ট্যাগ: <link
rel="stylesheet" href="styles.css"> |
|
সোর্স ট্যাগ: <source
src="media.mp4" type="video/mp4"> |
|
ট্র্যাক ট্যাগ: <track
src="subtitles.vtt" kind="subtitles"
srclang="en" label="English"> |
|
এম্বেড ট্যাগ: <embed
src="file.swf"> |
নেস্টেড ট্যাগ:
একটি ট্যাগের ভিতরে আরেকটি ট্যাগ রাখা যায়।
উদাহরণস্বরূপ, একটি div ট্যাগের ভিতরে একাধিক p বা h1 ট্যাগ রাখা যেতে পারে।
<div>
<h1>Title</h1>
<p>This is a paragraph inside a div.</p>
</div>
উদাহরণ:
নেস্টেড ট্যাগ হলো এমন HTML ট্যাগ যা অন্য
ট্যাগের ভিতরে রাখা হয়। এখানে কিছু সাধারণ নেস্টেড ট্যাগের উদাহরণসহ তালিকা দেওয়া
হলো:
ডকুমেন্ট স্ট্রাকচার (<html> এর ভিতরে
<head> এবং <body> থাকে।)
<html>
<head>
<!-- Head content -->
</head>
<body>
<!-- Body content -->
</body>
</html>
লিস্ট ট্যাগ (<ul> বা <ol> এর
ভিতরে <li> থাকে।)
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
টেবিল ট্যাগ (<table> এর ভিতরে
<tr>, <th>, এবং <td> থাকে।)
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
ডিভ এবং স্প্যান ট্যাগ (<div> এবং
<span> এর ভিতরে যেকোনো ট্যাগ রাখা যায়।)
<div>
<h1>Title</h1>
<p>Paragraph inside div.</p>
</div>
লিংক ট্যাগ (<a> ট্যাগের ভিতরে
<img>, <span>, <div>, এবং অন্যান্য ট্যাগ রাখা যায়।)
<a href="https://notesaid24.com">
<img src="image.jpg" alt="Example Image" />
</a>
ফরম ট্যাগ (<form> এর ভিতরে
<input>, <textarea>, <select>, <button> এবং অন্যান্য ফরম
এলিমেন্ট থাকে।)
<form>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
মিডিয়া ট্যাগ (<video> এর ভিতরে
<source> এবং <track> থাকে।)
<video controls>
<source src="video.mp4" type="video/mp4" />
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />
</video>
এই নেস্টেড ট্যাগগুলো বিভিন্ন ট্যাগের সমন্বয়ে
HTML ডকুমেন্টের গঠন তৈরি করতে ব্যবহৃত হয়।
HTML ট্যাগগুলো ওয়েব পেজের বিভিন্ন অংশের
কার্যক্ষমতা এবং স্টাইল নির্ধারণে গুরুত্বপূর্ণ ভূমিকা পালন করে।
