আমার <<> গুলি এবং <li> গুলি আমার <<< s এর ভিতরে ব্যবহার করা উচিত?

114

শিরোনামটি বেশ ব্যাখ্যা করে।

এখন আমাদের একটি ডেডিকেটেড <nav>ট্যাগ রয়েছে,

এটি কি:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

নীচের চেয়ে ভাল কোন?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

আমার অর্থ, ধরে নিচ্ছি যে কিছু সিএসএস পজিশনিং / প্যাডিংয়ের জন্য আমার অতিরিক্ত ডিওএম স্তরের প্রয়োজন নেই, পছন্দসই উপায়টি কী এবং কেন?

html html-lists nav

— kikito
সূত্র

এটি একটি ভাল প্রশ্ন ... এইচটিএমএল 4 এর অর্থ দেয় না এমন ট্যাগগুলির সাথে, আগের সেরা অনুশীলনগুলির কোনও প্রয়োগ হয়?

— গুফা

63

ন্যাভ উপাদান এবং তালিকা বিভিন্ন শব্দার্থগত তথ্য সরবরাহ করে:

নেভ উপাদানটি যোগাযোগ করে যে আমরা একটি বড় নেভিগেশন ব্লক নিয়ে কাজ করছি
তালিকাটি যোগাযোগ করে যে এই নেভিগেশন ব্লকের ভিতরে থাকা লিঙ্কগুলি আইটেমগুলির একটি তালিকা তৈরি করে

এ http://w3c.github.io/html/sections.html#the-nav-element আপনি দেখতে পারেন যে একটি এনএভি উপাদান এছাড়াও গদ্য থাকতে পারে।

হ্যাঁ, একটি এনএভি এলিমেন্টের ভিতরে একটি তালিকা থাকা অর্থ যুক্ত করে।

— টমাস মাস
সূত্র

অনেক অনেক ধন্যবাদ, এটাই আমার দরকার! এছাড়াও, নীচে "3 টি আইটেমের তালিকা" ঘোষণা করার জন্য পর্দার পাঠকদের সম্পর্কে রবার্টকের মন্তব্য খুব দরকারী ছিল।

— কিকিতো

7

দেখে মনে হচ্ছে যে ইউএল ট্যাগ কোনও কিছুই সাহায্য করে না: css-tricks.com/navication-in-lists-to-be-or-not-to-be

— psycho brm

2

লিঙ্কটি আমার পক্ষে কাজ করছে বলে মনে হচ্ছে। ফলোআপটি পড়ার বিষয়টি নিশ্চিত করুন, যা তালিকাগুলি ঘোষণা করে এবং কোনও তালিকা কোনও অঙ্কন করবে না। css-tricks.com/wrapup-of-navication-in-lists

— রবডাব্লু

আমার মতে, একটি <nav>ছাড়া <ul><li>মনে হচ্ছে এতে আরও গতিশীল বাচ্চাদের মেনু থাকবে। আপনার যদি একাধিক মেনু তালিকাগুলি থাকে যা বিভিন্ন ধরণের এবং অবস্থানে থাকে <nav>? আমি করব গ্রুপ হিসাবে যারা মেনু তালিকা <ul><li>মধ্যে <nav>। সুতরাং যদি আপনার মেনুগুলি নিয়মিত থাকে তবে আমি সাথে যাব <ul><li>।

— wonsuc

3

এই মুহুর্তে, আমি <ul><li>উপাদানগুলি রাখব , কারণ সমস্ত ব্রাউজার এখনও HTML5 ট্যাগ সমর্থন করে না।

উদাহরণস্বরূপ, আমি <header>ট্যাগটি ব্যবহার করে একটি সমস্যায় পড়েছি - ক্রোম এবং এফএফ একটি কবজির মতো কাজ করেছে, তবে অপেরা উদ্বিগ্ন।

যতক্ষণ না সমস্ত ব্রাউজারগুলি এইচটিএমএলকে পুরোপুরি সমর্থন করে, ততক্ষণ আমি এগুলিতে আটকে থাকি, তবে পিছনের সামঞ্জস্যের জন্য পুরানোগুলির উপর নির্ভর করি।

— ডেমিয়ান ব্রেচট
সূত্র

3

অপেরা এবং আইই এর মতো ব্রাউজারগুলির সাথে কোনও সম্ভাব্য পিছনের সামঞ্জস্যতা ত্রুটিগুলি প্রশমিত করতে এইচটিএমএল 5 শিম জাভাস্ক্রিপ্ট ফাইল ( রিমিশারপ.com / 2009 / 01 / 07 / html5-enabling-script ) ব্যবহার করুন ।

— 22

তবে তারপরে আপনার সাইটটি অ-বিভ্রান্তিকর স্ক্রিপ্টিংয়ের পক্ষে বন্ধুত্বপূর্ণ নয় :)

— ডেমিয়ান ব্রেচট

1

আপনার মানে IE8 বাজার থেকে বের হওয়া অবধি ... :)

— ২০১

@ আইম - অবিকল :) এবং জাভাস্ক্রিপ্ট বন্ধ করা ব্রাউজারগুলিতে আর বিকল্প নয়;)

— ডেমিয়ান ব্রেচট

@ এজেন্ট_9191 এটি করবে - আমি আজ পুরোপুরি অবাক হয়েছি যখন আমি কেবল আই 7 তে এখনও কত লোক রয়েছি তা যাচাই করতে চেয়েছিলাম এবং কী অনুমান করতে পারি - বেশিরভাগ দেশে আই 7 এর চেয়ে অপেরা বা আইপ্যাড সাফারির মতো ব্রাউজারগুলিতে আরও লোক রয়েছে। আমি এখন খুশি আমি আই 7 এর জন্য সমর্থন বাদ দিতে পারি! এবং IE8 শীঘ্রই বা পরে চলে যাবে। এটি আমাদের শেষ মুখোমুখি ব্রাউজারের মুখোমুখি হবে (আইই 9 এর বিরুদ্ধে কোড করা খুব খারাপ নয়)।

— ক্যামিলো মার্টিন

2

এটা সত্যিই আপনার উপর নির্ভর করে। আপনি যদি আপনার নেভিগেশন মেনুটিকে চিহ্নিত করার জন্য সাধারণত যদি বিনা অর্ডারযুক্ত তালিকা ব্যবহার করেন তবে আমি <<> উপাদানটির মধ্যে এটি করা চালিয়ে যেতে চাই। <nav> উপাদানটির মূল বিষয় হল কম্পিউটারের পাঠকের কাছে সাইটের নেভিগেশন উদাহরণস্বরূপ চিহ্নিত করা, সুতরাং আপনি তালিকা ব্যবহার করুন বা কেবল লিঙ্কগুলি অত্যাবশ্যক।

— আয়ান ডেভলিন
সূত্র

স্ক্রিন পাঠকদের জন্য +1 উল্লেখ করার কারণে, navগুলি এবং aগুলি এখনকার তালিকার মতোই দুর্দান্ত।

— ক্যামিলো মার্টিন

2

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

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

সম্পাদনা : আমাকে সচেতন করা হয়েছে যে কিছু এআরআইএ স্ক্রিন পাঠক সাধারণ অ্যাঙ্কর ট্যাগগুলির চেয়ে তালিকাগুলি আলাদাভাবে আচরণ করে। যদি আপনার ওয়েবসাইটটি প্রতিবন্ধী ব্যক্তিদের প্রতি আগ্রহী হয় তবে আমি তালিকা-ভিত্তিক পদ্ধতির ব্যবহার বিবেচনা করতে পারি।

— রেভ ব্যবহারকারী 1429980
সূত্র

1

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

আপনি যদি ব্রাউজারগুলির প্রতি সম্মানের সাথে পিছনের দিকের সামঞ্জস্যতা সম্পর্কে উদ্বিগ্ন হন তবে, এবং এর মতো ট্যাগগুলির কার্যকারিতা সরবরাহ করতে এই শিমটি অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করুন ।<nav><article>

— acconrad
সূত্র

8

লিঙ্কগুলির একটি তালিকা অতিরিক্ত শব্দার্থকতা এবং অ্যাক্সেসিবিলিটি সরবরাহ করে (উদাঃ পর্দার পাঠকগণ 'নেভিগেশন প্রবেশ করার সময়' তিনটি আইটেমের তালিকা 'ঘোষণা করবেন)।

— রবার্টক

@ রবার্টক স্ক্রিনরিডার্স পয়েন্টটি খুব ভাল। আপনার উত্তর দেওয়া উচিত ছিল! আমি এটিকে সঠিক হিসাবে চিহ্নিত করতাম। যে কোনও ক্ষেত্রে +1।

— কিকিতো

1

যদি আমরা "বইয়ের দ্বারা" কথা বলি, তবে না; আপনার নেভিগেশন চিহ্নিত করতে আপনার তালিকাগুলি ব্যবহার করার দরকার নেই। তারা যে একমাত্র আসল সুবিধা দেয় তা হ'ল স্টাইলিংয়ের সময় আরও ভাল ডিগ্রী নমনীয়তা সরবরাহ করা।

— Phil.Wheeler
সূত্র

1

আমি রাখা চাই <ul><li>, ট্যাগ কারণ নতুন ট্যাগ ( <nav>, <section>, <article>ইত্যাদি) শুধু আরো শব্দার্থিক সংস্করণ<div> গুলি।

একই কারণে আপনার কাছে কেবলমাত্র একটি লিঙ্কের বোঝা থাকবে না <div>, সেগুলি একটি <nav>ট্যাগের মধ্যেও গঠন করা উচিত ।

— whostolemyhat
সূত্র

আমি অতীতে <ডিভি> তে প্রচুর লিঙ্কের পরিবর্তে <ul> গুলি ব্যবহার করার কারণটি ছিল স্পষ্টভাবে যে <ul> গুলি বেশি শব্দার্থক। তবে এখন <nav> গুলি আরও শব্দার্থক। আমি বিভ্রান্ত

— কিকিটো

2

<ul> গুলি এখনও প্লেইন <a> লিঙ্কগুলির চেয়ে বেশি শব্দার্থক, তবে <না> <ডিভ> এর চেয়ে বেশি শব্দার্থক। <ul> বনাম <a> <nav> বনাম <

— ডিভ

এইচটিএমএল লেখার সময় শব্দার্থবিজ্ঞানের যত্ন না করা উপায় নয় ।

— অ্যান্ড্রু মার্শাল

1

এই সঠিক প্রশ্ন সম্পর্কে সিএসএস ট্রিকসে একটি সত্যই বিস্তারিত পোস্ট রয়েছে। এটি অবশ্যই একটি আলোচিত বিতর্কিত বিষয়; পোস্টে 200 টিরও বেশি মন্তব্য রয়েছে।

তালিকাগুলিতে নেভিগেশন: হওয়ার বা না থাকার (সিএসএস ট্রিকস, জানুয়ারী 2013)

— Astrotim
সূত্র

তারা সিএসএস

— গ্রাহাম