এইচটিএমএল - TechJano

এইচটিএমএল

এইচটিএমএল

নেস্টেড এইচটিএমএল এলিমেন্ট

নেস্টেড এইচটিএমএল এলিমেন্ট

এইচটিএমএল এলিমেন্ট নেস্টেড হতে পারে। অর্থাৎ এলিমেন্টের মধ্যেও এলিমেন্ট থাকতে পারে।

সকল এইচটিএমএল ডকুমেন্টই নেস্টেড এইচটিএমএল এলিমেন্ট দিয়ে গঠিত হয়।

নিম্নের এইচটিএমএল ডকুমেন্টটি ৬টি এইচটিএমএল এলিমেন্ট নিয়ে গঠিত হয়েছেঃ

উদাহরণ

<!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-এর মত স্ট্রিক্ট ডকুমেন্টের জন্য ছোটহাতের অক্ষর ব্যবহার করতে হয়।