HTML Tag

আমরা যেকোন একটা HTML  Document দেখি সেখানে অবশ্যই tag থাকে। যেমন নিচের Document টি দেখুন এখানে <html>, <head>, </head>, <body> ইত্যাদি এক একটি tag।

সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা html অনুমোদিত) tag বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML  ডকুমেন্টে লিখি তখন এটার নাম html tag এরুপ শত শত tag আছে HTML এ। যেমন Paragraph tag <p></p>, হেডিং <h1></h1> tag ইত্যাদি।

<!DOCTYPE html>

<html>

<head>

<title>HTML Tag tutorial in Spfoundation</title> 

</head>

<body>

<h1>Webcoachbd demo heading</h1>

<p>demo content goes here.</p> 

</body>

</html>

প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে <html> ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে </html> আবার <h1> এর ক্লজিং ট্যাগ হল </h1> এভাবে বাকি সবগুলি।

টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag  বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।

এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।

** এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।

** কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন।

<img src="/path/to/image.jpg" alt="an_image"/>

<input type="submit" value="Save"/>

দেখুন ইমেজ ট্যাগ শুরু হয়েছে <img এভাবে আর শেষ হয়েছে /> এই চিহ্ন দিয়ে। ইনপুট ট্যাগটিও তদ্রুপ। আর মাঝে যে জিনিসগুলি দেখছেন (src, type ইত্যাদি) এগুলি সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।

* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়। 

* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন <p></p> ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে <h1></h1> ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে <h1>, সাইজ অনুযায়ী <h6> পর্যন্ত আছে) টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে <img ট্যাগ, ব্রাউজারের টাইটেল বারে দেখানোর জন্য আছে <title></title> ট্যাগ ইত্যাদি।

 

* উপরে যে ডকুমেন্টটি দিয়েছি সেখানে <html></html> কে বলে প্যারেন্ট ট্যাগ পুরো ডকুমেন্ট টির জন্য কেননা পুরো ডকুমেন্টে যত ট্যাগ আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ