HTML এ Tag এর ধরন ও প্রকৃতি এবং এদের বিস্তারিত ব্যাখ্যা !

পুর্বের অধ্যায়ে আমরা জেনেছি HTML কি এবং HTML কেন শিখবেন? আশা করি আপনারা এসম্পর্কে একটা পরিস্কার ধারনা পেয়েছেন। আমরা যারা অনলাইনে আছি তারা হয়ত HTML জানিনা কিন্তু HTML এর বিভিন্ন ডকুমেন্ট তো দেখেছি! আমরা একটু ভাল করে লক্ষ্য করলেই দেখতে পাব < - >.......</-> বা <-/> এই ধরনের কিছু চিহ্ন দেখেতে পাই। এগুলোর মধ্যে বিভিন্ন নির্দেশনা দেওয়া থাকে যেমন: <h1>........</h1> এই সকল চিহ্ন সম্বলিত নিদের্শনাকে এক কথায় Tag বলা হয়। Tag হল HTML ডকুমেন্ট এ সরাসরি  Embed করা কিছু নির্দেশনা যারা একটি টেক্সকে সাধারন ভাবে উপস্থাপন করার পরিবর্তে সেটাকে একটি নির্দিষ্ট ফরম্যাটে উপস্থাপন করতে ব্রাউজারকে নির্দেশ করা হয়। HTML ট্যাগ সাধারনতঃ শুরু হয় ‘< ’দিয়ে এবং শেষ হয়  ‘>’  দিয়ে। HTML এ বিভিন্ন নির্দেশনা সম্বলিত Tag পরিলক্ষিত হলেও এদের ধরন ও প্রকৃতিতে সরলীকরণ করে একে প্রকাশ করা যায়। তাই এদের ধরন ও বৈশিষ্ট্যের দিক হতে Tag দু’ধরনের যথা:

১.  ডাবল ট্যাগ (Double or Paired Tag)
২. সিঙ্গেল ট্যাগ (Single or Unpaired Tag)

ডাবল ট্যাগ (Double or Paired Tag)

একটি ট্যাগকে তখনই ডা্বল ট্যাগ বলা হয় যখন কোন টেক্সটকে একই নির্দেশনা সম্বলিত দুটি ট্যাগের মাঝখানে রাখা হয়। যেমন <h1> আমাদের দেশ </h1> । এখানে একই নিদের্শনা সম্বলিত দুটি ট্যাগ পরিলক্ষিত হচ্ছে কারন এর মাঝে h1  লেখা আছে। এখানে প্রথম <h1> কে ‍স্টার্টিং ট্যাগ  এবং শেষের </h1> কে  ক্লোজিং ট্যাগ বলে। এই ট্যাগ সর্বদা জোড়ায় জোড়ায় অবস্থান করে বলেই একে Double or Paired Tag বলে। উপরের Double or Paired Tag দারা ’আমাদের দেশ’ কথাটিকি বড় করে Heading আকারে ডিস্প্লে করতে ব্রাউজারকে নির্দেশ দেওয়া হচ্ছে। এ সম্পর্কে আমরা বিস্তারিত পরে জানব।

উদারহরণঃ

<p> আমাদের দেশটাকে কত ভাল বাসি, সবুজ ঘাসের বুকে শেফালীর হাসি</p>

সিঙ্গেল ট্যাগ (Single or Unpaired Tag)

Unpaired Tag এর কোন Companion tag থাকেনা। এই ধরনের ট্যাগকে সিঙ্গেল ট্যাগ(Singular Tag) বা Stand Alone Tags ও বলা হয়ে থাকে।

উদাহরণ:

<link/>  ,      <br/> ,     <hr/> ,                                             

এখানে উপরোল্লিখিত ট্যাগসমুহ এক একটি সিঙ্গেল ট্যাগ। এদের কোন Companion ট্যাগ নেই।

HTML Tag কোথায় এট্রিবিউট লিখতে বা ঘোষনা করতে হয়?

এবিষষটি আলোচনার আগে আমাদের এট্রিবিউট কি তা জানা আবশ্যক। এটি জানতে নিচের উদাহরণটি আগে ভাল করে লক্ষ করুন।

<link href="style.css" rel="stylesheet" type="text/css"/>

এখানে উপরের উদাহরণে ‘=’ চিহ্নের বামের অংশটুকুকে এট্রিবিউট(Attribute) এবংডান পাশে “   ” চিহ্ন র মাঝখানের  অংশটুকুকে প্যারামিটার (parameter) বলে।

এবার নিচের উদাহরণটি ভালভাবে লক্ষ্য করুন:

<span style="background-color: #f3f3f3;"> আমাদের দেশ </span> 

উপরের উদাহরণে প্রথমটি সিঙ্গেল ট্যাগ এবং দ্বিতীয়টি ডাবল ট্যাগ। একটু ভাল ভাবে লক্ষ্য করুন দেখুন সিংঙ্গেল ট্যাগ নেম এর ঠিক পরে একটি স্পেস দিয়ে এবং ডাবল ট্যাগ নেম এ প্রথম ট্যাগ নেম এর ঠিক পরে একটি স্পেস দিয়ে Attribute দেওয়া হয়েছে।

ব্যবহার ভেদে বিভিন্ন প্রকার ট্যাগসুমহ: 

HTML ট্যাগসমুহকে এর ব্যবহারের ভিত্তিতে আমরা শ্রেনীকরন করতে পারি। এদিক দিয়ে বিবেচনা করলে আমরা ট্যাগ সমুহকে তিন শ্রেনীকে ভাগ করতে পারি। যথা:

১. ফরম্যাটিং ট্যাগ(Formatting Tags):

যে সকল ট্যাগ ব্যবহার করে টেক্সট কে বিভিন্ন ফরম্যাট দেওয়া হয় যেমন কোন টেক্সটকে বোল্ড করা, ইটালিক করা, আন্ডারলাইন করা ইত্যাদি কাজ করা হয় তাদের ফরম্যাটিং ট্যাগ বলা হয়। যেমন: <font>, <u>,<b>  ইত্যাদি।

২. পেজ ‍স্ট্রাকচার (Page Structure Tags)ট্যাগ: 

Description , title , head , body ইত্যাদি ট্যাগ হল পেজ স্ট্রাকচার ট্যাগ যা দ্বারা একটি এইচটিএমএল পেজকে তার বিভিন্ন গঠন দেওয়া হয়।  এগুলো ব্যাসিক HTML  পেজ এর একটি অংশ যা কখনোই সরাসর কোন টেক্সট বা ইমেইজ কে প্রভাবিত করেনা। 

৩. কন্ট্রোল (Control Tags)ট্যাগ: 

Form tags, Script tags, Radio buttons হল এই Control Tags উদাহরণ। 

- কিছু প্রয়োজনীয় HTML ট্যাগ যা আপনাদের কাজে লাগবেই -

Tag	Description	DTD
<!–…–>	মন্তব্য করার জন্য	STF
<!DOCTYPE>	HTML ডকুমেন্টের ধরণ নির্ধারণ করার জন্য	STF
<a>	লিংক দেওয়ার জন্য	STF
<abbr>	abbreviation দেওয়ার জন্য	STF
<acronym>	acronym দেওয়ার জন্য	STF
<address>	HTML ডকুমেন্টের লেখক/Author এর তথ্য দেওয়ার জন্য	STF
<applet>	applet এম্বেড করার জন্য	TF
<area />	image-map এরিয়া করার জন্য	STF
<b>	লেখা বোল্ড করার জন্য	STF
<base />	Specifies the base URL/target for all relative URLs in a document	STF
<basefont />	ফন্ট সাইজ ও কালার নির্ধারণ করার জন্য	TF
<bdo>	Overrides the current text direction	STF
<big>	বড় লেখার জন্য	STF
<blockquote>	উক্তি/ quotation দেওয়ার জন্য	STF
<body>	বডি দেওয়ার জন্য	STF
<br />	লাইন ব্রেক করার জন্য	STF
<button>	বাটন আনার জন্য	STF
<caption>	ক্যাপশন দেওয়ার জন্য	STF
<center>	লেখার মাঝখানে নেওয়ার জন্য	TF
<cite>	Defines a citation	STF
<code>	কোড শো করার জন্য	STF
<col />	টেবিলের মধ্যে কলাম নেওয়ার জন্য	STF
<colgroup>	Specifies a group of one or more columns in a table for formatting	STF
<dd>	Defines a description of an item in a definition list	STF
<del>	কোন লেখা মোছার জন্য	STF
<dfn>	Defines a definition term	STF
<dir>	ডাইরেক্টরী লিস্ট আনার জন্য	TF
<div>	Defines a section in a document	STF
<dl>	Defines a definition list	STF
<dt>	Defines a term (an item) in a definition list	STF
<em>	Defines emphasized text	STF
<fieldset>	Groups related elements in a form	STF
<font>	লেখার আকার, রং নির্ধারণ এর জন্য	TF
<form>	ফর্ম আনার জন্য	STF
<frame />	Defines a window (a frame) in a frameset	F
<frameset>	Defines a set of frames	F
<h1> to <h6>	হোডিং আনার জন্য	STF
<head>	হেড আনার জন্য	STF
<hr />	একটি লাইন আনার জন্য	STF
<html>	ডকুমেন্টটি কোন ধরনের তা শো করার জন্য	STF
<i>	লেখা ইটালিক করার জন্য	STF
<iframe>	আইফ্রেম আনার জন্য	TF
<img />	ছবি আনার জন্য	STF
<input />	ইনপুট ফর্ম আনার জন্য	STF
<ins>	Defines text that has been inserted into a document	STF
<kbd>	Defines keyboard input	STF
<label>	Defines a label for an <input> element	STF
<legend>	Defines a caption for a <fieldset> element	STF
<li>	Defines a list item	STF
<link />	Defines the relationship between a document and an external resource	STF
<map>	Defines a client-side image-map	STF
<menu>	Deprecated. Defines a menu list	TF
<meta />	Defines metadata about an HTML document	STF
<noframes>	Defines an alternate content for users that do not support frames	TF
<noscript>	Defines an alternate content for users that do not support client-side scripts	STF
<object>	Defines an embedded object	STF
<ol>	Defines an ordered list	STF
<optgroup>	Defines a group of related options in a drop-down list	STF
<option>	Defines an option in a drop-down list	STF
<p>	Defines a paragraph	STF
<param />	Defines a parameter for an object	STF
<pre>	Defines preformatted text	STF
<q>	Defines a short quotation	STF
<s>	Deprecated. Defines strikethrough text	TF
<samp>	Defines sample output from a computer program	STF
<script>	Defines a client-side script	STF
<select>	Defines a drop-down list	STF
<small>	Defines smaller text	STF
<span>	Defines a section in a document	STF
<strike>	Deprecated. Defines strikethrough text	TF
<strong>	Defines strong text	STF
<style>	Defines style information for a document	STF
<sub>	Defines subscripted text	STF
<sup>	Defines superscripted text	STF
<table>	Defines a table	STF
<tbody>	Groups the body content in a table	STF
<td>	Defines a cell in a table	STF
<textarea>	Defines a multiline input control (text area)	STF
<tfoot>	Groups the footer content in a table	STF
<th>	Defines a header cell in a table	STF
<thead>	Groups the header content in a table	STF
<title>	Defines a title for the document	STF
<tr>	Defines a row in a table	STF
<tt>	Defines teletype text	STF
<u>	Deprecated. Defines underlined text	TF
<ul>	Defines an unordered list	STF
<var>	Defines a variable	STF
<xmp>	Deprecated. Defines preformatted text