এইচটিএমএল <details> ট্যাগ
<details> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge / IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<details> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সাপোর্ট করে না |
সংজ্ঞা ও ব্যবহার
<details> ট্যাগ দিয়ে অতিরিক্ত তথ্যকে নির্দেশ করে যা ইউজার নিজের ইচ্ছেমত দেখতে এবং হাইড করে রাখতে পারে।
<details> ট্যাগ ব্যবহার করে একটি ইন্টারেক্টিভ widget তৈরি করা যেতে পারে যেটি ইউজার চাইলে খুলতে বা বন্ধ করে রাখতে পারে। যেকোন ধরনের কন্টেন্ট <details> ট্যাগের মধ্যে রাখা যায়।
<details> এলিমেন্টের কন্টেন্ট দৃশ্যমান হবে না যদি open এট্রিবিউট ব্যবহার করা না হয়।
নিচের <details> এলিমেন্ট ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<details>
<summary>কপিরাইট ২০১৭</summary>
<p> - স্যাট একাডেমী। সকল স্বত্ব সংরক্ষিত। </p>
<p>এই ওয়েবসাইটের সকল তথ্য এবং গ্রাফিক্সের মালিক স্যাট একাডেমী।</p>
</details>
</body>
</html>
বিঃদ্রঃ <details> ট্যাগটি ইন্টারনেট এক্সপ্লোরার এ সাপোর্ট করে না।
ফলাফল
টীকা ও মন্তব্যঃ
- Details এর হেডিংয়ের জন্য
<summary>ট্যাগটি ব্যবহার করা হয়।
এট্রিবিউট
নিচের টেবিলে <details> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ণনা |
|---|---|---|
| open | open | ইউজারের কাছে শুরুতেই <details> ট্যাগের সমগ্র কন্টেন্ট দৃশ্যমান করে। |
<details> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<details> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <details> এলিমেন্টটি নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
details {
display: block;
}