HTML <summary> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <sub>
  • পরবর্তী পৃষ্ঠা <sup>

নির্ধারণ ও ব্যবহার

<summary> ট্যাগ: <details> এলিমেন্ট একটি দৃশ্যমান শিরোনাম নির্ধারণ করে। শিরোনাম ক্লিক করলে বিস্তারিত তথ্য দেখা বা লুকিয়ে রাখা যায়。

পরামর্শ:<summary> এলিমেন্ট হওয়া উচিত <details> এলিমেন্ট প্রথম সন্নিবেশকে

অন্যান্য দেখুন:

HTML DOM উপস্থাপনা বিন্যাস:সারাংশ ওবজেক্ট

একটি প্রদর্শন

উদাহরণ ১

ব্যবহার করে <summary> উপাদান:

<details>
  <summary>ভবিষ্যতের কেন্দ্র (Epcot Center)</summary>
  <p>Epcot হল ওয়াল্ট ডিজনি ওয়ারল্ড রিসর্টস এর থিম পার্ক, যা উৎসাহজনক অতিথিগৃহ, আন্তর্জাতিক প্রদর্শনী, পুরস্কারজয়ী ফায়ারশো ও মরশুমী কার্যক্রমগুলি সম্পর্কে রয়েছে。</p>
</details>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ ২

CSS দ্বারা <details> এবং <summary> শৈলী:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>ভবিষ্যতের কেন্দ্র (Epcot Center)</summary>
  <p>Epcot হল ওয়াল্ট ডিজনি ওয়ারল্ড রিসর্টস এর থিম পার্ক, যা উৎসাহজনক অতিথিগৃহ, আন্তর্জাতিক প্রদর্শনী, পুরস্কারজয়ী ফায়ারশো ও মরশুমী কার্যক্রমগুলি সম্পর্কে রয়েছে。</p>
</details>
</body>
</html>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

গ্লোবাল অ্যাট্রিবিউট

<summary> ট্যাগটি আরও HTML-এর গ্লোবাল অ্যাট্রিবিউট。

ইভেন্ট অ্যাট্রিবিউট সমর্থন করে

<summary> ট্যাগটি আরও HTML-এর ইভেন্ট অ্যাট্রিবিউট。

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <summary> উপাদান:

summary {
  display: block;
}

ব্রাউজার সমর্থন

সারণীতে দেওয়া সংখ্যাগুলি এই অ্যাট্রিবিউটটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে উল্লেখ করে

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
12.0 79.0 49.0 6.0 15.0
  • পূর্ববর্তী পৃষ্ঠা <sub>
  • পরবর্তী পৃষ্ঠা <sup>