একজন ওয়েব ডেভলপার হতে হলে অবশ্যই আপনাকে এইচটিএমএল ট্যাগ সম্পর্কে ধারণা রাখতে হবে। এইচটিএমএল ট্যাগগুলো কিভাবে কাজ করে থাকে এবং কখন কোন দিকে কাজে লাগাতে হয় সেটা অবশ্যই আপনাকে জানতে হবে। আপনি যদি এইচটিএমএল ট্যাগ (HTML Tag) এর ব্যবহার এবং কাজ সম্পর্কে না জানেন তবে কখনোই একজন সম্পূর্ণ ওয়েব ডেভলপার হয়ে উঠতে পারবেন না। নিম্নে আমরা এইচটিএমএল ট্যাগ এর বিভিন্ন লিস্ট দিয়ে দিয়েছি, আপনারা সেগুলো দেখে অনুশীলন করতে পারবেন।
HTML ভাষায় ব্যবহৃত ট্যাগ সমূহকে ২ ভাগে ভাগ করা যায়। যথা:
ক) কন্টেইনার ট্যাগ
খ) এম্পটি ট্যাগ
১. HTML Container ট্যাগ কি?
যে ট্যাগ গুলোর শুরু এবং শেষ আলাদা আলাদা ভাবে করতে হয় তাদেরকে কন্টেইনার ট্যাগ বলে। যেমন প্যারাগ্রাফ ট্যাগ। HTML প্যারাগ্রাফ ট্যাগের জন্য <p> </p> ব্যবহার করতে হয় যার প্রথমটি শুরুর ট্যাগ এবং পরের / চিহ্ন যুক্ত ট্যাগটি শেষের ট্যাগ।
২. HTML Empty ট্যাগ কি?
যে ট্যাগ গুলোর শুরু এবং শেষ একবারেই করে ফেলা হয় তাকে এম্পটি ট্যাগ বলে। যেমন: লাইন ব্রেক ট্যাগ। <br> ট্যাগ একবারেই দিয়ে এর কাজ শেষ করে দেয়া হয়। এই ট্যাগ গুলোকে <br/> এভাবেও লেখা যায়।
HTML এর ট্যাগসমূহকে ১৩ টি ভাগে ভাগ করে নিচে প্রত্যেকটিকে উল্লেখ করা হলো তাদের কাজ সহ।
খুঁজে নেয়ার সুবিদার্থে ভাগ গুলোকে উল্লেখ করে দেয়া হলো:
- সাধারণ গঠন
- ফরমেটিং
- ফ্রেমস
- ইনপুট (ফর্ম সহ)
- অডিও এবং ভিডিও
- ছবি বা ইমেজ
- হাইপারলিংক
- লিস্ট বা তালিকা
- টেবিল
- স্টাইল এবং সিমেনটিক
- প্রোগ্রামিং
- মেটা ট্যাগ
- অন্যান্য ফাইল যুক্ত করা
- HTML 5 এ সাপোর্ট করে না যেসকল ট্যাগ।
ক) সাধারণ গঠনের জন্য ব্যবহৃত HTML Tag সমূহ:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <!DOCTYPE> | ডকুমেন্টের ধরন নির্দেশ করে |
| ০২ | <html> | HTML ধরন নির্দেশ করে |
| ০৩ | <head> | হেড ট্যাগের ভেতরে টাইটেল, লিংকিং, মেটা ট্যাগ এবং ডকুমেন্টের বিভিন্ন তথ্যাদি থাকে |
| ০৪ | <title> | টাইটেল বা শিরোনাম নির্দেশ করে |
| ০৫ | <body> | মূল কোডিং এর পুরোটাই বডি ট্যাগে থাকে |
| ০৬ | <h1> থেকে <h6> | হেডিং নির্দেশ করে। H1 হেডিং সবথেকে বড় এবং H6 সবথেকে ছোট। |
| ০৭ | <p> | প্যারাগ্রাফ বা অনুচ্ছেদ নির্দেশ করে |
| ০৮ | <br> | নতুন লাইন সৃষ্টি করে বা লাইন ব্রেক করে |
| ০৯ | <hr> | আনুভূমিক বা হরাইজন্টাল লাইন নির্দেশ করে, যা মূল কন্টেন্টের দুটি অংশকে পৃথক করতে ব্যবহৃত হয় |
| ১০ | <!----> | HTML কমেন্ট এর জন্য এটি ব্যবহৃত হয়। <!--কমেন্ট স্ক্রিনে দেখায় না, কোডারের সুবিদার্থে ব্যবহার করা হয়ে থাকে --> |
আরও পড়ুন: All HTML Tags List With Examples in Bangla (PDF Download)
খ) HTML ফরমেটিং ট্যাগ
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <abbr> | সংক্ষিপ্ত রূপ প্রকাশে ব্যবহৃত হয় |
| ০২ | <address> | যোগাযাগের ঠিকানার জন্য তৈরি বিশেষ ফন্টের জন্য |
| ০৩ | <b> | লেখা বোল্ড করে |
| ০৪ | <bdo> | টেক্সট ডিরেকশনকে ওভাররাইড করে |
| ০৫ | <blockquote> | অন্য কারো কথাকে (উক্তি) চিহ্নিত করার জন্য |
| ০৬ | <cite> | টাইটেল প্রকাশ করে |
| ০৭ | <code> | বিভিন্ন কোডিং ল্যাঙ্গুয়েজের কোডকে আলাদা করে প্রকাশ করে |
| ০৮ | <del> | ডিলিট, অর্থাৎ লেখার উপর দিয়ে একটি দাগ (Strikethrough) দেয়ার জন্য |
| ০৯ | <dfn> | নির্দিষ্ট টার্মকে প্রকাশ করে যা ওই কন্টেন্টের সাথে কানেক্টেড |
| ১০ | <em> | লেখাকে এম্ফাসাইজড করে |
| ১১ | <i> | লেখাকে ইটালিক করে |
| ১২ | <ins> | নতুন করে ইনসার্ট করা হয়েছে বুঝায় |
| ১৩ | <kbd> | কীবোর্ড ইনপুটকে আলাদা করে |
| ১৪ | <mark> | কোনো লেখাকে আলাদাভাবে হাইলাইট করে |
| ১৫ | <meter> | পরিচিত রেঞ্জে স্কেলার এককের পরিমাপ বুঝাতে ব্যবহৃত হয় |
| ১৬ | <pre> | প্রিফরমেটেড টেক্সট বুঝায় |
| ১৭ | <progress> | কোনো প্রজেক্ট/টাস্কের অগ্রগতি বুঝায় |
| ১৮ | <q> | ছোট উক্তি বুঝায় |
| ১৯ | <rp> | যে ব্রাউজার রুবি অ্যানোশন সাপোর্ট করে না সেই ব্রাউজারে কি শো হবে তা ডিফাইন করে দেয় |
| ২০ | <rt> | বর্ণের ব্যাখ্যা |
| ২১ | <ruby> | পূর্ব এশীয় টাইপোগ্রাফি |
| ২২ | <s> | ভুল হয়েছে বুঝাতে ব্যবহৃত হয় |
| ২৩ | <samp> | স্যাম্পল আউটপুট |
| ২৪ | <small> | ছোট টেক্সট |
| ২৫ | <strong> | গুরুত্বপূর্ণ টেক্সট |
| ২৬ | <sub> | সাবস্ক্রিপ্টেড, অর্থাৎ পানির সংকেতের ২ কে নিচে পাঠানো |
| ২৭ | <sup> | সুপারস্ক্রিপ্ট। যা দিয়ে স্কোয়ার, কিউব ইত্যাদি দেয়া হয় |
| ২৮ | <template> | পেজ লোড হওয়াকালীন যে কন্টেইনার দেখাবে তা |
| ২৯ | <time> | তারিখ, সময় |
| ৩০ | <u> | আন্ডারলাইন |
| ৩১ | <var> | ভেরিয়েবল নির্দেশ করে |
| ৩২ | <wbr> | সম্ভাব্য লাইন ব্রেক বুঝায় |
গ) ফ্রেমস:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <iframe> | অন্য কোনো ওয়েবসাইটকে বা কোনো অংশকে এই ওয়েবপেজে নির্দিষ্ট ফ্রেমে বন্দি করে শো করাতে ব্যবহৃত হয় |
ঘ) ফর্মসহ অন্যান্য ইনপুট:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <form> | ফর্ম বুঝায় |
| ০২ | <input> | ইনপুট কন্ট্রোল |
| ০৩ | <output> | কোনো কাজ/হিসাবের আউটপুট নির্দেশ করে |
| ০৪ | <option> | ড্রপ ডাউন লিস্টের কোনো অপশন বুঝায় |
| ০৫ | <optgroup> | একই ধরনের অপশনকে বুঝায় |
| ০৬ | <label> | ইনপুট ইলেমেন্টের লেবেল নির্ধারণ করে দেয় |
| ০৭ | <button> | ক্লিক করে কোনো কাজ সম্পাদন যোগ্য বাটন যোগ করে |
| ০৮ | <textarea> | বড় আকারের টেক্সট ইনপুট নিতে ব্যবহৃত |
| ০৯ | <select> | ড্রপ ডাউন লিস্টের জন্য ব্যবহৃত |
| ১০ | <fieldset> | একই গ্রুপ সম্পর্কিত তথ্যাদিকে একটি বর্ডারে রাখা |
| ১১ | <legend> | ফিল্ডসেটের একটি নাম উল্লেখ করতে ব্যবহৃত |
ঙ) অডিও এবং ভিডিও:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <video> | ভিডিও ফাইল যুক্ত করে |
| ০২ | <audio> | অডিও ফাইল যুক্ত করে (নির্দিষ্ট ফরমেটের) |
| ০৩ | <source> | একাধীক মিডিয়া রিসোর্স বুঝাতে ব্যবহার করা হয় |
চ) ছবি ও ইমেজ:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <img> | ছবি যুক্ত করতে ব্যবহৃত হয় |
| ০২ | <figure> | সেলফ কন্টেইন্ড কন্টেন্ট আলাদা করতে |
| ০৩ | <picture> | একাধীক ইমেজ একসাথে |
| ০৪ | <svg> | SVG ফরমেটের গ্রাফিক্স/ছবি যুক্ত করতে |
| ০৫ | <figcaption> | ফিগারের ক্যাপশন দিতে ব্যবহার করা হয় |
ছ) হাইপারলিংক:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <a> | হাইপারলিংক নির্দেশ করে |
| ০২ | <link> | একটি ডকুমেন্টের সাথে অন্য ডকুমেন্ট যুক্ত করতে, বিশেষ করে HTML এর সাথে CSS ইত্যাদি যুক্ত করে থাকে |
| ০৩ | <nav> | ন্যাভিগেশন লিংক বুঝায় |
জ) লিস্ট বা তালিকা:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <ul> | আন-অর্ডার লিস্ট শুরু করে, যেমন বুলেট পয়েন্টার দিয়ে |
| ০২ | <ol> | অর্ডারড লিস্ট (সংখ্যা বা বর্ণ দিয়ে শুরু) বুঝায় |
| ০৩ | <li> | লিস্টের আইটেম গুলো এই ট্যাগের মধ্যে থাকে |
| ০৪ | <dl> | ডিসক্রিপশন লিস্ট বুঝায় |
| ০৫ | <dt> | ডিসক্রিপশন লিস্টের নাম দিতে |
| ০৬ | <dd> | ডিসক্রিপশনের নামের ডিসক্রিপশন দিতে |
ঝ) টেবিল:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <table> | টেবিল নির্দেশক |
| ০২ | <caption> | টেবিলের ক্যাপশন দেয় |
| ০৩ | <th> | হেডার দেয় রো এর |
| ০৪ | <tr> | টেবিলের সারি নির্দেশ করে |
| ০৫ | <td> | টেবিল ডেটা |
| ০৬ | <thead> | টেবিলের হেডার কন্টেন্ট |
| ০৭ | <tfoot> | ফুটার কন্টেন্ট |
| ০৮ | <col> | কলাম |
ঞ) স্টাইল এবং সিমেন্টিক:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <style> | ইন্টারনাল সিএসএস যুক্ত করতে। (সিএসএস কি জানতে এখানে ক্লিক করুন) |
| ০২ | <div> | একটি আলাদা সেকশন বুঝায় (<section> ও একই) |
| ০৩ | <span> | <div> এবং <section> এর মতোই |
| ০৪ | <header> | ডকুমেন্টের হেডার সেকশন বুঝায় |
| ০৫ | <footer> | ফুটার সেকশন আলাদা করতে |
| ০৬ | <main> | মূল কন্টেন্টের সেকশন |
| ০৭ | <section> | <div> এর মতোই |
| ০৮ | <article> | আর্টিকেল বুঝায় |
ট) প্রোগ্রামিং:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <script> | জাভাস্ক্রিপ্ট ফাংশন যোগ করে |
| ০২ | <noscript> | স্ক্রিপ্ট সাপোর্ট না করলে তার ব্যাকআপ |
| ০৩ | <embed> | HTML না এমন এপ্লিকেশন যোগ করতে ব্যবহার করা হয় |
ঠ) মেটা ট্যাগ সমূহ:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <meta> | ডিসক্রিপশন সহ অন্যান্য মেটা ডেটা যুক্ত করে ডকুমেন্টে |
| ০২ | <base> | মূল লিংককে আলাদা করে |
ড) অন্যান্য ফাইল যুক্ত করা:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <link> | সিএসএস টাইপ ফাইল যুক্ত করে |
| ০২ | <script> | Js টাইপ ফাইল যুক্ত করে |
ঢ) HTML 5 এ সাপোর্ট করে না এমন ট্যাগ:
| ক্রমিক নং | ট্যাগ | বর্ণনা |
| ০১ | <applet> | এম্বেডেড এপলেটকে বুঝায় |
| ০২ | <basefont> | ডিফল্ট কিছু ব্যাপার সেট করতে ব্যবহৃত |
| ০৩ | <dir> | ডিরেক্টরি লিস্ট ডিফাইন করে |
| ০৪ | <frame> | ফ্রেমসেটে ফ্রেম নির্দেশ করে |
| ০৫ | <strike> | কেটে দেয়া হয়েছে এমন দাগের জন্য |
| ০৬ | <center> | লেখাকে মাঝে আনতে |
| ০৭ | <big> | লেখাকে বড় করতে |
HTML এ ব্যবহৃত প্রায় সব গুলো ক্যাটাগরির সকল ট্যাগ নিয়ে আসার চেষ্টা ক্রয়া হয়েছে। কিছু কম গুরুত্বপূর্ণ ট্যাগ বাদ দিয়েছি, ভুল ত্রুটি কিছু থেকে থাকলেও থাকতে পারে। যেকোনো প্রশ্ন থাকলে নিচে কমেন্ট বক্সে করে ফেলতে পারেন নির্দ্বিধায়। HTML5, CSS3, Bootstrap4 ব্যবহার করে ওয়েব ডেভেলপমেন্ট শিখতে পারেন বিনামূল্যের অনলাইন কোর্সের মাধ্যমে।
HTML Tags in Bangla এর পিডিএফ ডাওনলোড করতে ক্লিক করুন DOWNLOAD PDF এ। পাঠগৃহের সাথেই থাকুন। আমাদের কন্টেন্ট গুলো সবার আগে পেতে ইমেইল সাবস্ক্রিপশন করে রাখতে পারেন।
