এইচটিএমএল 5-তে সঠিকভাবে "বিভাগ" ট্যাগটি কীভাবে ব্যবহার করবেন?


106

আমি এইচটিএমএল 5 এ একটি বিন্যাস তৈরি করার চেষ্টা করছি এবং বেশ কয়েকটি বিভিন্ন নিবন্ধ পড়ার পরে আমি কেবল বিভ্রান্ত হয়েছি। এটি কীভাবে ব্যবহার করা উচিত সে সম্পর্কে আমি কিছু ইনপুট পাওয়ার চেষ্টা করছি।

নীচে আমি বিভিন্ন পরিবর্তনগুলি যাচ্ছি যার সাথে পিছনে পিছনে যাচ্ছি:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

আপনি ধারক মত কাজ করতে বিভাগ ট্যাগ ব্যবহার করতে পারেন?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

<section>ট্যাগটি ব্যবহারের সঠিক পদ্ধতি কী ?


প্রযুক্তিগতভাবে উভয়ই সঠিক।
শেঠ

9
আমি বলব যে দুটি উদাহরণই সঠিক দেখাচ্ছে না ... তবে কেবল ডামি টেক্সট দিয়ে বলা শক্ত এবং সত্যিকারের প্রসঙ্গটি কোনও <section>সিনেমিক ট্যাগ নয় এবং জেনেরিক মোড়কের মতো নয় <div>
ওয়েসলি মার্চ

13
আপনার অবশ্যই একই আইডি সহ দুটি উপাদান (বিভাগ বা অন্যথায়) থাকা উচিত নয়।
স্যাম ডটন

উত্তর:


107

উত্তরটি বর্তমান অনুমানের মধ্যে রয়েছে:

বিভাগ উপাদানটি একটি নথি বা অ্যাপ্লিকেশনটির জেনেরিক বিভাগকে উপস্থাপন করে। একটি বিভাগ, এই প্রসঙ্গে, বিষয়বস্তুর একটি থিম্যাটিক গ্রুপিং, সাধারণত একটি শিরোনাম থাকে।

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

যখন উপাদানটির বিষয়বস্তুগুলি সিন্ডিকেট করার অর্থ হবে তখন লেখকগুলি বিভাগের উপাদানটির পরিবর্তে নিবন্ধ উপাদানটি ব্যবহার করতে উত্সাহিত হন ।

অধ্যায় উপাদান একটি জেনেরিক ধারক উপাদান নয় । স্টাইলিংয়ের উদ্দেশ্যে বা স্ক্রিপ্টিংয়ের সুবিধার্থে যখন কোনও উপাদানের প্রয়োজন হয়, লেখকদের পরিবর্তে ডিভ উপাদানটি ব্যবহার করতে উত্সাহিত করা হয়। একটি সাধারণ নিয়মটি হ'ল বিভাগের উপাদানটি কেবল তখনই উপযুক্ত যখন উপাদানটির বিষয়বস্তু নথির বাহ্যরেখায় সুস্পষ্টভাবে তালিকাভুক্ত করা হবে

রেফারেন্স:

আরও দেখুন:

দেখে মনে হচ্ছে সেখানে এই উপাদান এর উদ্দেশ্য সম্পর্কে বিভ্রান্তির অনেক হয়েছে, কিন্তু এক জিনিস যে একমত যে এটা হয় না মত, একটি জেনেরিক মোড়কের <div>হয়। এটা তোলে শব্দার্থিক উদ্দেশ্যে ব্যবহার করা উচিত, এবং না একটি সিএসএস বা জাভাস্ক্রিপ্ট হুক (যদিও এটা অবশ্যই করতে স্টাইল করা বা "স্ক্রিপ্টের")।

আমার বোধগম্যতার থেকে আরও ভাল উদাহরণ হতে পারে এটির মতো দেখতে:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

মনে রাখবেন যে <div>, সম্পূর্ণরূপে অ-শব্দার্থক হয়ে ওঠার কারণে, ডকুমেন্টের যে কোনও জায়গাতেই এইচটিএমএল স্পেক এটি অনুমোদিত করে, তবে এটি প্রয়োজনীয় নয়।


2
আমি নিশ্চিত না যে মোড়ক ডিভিটি কীসের জন্য, তবে অন্যথায় একটি ভাল উত্তর।
আলহকি

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

8
বিভাগেও একটি শিরোনাম (এইচ 1, এইচ 2 ইত্যাদি) থাকা উচিত নয়?
জোয়ে ভি।

1
একটি শিরোনামে একটি শিরোনাম থাকতে হবে এবং এর মধ্যে কেবলমাত্র একটি উপাদান থাকলে আপনার এটি ব্যবহার করা উচিত নয়।
কেইনাবেল

ভালো উদাহরণ. উপাদানগুলির বিষয়বস্তু নথির বাহ্যরেখায় তালিকাভুক্ত করা থাকলে একটি বিভাগ যথাযথ, সুতরাং অ-শব্দার্থিক মোড়ক ডিভিশন কোনও বিভাগ নয়, তবে নিবন্ধটির অংশগুলি বিভাগ। সাধারণত একটি বিভাগের একটি শিরোনামও থাকবে।
সুপারলুমিনারি

44

ইন স্ট্রাকচারিং HTML5 এর সম্পর্কে W3 উইকি পাতা , এটা বলেন:

<section>: হয় বিভিন্ন উদ্দেশ্য বা বিষয়গুলিতে বিভিন্ন নিবন্ধ গোষ্ঠী করতে, বা একটি নিবন্ধের বিভিন্ন বিভাগ সংজ্ঞায়িত করতে ব্যবহৃত হয়।

এবং তারপরে একটি চিত্র প্রদর্শিত হবে যা আমি পরিষ্কার করেছি:

এখানে চিত্র বর্ণনা লিখুন

<article>ট্যাগটি কীভাবে ব্যবহার করতে হয় তাও জানা গুরুত্বপূর্ণ (উপরের একই ডাব্লু 3 লিঙ্ক থেকে):

<article>সম্পর্কিত <section>, কিন্তু স্বতন্ত্রভাবে পৃথক। যেখানে <section>বিষয়বস্তু বা কার্যকারিতা স্বতন্ত্র বিভাগে গোষ্ঠীবদ্ধ করার জন্য নয়, <article>এই ধরনের পৃথক ব্লগ পোস্ট, ভিডিও, চিত্র বা খবর আইটেমকে বিষয়বস্তুর সংশ্লিষ্ট পৃথক স্বতন্ত্র টুকরা, ধারণকারী জন্য। এটি এইভাবে ভাবুন - যদি আপনার কাছে প্রচুর পরিমাণে সামগ্রী থাকে তবে সেগুলির প্রত্যেকটি নিজেরাই পড়ার উপযোগী হয় এবং আরএসএস ফিডে আলাদা আইটেম হিসাবে সিন্ডিকেট বোধ করতে পারে, তবে <article>সেগুলি চিহ্নিত করার জন্য উপযুক্ত।

আমাদের উদাহরণে, <section id="main">ব্লগ এন্ট্রি রয়েছে। প্রতিটি ব্লগ এন্ট্রি আরএসএস ফিডে আইটেম হিসাবে সিন্ডিকেট করার জন্য উপযুক্ত হবে এবং প্রাসঙ্গিকতার বাইরে নিজে থেকে পড়লে তা বোধগম্য হবে, সুতরাং <article>তাদের জন্য নিখুঁত:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

সরল হাহ? আপনি নিবন্ধগুলির অভ্যন্তর অংশগুলিও বাসা বেঁধে রাখতে পারেন যদিও সচেতন হন, যেখানে এটি করা বোধগম্য। উদাহরণস্বরূপ, যদি এই ব্লগ পোস্টগুলির প্রত্যেকটির স্বতন্ত্র বিভাগগুলির একটি সামঞ্জস্যপূর্ণ কাঠামো থাকে তবে আপনি আপনার নিবন্ধগুলির মধ্যেও বিভাগগুলি রাখতে পারেন। এটি এর মতো দেখতে পারে:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

7
নিশ্চয় আপনি <main>পরিবর্তে এক-প্রতি-নথি ট্যাগ ব্যবহার করবেন <section id="main"?
ডেভ এভারিট

2
আমি সম্মত, ব্যবহার <main>আদর্শ হবে।
জাস্টিন

3

আমার বোধগম্যতা হল যে সেকশনটিতে শিরোনাম সহ একটি বিভাগ রয়েছে যা পৃষ্ঠার "প্রবাহ" এর একটি গুরুত্বপূর্ণ অংশ (কোনও দিকে নয়)। বিভাগগুলি অধ্যায়, নথির সংখ্যাযুক্ত অংশ ইত্যাদি হবে।

নিবন্ধটি সিন্ডিকেটেড সামগ্রীর জন্য - যেমন পোস্ট, সংবাদ গল্প ইত্যাদি AR

বিভাগ সম্পর্কে আরেকটি বিষয় হ'ল যদি আপনার পৃষ্ঠায় কেবলমাত্র একটি বিভাগ থাকে তবে আপনার এটি ব্যবহার করা উচিত নয়। এছাড়াও, প্রতিটি বিভাগের একটি শিরোনাম থাকতে হবে (H1-6, HGROUP, শিরোনাম)। বিভাগগুলি বিভাগের সাথে যুক্ত শিরোনামগুলি "স্কোপড" করা হয়েছে, সুতরাং উদাহরণস্বরূপ আপনি যদি প্রধান পৃষ্ঠায় কোনও H1 ব্যবহার করেন (কোনও বিভাগের বাইরে) এবং তারপরে বিভাগের অভ্যন্তরে এইচ 1 ব্যবহার করেন তবে পরবর্তীটি এইচ 2 হিসাবে বিবেচিত হবে।

লেখার সময় স্পেকের উদাহরণগুলি বেশ ভাল।

সুতরাং আপনার প্রথম উদাহরণে সঠিক হবে যদি আপনার কাছে এমন বেশ কয়েকটি অংশ থাকে যা নিবন্ধ হিসাবে বর্ণনা করা যায় না। (একটি গৌণ বিন্দুতে যে আপনি স্টাইল হুক না চাইলে আপনার # প্রাথমিক ডিআইভি লাগবে না - পি ট্যাগগুলি আরও ভাল হবে) would

দ্বিতীয় উদাহরণটি সঠিক হবে যদি আপনি সমস্ত বিভাগের ট্যাগগুলি মুছে ফেলে থাকেন - সেই দস্তাবেজের ডেটাটি নিবন্ধ, পোস্ট বা এ জাতীয় কিছু।

বিভাগগুলি পাত্রে হিসাবে ব্যবহার করা উচিত নয় - ডিআইভি এখনও তার জন্য সঠিক ব্যবহার এবং আপনি যে কোনও কাস্টম বাক্স নিয়ে আসতে পারেন।


2

আপনি অবশ্যই ধারক ট্যাগটি ধারক হিসাবে ব্যবহার করতে পারেন। এটি একটি ডিভের চেয়ে বা এইচটিএমএল 5 অনুমান অনুসারে আরও কৃত্রিমভাবে তাত্পর্যপূর্ণ উপায়ে গোষ্ঠীবদ্ধ করতে পারে:

বিভাগ উপাদানটি একটি নথি বা অ্যাপ্লিকেশনটির জেনেরিক বিভাগকে উপস্থাপন করে। একটি বিভাগ, এই প্রসঙ্গে, বিষয়বস্তুর একটি থিম্যাটিক গ্রুপিং, সাধারণত একটি শিরোনাম থাকে। http://www.w3.org/TR/html5/sections.html#the-section-element


2

সঠিক পদ্ধতিটি # 2। আপনি আপনার দস্তাবেজের একটি বিভাগ সংজ্ঞায়িত করতে বিভাগ ট্যাগটি ব্যবহার করেছেন। চশমা থেকে http://www.w3.org/TR/html5/sections.html :

বিভাগ উপাদানটি জেনেরিক ধারক উপাদান নয়। স্টাইলিংয়ের উদ্দেশ্যে বা স্ক্রিপ্টিংয়ের সুবিধার্থে যখন কোনও উপাদানের প্রয়োজন হয়, লেখকদের পরিবর্তে ডিভ উপাদানটি ব্যবহার করতে উত্সাহিত করা হয়


আমি এতটা নিশ্চিত নই যে # 2 এই ট্যাগটি (মোড়ানো <article>) এর সর্বোত্তম ব্যবহার , তবে উদাহরণ হিসাবে কেবল ডামি টেক্সট এবং "প্রাথমিক" সহ দুটি বিভাগ সহ সত্যই বলা অসম্ভব id...
ওয়েসলি মার্চ

0

এটি ঠিক ভুল: একটি মোড়ক নয়। ডকুমেন্টের আউটলাইনটি তৈরিতে সহায়তা করতে উপাদানটি আপনার সামগ্রীর একটি অর্থপূর্ণ অংশকে বোঝায়। এটিতে একটি শিরোনাম থাকা উচিত। আপনি যদি কোনও পৃষ্ঠা মোড়কের উপাদান (এইচটিএমএল বা এক্সএইচটিএমএল এর কোনও স্বাদে) খুঁজছেন তবে ক্রোক ক্যামেন বর্ণিত উপাদান হিসাবে সরাসরি উপাদানগুলিতে শৈলী প্রয়োগ করা বিবেচনা করুন। স্টাইলিংয়ের জন্য আপনার যদি এখনও অতিরিক্ত উপাদান প্রয়োজন, একটি ব্যবহার করুন। ডাঃ মাইক যেমন ব্যাখ্যা করেছেন, ডিভ মারা যায়নি, এবং এর চেয়ে উপযুক্ত আরও কিছু না হলে সম্ভবত এটিই আপনার সিএসএস প্রয়োগ করতে চান।

আপনি এটি পরীক্ষা করতে পারেন: http://html5doctor.com/avoiding-common-html5-mistakes/

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.