HTML ট্যাগ কি? | HTML Tag নিয়ে বিস্তারিত আলোচনা?

HTML TAG

HTML ট্যাগগুলি হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজে (HTML) ব্যবহার করা হয় একটি HTML Document এর মধ্যে উপাদানগুলিকে বা Element গুলিকে সংজ্ঞায়িত করে। এগুলি কোণ বন্ধনী ("<" এবং ">") এ আবদ্ধ অক্ষরের স্ট্রিং ( String ) হিসাবে লেখা হয় এবং বিষয়বস্তু চিহ্নিত করতে এবং Webpage গুলিতে কাঠামো বা Structure প্রদান করতে ব্যবহৃত হয়।

Html ট্যাগগুলি অক্ষর-সংবেদনশীল বা Upper Case অথবা Lower Case এ লেখা যায় তবে ছোট হাতের অক্ষরে সাধারণ অভ্যাস করাই ভালো।

একটি HTML ট্যাগ সাধারণত নিম্নলিখিত উপাদান নিয়ে গঠিত:

1. Opening Tag: এটি একটি HTML ট্যাগের প্রথম অংশ এবং এটি একটি উপাদানের বা Element এর শুরুকে সংজ্ঞায়িত বা নির্দেশ করতে ব্যবহৃত হয়। এটি Opening Tag নাম দ্বারা অনুসরণ করা হয় "<" (Less Than) অক্ষর দিয়ে শুরু হয় এবং ">" (Grater Than) অক্ষর দিয়ে শেষ হয় ৷ যেমন: "<h1>", "<p>", "<img>", ইত্যাদি।

2. Closing Tag: এটি একটি HTML ট্যাগের দ্বিতীয় অংশ এবং একটি উপাদানের শেষ নির্ধারণ করতে ব্যবহৃত হয়। এটি Closing Tag নাম দ্বারা অনুসরণ করা "</" ( Less Than BackSlash) অক্ষর দিয়ে শুরু হয় এবং ">" (Grater Than) অক্ষর দিয়ে শেষ হয় ৷

উদাহরণস্বরূপ: "</h1>", "</p>", "</img>", ইত্যাদি। মনে রাখবেন যে সমস্ত HTML উপাদানের ক্লোজিং ট্যাগের প্রয়োজন হয় না সেগুলিকে বলা হয় সেল্ফ-ক্লোজিং ট্যাগ, যেমন "<img>", "<br>", এবং "<input>" এর কোনো ক্লোজিং ট্যাগ নেই।

3. Tag Name: এটি HTML উপাদানের নাম যা ট্যাগ প্রতিনিধিত্ব করে। এটি Webpage এর রেন্ডার করা উপাদানের ধরন নির্দিষ্ট করে। ট্যাগ নামের উদাহরণগুলির মধ্যে রয়েছে একটি Heading এর জন্য "h1", একটি Paragraph এর জন্য "p", একটি Image এর জন্য "img", একটি HyperLink এর জন্য "a" ইত্যাদি।

4. Attributes: এগুলি ঐচ্ছিক এবং একটি HTML উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে ৷ বৈশিষ্ট্যগুলি Opening Tag এ যোগ করা হয় এবং নাম - মান জোড়া হিসাবে লেখা হয়। নামের পরে একটি সমান চিহ্ন ("=") এবং মানটি দ্বিগুণ উদ্ধৃতি (" ") দ্বারা আবদ্ধ থাকে।

বৈশিষ্ট্যগুলি একটি চিত্রের উৎস URL, একটি লিঙ্কের লক্ষ্য URL, একটি উপাদানের আকার এবং আরও অনেক কিছু নির্দিষ্ট করতে ব্যবহৃত হয়। উদাহরণ স্বরূপ: <img src="image.jpg" alt="an example image"> যেখানে "src" এবং "alt" বৈশিষ্ট্য।

5. Content: এটি Text বা অন্যান্য HTML উপাদান যা একটি HTML উপাদানের খোলা এবং বন্ধ করার ট্যাগের মধ্যে প্রদর্শিত হয়। এটি প্রকৃত বিষয়বস্তু যা ওয়েব ব্রাউজার দ্বারা প্রদর্শিত বা রেন্ডার করা হয়।

উদাহরণ স্বরূপ: <p> This is an Paragraph </p>, যেখানে "This is an Paragraph" উপাদান বিষয়বস্তু।

এখানে একটি সম্পূর্ণ এইচটিএমএল ট্যাগের উদাহরণ রয়েছে যার সমস্ত উপাদান রয়েছে:

<tagname attribute1="value1" attribute2="value2"> Content Goes Here</tagname>

6. Nesting Tag: আরও জটিল কাঠামো তৈরি করতে HTML ট্যাগগুলি একে অপরের ভিতরে নেস্ট করা যেতে পারে। এটিকে আমরা Element Nesting নামেও জানি। যে ক্রমে ট্যাগ নেস্ট করা হয়।

এই উদাহরণে,<div> Element Contains A <h1> Element and A <p> উপাদান তার শিশু উপাদান <h1> and <p> Element are nested inside the <div> উপাদান।

7. Block Level Vs Inline Element: HTML ট্যাগ দুটি প্রকারে শ্রেণীবদ্ধ করা যেতে পারে Block-Level এবং Inline Element। ব্লক-স্তরের উপাদানগুলি একটি নতুন লাইন তৈরি করে এবং তাদের মূল কন্টেইনারের সম্পূর্ণ প্রস্থ নেয়, যেখানে ইনলাইন উপাদানগুলি একটি নতুন লাইন তৈরি করে না এবং শুধুমাত্র তাদের প্রয়োজনীয় স্থান নেয়।

উদাহরণ স্বরূপ,<div> and <p> ব্লক-স্তরের উপাদান, যেখানে <span> and <a> ইনলাইন উপাদান হয়। এই পার্থক্যটি কীভাবে উপাদানগুলিকে প্রদর্শিত করে এবং কীভাবে সেগুলি অন্যান্য উপাদানের সাথে ব্যবহার করা যেতে পারে তা প্রভাবিত করে।

8. Void Elements: কিছু এইচটিএমএল( HTML ) উপাদান, যা অকার্যকর উপাদান হিসাবেও পরিচিত, এর ক্লোজিং ট্যাগ নেই এবং কোনও সামগ্রী থাকতে পারে না।অকার্যকর উপাদানগুলি স্ব-ক্লোজিং (Self-Closing) এবং ক্লোজিং অ্যাঙ্গেল ব্র্যাকেট (">") এর আগে একটি ফরোয়ার্ড স্ল্যাশ ("/") দ্বারা অনুসরণ করে একটি একক ট্যাগ দিয়ে লেখা হয়।

উদাহরণ স্বরূপ:<img src="image.jpg" alt="example an image" /> অকার্যকর উপাদান। অন্যান্য উদাহরণ অন্তর্ভুক্ত <br>,<input>,<meta>, এবং<link>।

9. Deprecated Tag: HTML ট্যাগগুলি সময়ের সাথে সাথে অপ্রত্যাশিত হতে পারে, যার মানে সেগুলি আর ব্যবহারের জন্য সুপারিশ করা হয় না এবং ভবিষ্যতে HTML সংস্করণে সমর্থিত নাও হতে পারে ৷ অপ্রচলিত ট্যাগগুলি সাধারণত নতুন, আরও শব্দার্থিক, এবং অ্যাক্সেসযোগ্য বিকল্পগুলির সাথে প্রতিস্থাপিত হয়।

উদাহরণস্বরূপ, <strike> ট্যাগ HTML5-এ অবচয়িত, এবং এটি ব্যবহার করার জন্য সুপারিশ করা হয় <del> Tag কে।

10. Custom Tag: HTML5 কাস্টম ট্যাগের ধারণা চালু করেছে, যা ডেভেলপারদের তাদের নিজস্ব কাস্টম HTML ট্যাগ তৈরি করতে দেয়। কাস্টম ট্যাগগুলিকে যেকোনো নামের সাথে সংজ্ঞায়িত করা যেতে পারে, যতক্ষণ না সেগুলি "x-" বা "data-" দিয়ে প্রিফিক্স করা হয়।

কাস্টম ট্যাগগুলি পুনঃব্যবহারযোগ্য উপাদানগুলি তৈরি করার জন্য উপযোগী এবং অন্য যে কোনও HTML উপাদানের মতো জাভাস্ক্রিপ্টের সাথে স্টাইল বা ম্যানিপুলেট করা যেতে পারে।

HTML ট্যাগগুলি একটি HTML Document এর মধ্যে উপাদানগুলিকে সংজ্ঞায়িত করে এবং এতে একটি খোলার ট্যাগ (Opening Tag), ঐচ্ছিক বৈশিষ্ট্য, বিষয়বস্তু এবং একটি ক্লোজিং ট্যাগ (Closing Tag) থাকে।

এইচটিএমএল (HTML) ট্যাগগুলি নেস্ট করা যেতে পারে, Block-Level বা Inline Element হিসাবে শ্রেণীবদ্ধ করা যেতে পারে এবং কিছু উপাদান অকার্যকর বা অপ্রচলিত। কাস্টম উপাদান তৈরি করার জন্য কাস্টম ট্যাগগুলিও উপলব্ধ।

এইচটিএমএল ট্যাগের বিভিন্ন দিক বোঝা ভাল Well-Structure, Semantic, এবং Accessible HTML Document তৈরি করার জন্য গুরুত্বপূর্ণ।