এইচটিএমএল নেস্টেড তালিকা তৈরি করার উপযুক্ত উপায়?

Question

ডাব্লু 3 ডক্সের নেস্টেড তালিকার উদাহরণ রয়েছে যার পূর্বে উপস্থাপিত হয়েছিল DEPRECATED EXAMPLE:, তবে তারা এটিকে কখনও অবহেলিত উদাহরণ দিয়ে সংশোধন করেনি বা উদাহরণের সাথে কী ভুল তা সঠিকভাবে ব্যাখ্যা করেনি।

তাহলে এইচটিএমএল তালিকা লেখার সঠিক উপায়টি কোনটি?

বিকল্প 1 : নেস্টেড <ul>পিতামাতার একটি সন্তান<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

বিকল্প 2 : নেস্টেড এটির অন্তর্ভুক্ত <ul>একটি শিশু<li>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

Answer 1

বিকল্প 2 সঠিক।

নেস্টেড তালিকাগুলি তালিকার একটি <li>উপাদানের ভিতরে থাকা উচিত যেখানে এটি নেস্ট করা আছে।

তালিকাগুলিতে W3C উইকির লিঙ্ক (নীচের মন্তব্য থেকে নেওয়া): এইচটিএমএল তালিকা উইকি ।

এইচটিএমএল 5 ডাব্লু 3 সি ulঅনুচ্ছেদে লিঙ্ক : HTML5ul । নোট করুন যে কোনও ulউপাদানটিতে হুবুহু বা আরও বেশি উপাদান থাকতে পারে li। এটি HTML5 এরol ক্ষেত্রেও প্রযোজ্য । বর্ণনা তালিকা ( এইচটিএমএল 5dl ) একই, তবে উভয় dtএবং ddউপাদান উভয়কেই অনুমতি দেয় ।

আরও নোট:

• dl = সংজ্ঞা তালিকা।
• ol = অর্ডার করা তালিকা (সংখ্যা)।
• ul = আনর্ডারড তালিকা (বুলেট)।

Comments

এখানে ডাব্লু 3 সি অফিশিয়াল তথ্য, w3.org/wiki/HTML_lists# নেস্টিং_ তালিকাগুলি , বিকল্প 2 সঠিক উপায়

— জোসে এলেরা

আমি এমন একটি ক্ষেত্রে দৌড়েছি যা বৈধ এইচটিএমএল 5 দিয়ে তৈরি করা অসম্ভব বলে মনে হচ্ছে: পিতামাতাদের তালিকা আইটেম ব্যতীত নেস্টেড তালিকা আইটেম (একটি ওয়ার্ড প্রসেসরের তালিকার আইটেমের শুরুতে টিএবি টিপতে টিপতে টিপুন) imagine : এখানে আমার প্রশ্ন দেখতে পাবেন stackoverflow.com/questions/61094384/...

— মার্ক

Answer 2

বিকল্প 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

নেস্টিংয়ের তালিকা - উল

Answer 3

বিকল্প 2 সঠিক: নেস্টেড এটির অন্তর্ভুক্ত <ul>একটি শিশু <li>।

আপনি যদি বৈধতা দেন তবে বিকল্প 1 টি এইচটিএমএল 5 - ক্রেডিট: ব্যবহারকারী 3272456 এ ত্রুটি হিসাবে আসে

---

সঠিক: এর <ul>সন্তান হিসাবে<li>

এইচটিএমএল নেস্টেড তালিকা তৈরির যথাযথ উপায়টি নীচে নেস্টেড যার সাথে এটির অন্তর্ভুক্ত <ul>as <li>নেস্টেড তালিকাটি যে তালিকাতে বাসা বেঁধেছে তার <li>উপাদানটির ভিতরে থাকা উচিত ।

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

---

নেস্টিং তালিকাগুলির জন্য ডাব্লু 3 সি স্ট্যান্ডার্ড

একটি তালিকা আইটেমে আরও একটি সম্পূর্ণ তালিকা থাকতে পারে - এটি একটি তালিকা "নীড় বাঁধা" হিসাবে পরিচিত। এটি বিষয়বস্তুর সারণীর মতো বিষয়গুলির জন্য যেমন এই নিবন্ধটির শুরুতে রয়েছে তেমন কার্যকর:

1. প্রথম অধ্যায়
   1. বিভাগ এক
   2. বিভাগ দুটি
   3. বিভাগ তিন
2. অধ্যায় দুই
3. তৃতীয় অধ্যায়

নেস্টিং তালিকার মূল চাবিকাঠিটি মনে রাখা উচিত যে নেস্টেড তালিকাগুলি একটি নির্দিষ্ট তালিকা আইটেমের সাথে সম্পর্কিত। কোডটিতে এটি প্রতিফলিত করার জন্য, নীস্টযুক্ত তালিকাটি সেই তালিকা আইটেমের অভ্যন্তরে অন্তর্ভুক্ত রয়েছে। উপরের তালিকার কোডটি এরকম কিছু দেখাচ্ছে:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

নীচের তালিকাটি কীভাবে অন্তর্ভুক্ত <li>তালিকা আইটেমের পাঠ্য ("প্রথম অধ্যায়") এর পরে শুরু হয় তা দ্রষ্টব্য ; তারপরে </li>থাকা তালিকা আইটেমটির আগে শেষ হয় । নেস্টেড তালিকাগুলি প্রায়শই ওয়েবসাইট ন্যাভিগেশন মেনুগুলির ভিত্তি তৈরি করে, কারণ তারা ওয়েবসাইটের শ্রেণিবদ্ধ কাঠামো সংজ্ঞায়নের জন্য একটি ভাল উপায়।

তাত্ত্বিকভাবে আপনি নিজের পছন্দ অনুসারে যতগুলি তালিকাকুলি বাসা বাঁধতে পারেন, যদিও বাস্তবে এটি নীচে নীড়ের তালিকাতে বিভ্রান্তিকর হয়ে উঠতে পারে। খুব বড় তালিকার জন্য আপনি কন্টেন্টটি বেশ কয়েকটি তালিকায় পরিবর্তে শিরোনাম সহ বিভিন্ন তালিকায় বিভক্ত করা বা এটি পৃথক পৃষ্ঠাগুলিতে বিভক্ত করা ভাল।

Answer 4

আপনি যদি বৈধতা দেন, বিকল্প 1 টি এইচটিএমএল 5 এ ত্রুটি হিসাবে আসে, সুতরাং বিকল্প 2 সঠিক।

Answer 5

আমি বিকল্প দুটি পছন্দ করি কারণ এটি নীচের তালিকার মালিক হিসাবে তালিকা আইটেমটি স্পষ্টভাবে দেখায়। আমি সর্বদা শব্দার্থগত শব্দ HTML এর দিকে ঝুঁকতাম।

Answer 6

আপনি বাসা বাঁধার তালিকার জন্য "উল" এর পরিবর্তে TAG "dt" ব্যবহার করার কথা ভেবে দেখেছেন? এটি উত্তরাধিকারী শৈলী এবং কাঠামো আপনাকে বিভাগে প্রতি শিরোনাম দেওয়ার অনুমতি দেয় এবং এটি স্বয়ংক্রিয়ভাবে সামগ্রীটি ট্যাবলেট করে inside

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

বনাম

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

Comments

আপনার উদাহরণগুলি এক নয়। "চয়েস এ", "চয়েস বি", "সাব 1", "সাব 2" সহ দ্বিতীয় উদাহরণটি জোড় করা dt/ ddট্যাগগুলির জন্য কাজ করে না । এছাড়াও অন্তর্নিহিত শৈলী (এবং ট্যাবুলেশন, আমি সন্দেহ করি) কেবলমাত্র ডিফল্ট ব্রাউজার স্টাইলশিট থেকে আসে, সুতরাং এটি বেশি কিছু বলে না। আমি এটিকে একটি অর্থগত উপাদান হিসাবে বিবেচনা করব; যদি আপনার সংজ্ঞাগুলির একটি তালিকা থাকে, বা আপনার যদি কেবল শিরোনাম / বিবরণ ডেটার জোড়া থাকে dlতবে একটি ভাল পছন্দ হতে পারে।

— রিকিট

সমতুল্য উদাহরণ দেওয়ার জন্য আপনি কি আপনার মন্তব্য সম্পাদনা করতে পারবেন - উদাহরণস্বরূপ পছন্দ দুটি এবং চ বিয়ের জন্য দুটি সাব-এন্ট্রি সাব 1 এবং সাব 2 সহ দুটিতে পছন্দ बी এবং পছন্দ বি অন্তর্ভুক্ত?

— জ্লাটিন জ্লেতেভ

Answer 7

এখানে যা উল্লেখ করা হয়নি তা হ'ল বিকল্পটি 1 আপনাকে তালিকাগুলিতে ইচ্ছামত গভীর বাসা বাঁধতে দেয়।

আপনি বিষয়বস্তু / সিএসএস নিয়ন্ত্রণ করেন কিনা এটি বিবেচ্য নয়, তবে আপনি যদি একটি সমৃদ্ধ পাঠ্য সম্পাদক তৈরি করেন তবে এটি কার্যকর হবে।

উদাহরণস্বরূপ, জিমেইল, ইনবক্স এবং এভারনোট সমস্ত এই জাতীয় তালিকা তৈরি করার অনুমতি দেয়:

বিকল্প 2 দিয়ে আপনি এটি করতে পারবেন না (আপনার একটি অতিরিক্ত তালিকার আইটেম থাকবে), বিকল্প 1 সহ, আপনি এটি করতে পারেন।

Comments

বিকল্প 1 অবৈধ এইচটিএমএল উত্পাদন করে। পাঁচ বছর আগে যখন এই প্রশ্নটি জিজ্ঞাসা করা হয়েছিল যে এটি হতে পারে না তবে এটি এখন।

— j08691

হ্যাঁ, এটি অবশ্যই অবৈধ এইচটিএমএল। তবে এটি এখনও ব্যবহৃত হয়েছে এবং এখনও সামঞ্জস্যের জন্য দরকারী। বিকল্পটি হ'ল মার্জিন এবং বুলেট শৈলীর সাথে ঝাঁকুনি যা কোনও ইমেল লেখার সময় আপনি যা চান তা নাও হতে পারে।

— ইবাশ

আমি নিশ্চিত নই যে কেন আমি এরকম কিছু ভুল পথে চালিত করতে চাই। এর জন্য আরও অর্থবহ ব্যবহার করতে আপনি কি আপনার মন্তব্য সম্পাদনা করতে পারেন?

— জ্লাটিন জ্লেতেভ

গুরুত্বপূর্ণভাবে এটি বুলেটগুলির একটি গ্রুপের জন্য ফর্ম ফর্ম সম্পাদনার অনুমতি দেয়, এটি আরও স্বজ্ঞাত অনুভূতি দেয়। একজন ব্যবহারকারী হিসাবে, আমার কাছে বুলেটের একটি তালিকা থাকলে আমি সেগুলি যুক্ত করতে এবং একটি নতুন বুলেটের নীচে বাসাতে চাই। নির্বিচারে ইন্ডেন্ট করার ক্ষমতা ছাড়াই ব্যবহারকারীর প্রথমে শিরোনাম বুলেট sertোকানো এবং তারপরে প্রতিটি বুলেট ইন্ডেন্ট করা প্রয়োজন। নির্বিচারে ইনডেন্ট করার ক্ষমতা সহ, ব্যবহারকারী বুলেটগুলির গোষ্ঠীটি ইনডেন্ট করতে পারে এবং তারপরে একটি নতুন শিরোনাম বুলেট .োকাতে পারে।

— ইবাশ