এইচটিএমএল এলিমেন্ট (HTML Element)
একটি এইচটিএমএল এলিমেন্ট সচরাচর একটি <ওপেনিং> ট্যাগ এবং একটি </ক্লোজিং> ট্যাগ নিয়ে গঠিত হয় এবং ট্যাগদ্বয়ের মাঝে কন্টেন্ট থাকে।
ওপেনিং ট্যাগ থেকে ক্লোজিং ট্যাগ পর্যন্ত সবকিছু নিয়েই এইচটিএমএল এলিমেন্ট গঠিত হয়ঃ
এইচটিএমএল এলিমেন্টের গঠন
ওপেনিং ট্যাগ | কনটেন্ট | ক্লোজিং ট্যাগ
--------- | ------------ | ---------
<h1> ডকুমেন্ট হেডিং </h1><br>, <hr> ইত্যাদির গঠন উপরোক্ত গঠন থেকে ভিন্ন হয়। এগুলোর ক্লোজিং ট্যাগ না থাকায় এগুলোকে empty ট্যাগ বলা হয়।নেস্টেড এইচটিএমএল এলিমেন্ট
এইচটিএমএল এলিমেন্ট নেস্টেড হতে পারে। অর্থাৎ এলিমেন্টের মধ্যেও এলিমেন্ট থাকতে পারে।
সকল এইচটিএমএল ডকুমেন্টই নেস্টেড এইচটিএমএল এলিমেন্ট দিয়ে গঠিত হয়।
নিম্নের এইচটিএমএল ডকুমেন্টটি ৬টি এইচটিএমএল এলিমেন্ট নিয়ে গঠিত হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল এলিমেন্ট</title>
</head>
<body>
<h3>ডকুমেন্ট হেডিং</h3>
<p>এটি একটি প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
উদাহরণের বর্ণনা
- উপরের এইচটিএমএল ডকুমেন্টের প্রথম লাইন
<!DOCTYPE html>দ্বারা এইচটিএমএল এর ভার্সন ৫ কে নির্দেশ করা হয়েছে। - এটি ওপেনিং
<html>ট্যাগ দিয়ে শুরু হয়েছে এবং ক্লোজিং</html>ট্যাগ দিয়ে শেষ হয়েছে। <head>এলিমেন্টটি ডকুমেন্ট সম্পর্কে অতিরিক্ত তথ্য ধারন করে। যেমনঃ ডকুমেন্টের টাইটেল, ডকুমেন্টের বর্ণনা ইত্যাদি। এটি<head>ট্যাগ দিয়ে শুরু হয়েছে এবং</head>ট্যাগ দিয়ে শেষ হয়েছে।<title>এলিমেন্টটি ডকুমেন্টের টাইটেল বা নাম ধারন করে। এটি<title>ট্যাগ দিয়ে শুরু হয়েছে এবং</title>ট্যাগ দিয়ে শেষ হয়েছে।- এখানে
<body>এলিমেন্টটি হলো কন্টেন্ট এলিমেন্ট। অর্থাৎ<body>হলো ডকুমেন্টের মূল অংশ।<body> <h3>ডকুমেন্ট হেডিং</h3> <p>এটি একটি প্যারাগ্রাফ</p> </body>
এটিbodyঅংশের বর্ণনা:<body>ট্যাগ দিয়ে শুরু হয়েছে এবং</body>ট্যাগ দিয়ে শেষ হয়েছে।<h3>এবং<p>এলিমেন্ট দুটি হলো কন্টেন্ট এলিমেন্ট।<h3>এলিমেন্ট দিয়ে একটি হেডিংকে বুঝায়।<h3>ডকুমেন্ট হেডিং</h3>এটি ওপেনিং ট্যাগ
<h3>দিয়ে শুরু হয়েছে এবং ক্লোজিং ট্যাগ</h3>শেষ হয়েছে এবং এই এলিমেন্টের কন্টেন্ট হলোঃ ডকুমেন্ট হেডিং।<p>এলিমেন্ট দিয়ে একটি প্যারাগ্রাফকে বুঝানো হয়।<p>এটি একটি প্যারাগ্রাফ</p>এটি ওপেনিং ট্যাগ
<p>দিয়ে শুরু হয়েছে এবং ক্লোজিং ট্যাগ</p>শেষ হয়েছে এবং এই এলিমেন্টের কন্টেন্ট হলোঃ এটি একটি প্যারাগ্রাফ।
সর্বদা ক্লোজিং ট্যাগ ব্যবহার করুন!
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ
<p>এটি আরেকটি প্যারাগ্রাফ
</body>
</html>
ফলাফল
উপরের উদাহরণটি সকল ব্রাউজারেই কাজ করে, কারণ এইচটিএমএল ৫ এ ক্লোজিং ট্যাগকে ঐচ্ছিক হিসেবে বিবেচনা করা হয়।
সর্বদা ছোটহাতের অক্ষর ব্যবহার করুন!
এইচটিএমএল ট্যাগগুলো কেস সেন্সিটিভ নয়। যেমন- <P> এবং <p> একই রকম অর্থ বহন করে।
এইচটিএমএল(৫) এ ছোটহাতের অক্ষর ব্যবহার করা বাধ্যতামূলক নয়। কিন্তু W3C ছোটহাতের অক্ষর ব্যবহারের পরামর্শ দেয় এবং XHTML-এর মত স্ট্রিক্ট ডকুমেন্টের জন্য ছোটহাতের অক্ষর ব্যবহার করতে হয়।