ইন্টারনেটের জগতে এইচটিএমএল এর গুরুত্ব সবথেকে বেশি যেকোনো। ওয়েবপেজে যদি একটি উপাদান দেখাতে হয় তবে অবশ্যই এইচটিএমএল এর প্রয়োজন হবে। ওয়েবসাইটের মাধ্যমে আপনি যে তথ্যগুলো এই মুহূর্তে দেখছেন সেগুলো কিন্তু এইচটিএমএল এর মাধ্যমে সম্ভব হয়েছে। এটি মূলত ব্রাউজারের মাধ্যমে কাজ করে থাকে এবং বিভিন্ন জিনিস কে আমাদের সামনে তুলে ধরার জন্য এইচটিএমএল এর গুরুত্ব অনেক বেশি।
আপনি যদি একজন ওয়েব ডেভলপার হতে চান তবে অবশ্যই আপনাকে এইচটিএমএল সম্পর্কে ধারণা লাভ করতে হবে। সেক্ষেত্রে এইচটিএমএল ট্যাগগুলোও সম্পর্কে আপনার পরিষ্কার ধারণা থাকাটা অনেক বেশি গুরুত্বপূর্ণ।
এছাড়া এইচএসসি তথ্য ও যোগাযোগ প্রযুক্তি চতুর্থ অধ্যায়ের জন্য এইচটিএমএল ট্যাগ গুলো জানা অনেক গুরুত্বপূর্ণ। কারণ প্রতি বছরই এই অধ্যায় থেকে প্রশ্ন করা হয়ে থাকে এবং প্রশ্নগুলোর উত্তর করার জন্য HTML tag সম্পর্কে ধারণা থাকাটা গুরুত্বপূর্ণ। যখন আপনার ট্যাগ সম্পর্কে ধারণা থাকবে, আপনি খুব সহজে প্রশ্নগুলোর উত্তর দিতে পারবেন। অথবা প্রশ্ন গুলো কিভাবে উত্তর করা যায় সে সম্পর্কে ধারণা লাভ করতে পারবেন।
এই আর্টিকেলটির মধ্যে আমরা এইচটিএমএল এর সকল ধরনের ট্যাগ, যেগুলো অনেক বেশি পরিমাণে ব্যবহৃত হয় সেগুলোকে আমরা একত্রিত করেছি। এবং কিভাবে সেগুলো কে ব্যবহার করা হয় সেই সম্পর্কেও আমরা ধারণা দিতে চলেছি। আর বিভিন্ন উদাহরণের মাধ্যমে আমরা আপনাদের পরিষ্কার করে জানিয়ে দেবো কিভাবে HTML tag গুলোকে আমরা ব্যবহার করতে পারি।
HTML Tag কি?
ট্যাগ হচ্ছে এইচটিএমএল এর একটি মৌলিক বিষয়। এইচটিএমএল এ কৌণিক ব্রাকেট (<> এবং </>) এবং এর মধ্যে লেখা' শব্দ যেমন, head, body, html ইত্যাদি শব্দ গুলোকে keyword বলা হয়। কৌণিক ব্রাকেট এর মাঝে লেখা প্রতিটি keyword কে একসাথে ট্যাগ বা এইচটিএমএল ট্যাগ বলে।
প্রতিটি কাজের জন্য আলাদা আলাদা এইচটিএমএল ট্যাগ রয়েছে যেগুলো দ্বারা আমরা কোন একটি কাজ ব্রাউজারকে করার জন্য নির্দেশ দিতে পারি বা কোন একটা ডিজাইনকে ব্রাউজার কে দেখানোর জন্য নির্দেশ দিতে পারি। যেমন, ওয়েবপেজে ছবি দেখানোর জন্য এক ধরনের ট্যাগ ব্যবহার করা হয়ে থাকে আবার লিংক দেখানোর জন্য অন্য ধরনের HTML tag ব্যবহার করা হয়ে থাকে।
এইচটিএমএল ট্যাগ মূলত দুই ধরনের হতে পারে, কনটেইনার ট্যাগ এবং এমটি ট্যাগ। কনটেইনার ট্যাগ এর শুরু এবং শেষ ট্যাগ থাকে। ডকুমেন্ট ফরম্যাটিং এর জন্য এই ধরনের ট্যাগ ব্যবহার করা হয়। এমটি ট্যাগ এর শুরুতে থাকে কিন্তু শেষ ট্যাগ থাকেনা। চলুন বিভিন্ন এইচটিএমএল ট্যাগ সম্পর্কে জেনে নেওয়া যাক।
<html></html> ট্যাগ:
এটি মূলত ব্যবহৃত হয় পুরো এইচটিএমএল ডকুমেন্টকে নির্দেশ করার জন্য। অর্থাৎ একটি এইচটিএমএল ডকুমেন্ট এর মধ্যে শুরু এবং শেষ নির্ধারণ করার জন্য মূলত এটি ব্যবহার করা হয়। এর মাধ্যমে ব্রাউজারকে বুঝানো হয় যে অংশটুকু এই ট্যাগ এর মধ্যে রয়েছে সেটাকে এইচটিএমএল হিসাবে গণ্য করার জন্য।
<head></head> ট্যাগ:
এটাকে মূলত ব্যবহার করা হয় বিভিন্ন মেটাডাটা কে নির্দেশ করার জন্য। ওয়েব পেজের নাম ওয়েবপেজে বিভিন্ন ধরনের ফাইল যুক্ত করা ইত্যাদির জন্য মূলত এই সেকশনটিকে ব্যবহার করা হয়। এই সেকশন এর মাধ্যমে বোঝানো হয়ে থাকে যে ওয়েবসাইটটার নাম কি। এছাড়া বিভিন্ন এক্সটার্নাল সিএসএস, জাভাস্ক্রিপ্ট যুক্ত করার জন্য এই অংশটি অনেক বেশি গুরুত্বপূর্ণ ভূমিকা পালন করে। বলতে গেলে ওয়েবসাইটের জন্য মাথা স্বরূপ হচ্ছে এই ট্যাগটি।
<title></title> ট্যাগ:
এই অংশটি মূলত ব্যবহার করা হয়ে থাকে একটি ওয়েব পেজের নাম নির্ধারণ করার জন্য। এটির মধ্যে যে নামটি দেওয়া হয় সেই নামটি মূলত ব্রাউজারে দেখানো হয়ে থাকে। এ ছাড়া আমরা যেকোন পেইজের যে নামটা দেখতে পাই সেটাও মূলত এখানে লেখা হয়। তবে ফাইল নেম আর এই টাইটেল নেম এক নাও হতে পারে।
<body></body> ট্যাগ:
একজন ইউজার ওয়েবপেজে যে সকল বিষয় দেখতে পান তার সবকিছুই মূলত এখানে থাকে। এটা মূলত একটি পেজের সকল ধরনের কনটেন্ট এর ধারক।
Heading tag:
এইচটিএমএল এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। এইচটিএমএল এর মোট ছয় ধরনের হেডিং ট্যাগ রয়েছে।<h1> থেকে <h6> পর্যন্ত বিস্তৃত। সবচেয়ে বড় সাইজের শিরোনাম লেখার প্রয়োজন হয় তবে <h1></h1> এর মাঝে লেখা হয়। এভাবে পর্যায়ক্রমে সবচেয়ে ছোট অক্ষর প্রদর্শন করা যায় <h6></h6> এর মাধ্যমে।
<div></div> ট্যাগ:
এই ট্যাগটির মাধ্যমে আমরা একটি ওয়েবসাইটকে বিভিন্ন সেকশনে বিভক্ত করতে পারি। সেই বিভক্ত কৃত অবস্থানগুলোতে আমরা চাইলে বিভিন্ন ধরনের স্টাইল যুক্ত করতে পারি বা ডিজাইন যুক্ত করতে পারি। যদিও এই অংশটি কে মূলত বেশি ব্যবহার করা হয় সিএসএস এর জন্য। অনেক সুন্দর করে পেজের ডিজাইন গড়ে তোলার জন্য এর প্রয়োজনীয়তা অনেক বেশি।
<p><p> ট্যাগ:
প্যারাগ্রাফ ট্যাগ একটি ওয়েবসাইটের জন্য অনেক গুরুত্বপূর্ণ। কোন লেখাকে প্যারাগ্রাফ আকারে তুলে ধরার জন্য আমাদেরকে অবশ্যই প্যারাগ্রাফ ট্যাগ ব্যবহার করতে হবে। এই ট্যাগের মাধ্যমে আমরা নির্দেশ করতে পারি কোন একটি লেখা প্যারাগ্রাফ আকারের থাকার জন্য।
প্যারাগ্রাফ ট্যাগ ব্যবহার না করলে যেকোনো লেখাকে নরমাল টেক্সট আকারে ধরা হয়। কিন্তু যখন প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয় তখন সেই টেক্সট টাকে মূলত একটি প্যারাগ্রাফ আকারে ধরা হয়। প্যারাগ্রাফ আকারে ধরার ফলে যেকোনো সার্চ ইঞ্জিন বুঝতে পারে যে এই লেখাটি মূলত একটি প্যারাগ্রাফ এর অংশ। লেখাকে ফরমেটিং করার জন্য এর গুরুত্ব অনেক বেশি।
<br/> ট্যাগ:
যেকোনো এলিমেন্ট এর মধ্যে ব্রেক পয়েন্ট ভাঙ্গা অংশ নির্ধারণ করার জন্যই মূলত এটাকে ব্যবহার করা হয়ে থাকে। ধরুন আপনি কোন একটা লেখা লিখছেন এবং সেই লেখার মধ্যে আপনি একটি লাইনের থেকে অন্য একটা লাইনে যেতে চাচ্ছে এবং মাঝখানে আপনি গ্যাপ রাখতে চাচ্ছেন বা ব্রেক দিতে চাচ্ছেন সেই ক্ষেত্রে আপনি এই ট্যাগটি ব্যবহার করতে পারেনা
<img/> ট্যাগ:
যে কোন ওয়েব পেজে ছবির গুরুত্ব অনেক বেশি। এর মাধ্যমে ইউজারকে খুব কম জিনিসের মধ্যে অনেক বেশি তথ্য দেওয়া হয় এবং ইউজারের আকর্ষণ বৃদ্ধির জন্য ছবির গুরুত্ব অনেক বেশি। ছবি দেখানোর জন্য মূলত ইমেজ ট্যাগকে ব্যবহার করা হয়ে থাকে। এর মধ্যে বেশকিছু জিনিস থাকে যেগুলোর মাধ্যমে একটি ছবিকে লোড করা হয়, ছবিটির নাম দেওয়া হয়, এবং ছবিটিকে মূলত বিভিন্ন রোবট এর জন্য বোধগম্য করা হয়।
src=”url” এর মধ্যে থাকে ছবির লোকেশন, alt=”text” এর মাধ্যমে ছবির বিষয়ে রোবট ও slow internet ব্যাবহার করা ইউজার কে ধারনা দেওয়া হয়। height=”” ও width=”” এর মাধ্যমে মূলত ছবির আকার ঠিক করা হয়।
<form></form> ট্যাগ:
এর মাধ্যমে মূলত আমরা ওয়েব পেজে বিভিন্ন ধরনের ফ্রম যুক্ত করতে পারি। যেখানে আমরা ইউজার থেকে বিভিন্ন ইনপুট নিতে পারি। এবং সেটাকে ইউজারের এর মাধ্যমে সেন্ড করতে পারি। কোন একটি নির্দিষ্ট স্থানে বা আমরা নিজেদের ওয়েব সার্ভারে সেটাকে সংযুক্ত করে নিতে পারি। সেই তথ্যগুলো স্টোর করে রাখার জন্য আমাদেরকে ব্যবহার করতে হয় বিভিন্ন ধরনের প্রোগ্রামিং ল্যাংগুয়েজের যেমন, পিএইচপি এবং জাভাস্ক্রিপ্ট।
<table></table> ট্যাগ:
টেবিল ওয়েবসাইটের জন্য অনেক গুরুত্বপূর্ণ একটি অবদান রাখে। কারণ টেবিল এর মাধ্যমে খুব সহজে আমরা অনেক বেশি পরিমাণে তথ্য একজন ইউজারকে দিতে পারি এর ফলে আমরা খুব সহজেই অল্প স্থানের মধ্যে এবং কম সময়ের মধ্যে ইউজারকে বেশি পরিমাণে তথ্য দিয়ে সাহায্য করতে পারি। একটি টেবিল তৈরি করার জন্য মূলত table tag কে ব্যবহার করা হয় এর মধ্যে আমরা আরো বেশ কিছু ট্যাগ ব্যাবহার করা হয়।
<caption></caption> দিয়ে মুলত আমরা একটি টেবিলের মূল বিষয়কে তুলে ধরতে পারি। অর্থাৎ টেবিলটা যেই বিষয় নিয়ে বানানো সেই বিষয় সম্পর্কে আমরা ধারণা দেয়ার জন্যই মূলত এই অংশটা ব্যবহার করে থাকি।
<tbody></tbody> এই অংশটি দিয়ে মূলত টেবিলের পুরো অংশকে নির্দেশ করা হয়ে থাকে অর্থাৎ পুরো টেবিল এর মধ্যে যা থাকে সেটাকে নির্দেশ করার জন্য এটাকে ব্যবহার করা হয়ে থাকে।
<th></th> দিয়ে মূলত টেবিলের মূল ডাটাকে দেখানো হয় এবং <tr></tr> দিয়ে টেবিল এর রো বা সারি কে নির্দেশ করা হয়। <td></td> দিয়ে টেবিল এর ডাটা নির্দেশ করা হয়।
<a href=””> ট্যাগ:
ইন্টারনেটের দুনিয়ায় সবথেকে গুরুত্বপূর্ণ ট্যাগ এটা। এটার মাধ্যমে মূলত পৃথিবীর প্রতিটা ওয়েবসাইট একে অন্যের সাথে কানেক্টেড হয়ে থাকে। একটা ওয়েবসাইট অন্য একটা ওয়েবসাইটের সাথে যুক্ত হতে এর গুরুত্ব অনেক। এটাকে কি বলা হয়ে থাকে লিংকটা অর্থাৎ এটার মাধ্যমে আমরা অন্য যে কোন ওয়েবসাইটকে একাউন্টের সাথে লিংক করতে পারব বা যেকোন ওয়েব পেজকে বাজে কালকে আমরা একে অন্যের সাথে লিঙ্ক করতে পারব।
নিচে আমরা আরও আনেকগুলো ট্যাগ নিয়ে কথা বলব:
- <b></b> Text বা লেখাকে Bold করার জন্য ব্যবহৃত হয়
- <i></i> Text বা লেখাকে Italic করার জন্য ব্যবহৃত হয়
- <u></u> Text বা লেখাকে Underline করতে ব্যবহৃত হয়
- <big></big> Text বা লেখাকে স্বাভাবিকের চেয়ে বড় করতে ব্যবহৃত হয়
- <small></small> Text বা লেখাকে স্বাভাবিকের চেয়ে ছােট করতে ব্যবহৃত হয়
- <sub></sub>সংখ্যার বেজ দেখাতে ব্যবহৃত হয়
- <sup></sup>সংখ্যার পাওয়ার দেখাতে ব্যবহৃত হয়
- <tt></tt> টেলিটাইপ টেক্সট নির্দেশ করেতে ব্যবহৃত হয়
- <em></em> গুরুত্বপূর্ণ Text বা লেখাকে Emphasized করতে ব্যবহৃত হয়
- <blink></blink> Text বা লেখাকে Blinking করতে ব্যবহৃত হয়
- <blockquote></blockquote> বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়
- <input></input> ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়
- <li></li> লিস্ট তৈরিতে ব্যবহৃত হয়
- <meta></meta> Meta তথ্য যুক্ত করতে ব্যাবহার করা হয়
এইচটিএমএল ট্যাগ লিস্ট বাংলা PDF ডাউনলোড লিঙ্ক দেওয়া হলো। এছাড়া ইংলিশ PDF ডাউনলোড দিয়ে দেওয়া হলো জাতে করে আরও তথ্য যজান্তে পারেন। আরও নতুন তথ্য জানতে আমাদের ব্লগ অনুসরন করুন। বন্ধুদের সাথে শেয়ার করুন।
