ฉันควรใช้ <ul> s และ <li> s ใน <nav> 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>

ฉันหมายถึงสมมติว่าฉันไม่ต้องการระดับ DOM เพิ่มเติมสำหรับการวางตำแหน่ง / ช่องว่างของ CSS วิธีที่ต้องการคืออะไรและเพราะเหตุใด

html html-lists nav

— kikito
แหล่งที่มา

นั่นเป็นคำถามที่ดี ... ด้วยแท็กที่ไม่สมเหตุสมผลกับ HTML 4 แนวทางปฏิบัติที่ดีที่สุดก่อนหน้านี้มีผลบังคับใช้หรือไม่

— Guffa

63

องค์ประกอบการนำทางและรายการให้ข้อมูลเชิงความหมายที่แตกต่างกัน:

องค์ประกอบการนำทางสื่อสารว่าเรากำลังจัดการกับบล็อกการนำทางที่สำคัญ
รายการสื่อสารว่าลิงก์ภายในบล็อกการนำทางนี้เป็นรายการของรายการ

ที่http://w3c.github.io/html/sections.html#the-nav-elementคุณจะเห็นว่าองค์ประกอบการนำทางอาจมีร้อยแก้วด้วย

ใช่แล้วการมีรายการภายในองค์ประกอบการนำทางจะเพิ่มความหมาย

— โทมัสมาส
แหล่งที่มา

ขอบคุณมากนี่คือสิ่งที่ฉันต้องการ! นอกจากนี้ความคิดเห็นของ robertc เกี่ยวกับโปรแกรมอ่านหน้าจอที่ประกาศ "รายการ 3 รายการ" ด้านล่างนี้มีประโยชน์มาก

— kikito

7

ดูเหมือนว่าแท็ก UL จะไม่ช่วยอะไรเลย: css-tricks.com/navigation-in-lists-to-be-or-not-to-be

— psycho brm

2

ดูเหมือนว่าลิงก์จะใช้งานได้สำหรับฉัน อย่าลืมอ่านการติดตามซึ่งประกาศรายการและไม่มีรายการจับฉลาก css-tricks.com/wrapup-of-navigation-in-lists

— RobW

ในความคิดของฉัน<nav>โดยไม่ต้อง<ul><li>ดูเหมือนว่ามันจะมีลูกเมนูแบบไดนามิกมากขึ้น จะเกิดอะไรขึ้นถ้าคุณมีรายการเมนูหลายรายการซึ่งเป็นประเภทและตำแหน่งที่แตกต่างกัน<nav>? ฉันจะจัดกลุ่มรายการเมนูเหล่านั้นไว้<ul><li>ในไฟล์<nav>. <ul><li>ดังนั้นหากคุณมีเมนูปกติผมจะไปกับ

— wonsuc

3

ณ จุดนี้ฉันจะคง<ul><li>องค์ประกอบไว้เนื่องจากเบราว์เซอร์บางตัวยังไม่รองรับแท็ก HTML5

ตัวอย่างเช่นฉันพบปัญหาในการใช้<header>แท็ก - Chrome และ FF ทำงานได้อย่างมีเสน่ห์ แต่ Opera รู้สึกแย่

จนกว่าเบราว์เซอร์ทั้งหมดจะรองรับ HTML อย่างสมบูรณ์ฉันจะติดมันไว้ แต่ต้องพึ่งพาเบราว์เซอร์เก่าเพื่อความเข้ากันได้แบบย้อนกลับ

— Demian Brecht
แหล่งที่มา

3

ใช้ไฟล์ HTML 5 Shim javascript ( remysharp.com/2009/01/07/html5-enabling-script ) เพื่อลดปัญหาความผิดพลาดด้านความเข้ากันได้ย้อนหลังที่อาจเกิดขึ้นกับเบราว์เซอร์เช่น Opera และ IE

— acconrad

แต่ไซต์ของคุณไม่เป็นมิตรกับการเขียนสคริปต์ที่ไม่สร้างความรำคาญ :)

— Demian Brecht

1

คุณหมายถึงชอบจนกว่า IE8 จะออกจากตลาด ... เช่นนั้นจนถึงปี 2016 ...:)

— Šime Vidas

@ Šime - อย่างแม่นยำ :) และการปิด Javascript ไม่ใช่ตัวเลือกในเบราว์เซอร์อีกต่อไป;)

— Demian Brecht

@ Agent_9191 วันนี้ฉันประหลาดใจมากเมื่อฉันต้องการตรวจสอบว่ามีคนใช้ IE7 กี่คนและเดาว่าในประเทศส่วนใหญ่มีผู้ใช้เบราว์เซอร์เช่น Opera หรือ iPad Safari มากกว่าใน IE7 ฉันมีความสุขมากที่สามารถยกเลิกการสนับสนุน IE7 ได้แล้ว! และ IE8 จะหายไปไม่ช้าก็เร็ว เป็นเบราว์เซอร์ที่ดื้อรั้นตัวสุดท้ายที่เราจะต้องเผชิญ (IE9 ไม่ได้เลวร้ายนักสำหรับการใช้รหัส)

— Camilo Martin

2

มันขึ้นอยู่กับคุณจริงๆ หากคุณมักจะใช้รายการที่ไม่เรียงลำดับเพื่อมาร์กอัปเมนูนำทางของคุณฉันจะบอกว่าให้ดำเนินการต่อในองค์ประกอบ <nav> จุดสำคัญขององค์ประกอบ <nav> คือการระบุการนำทางของไซต์ไปยังโปรแกรมอ่านคอมพิวเตอร์เป็นต้นดังนั้นไม่ว่าคุณจะใช้รายการหรือลิงก์เพียงอย่างเดียวก็ไม่มีสาระสำคัญ

— เอียนเดฟลิน
แหล่งที่มา

+1 เนื่องจากมีการกล่าวถึงว่าสำหรับโปรแกรมอ่านหน้าจอตอนนี้navs และas ดีพอ ๆ กับรายการ

— Camilo Martin

2

สำหรับฉันรายการที่ไม่เรียงลำดับเป็นมาร์กอัปพิเศษที่ไม่จำเป็นจริงๆ เมื่อฉันดูเอกสาร HTML ฉันต้องการให้เอกสารนั้นสะอาดและอ่านง่ายที่สุด เป็นที่ชัดเจนสำหรับผู้ดูแล้วว่ามีการนำเสนอรายการหากใช้การเยื้องที่เหมาะสม ดังนั้นการเพิ่ม UL ลงในแท็กเหล่านี้จึงไม่จำเป็นและทำให้การอ่านเอกสารยากขึ้น

แม้ว่าคุณจะได้รับความยืดหยุ่นบ้าง แต่ฉันเชื่อว่าเป็นความคิดที่ดีกว่าที่จะไม่ขยายมาร์กอัปด้วยคลาส ul ที่ไม่คาดคิดและจัดรูปแบบองค์ประกอบในคราวเดียว และคุณไม่มีข้อแก้ตัว: ใช้: before and: after pseudo-selectors

แก้ไข : ฉันได้รับแจ้งว่าโปรแกรมอ่านหน้าจอ ARIA บางตัวปฏิบัติต่อรายการต่างจากแท็กจุดยึดทั่วไป หากเว็บไซต์ของคุณมุ่งเน้นไปที่คนพิการฉันอาจพิจารณาใช้วิธีการตามรายการ

— revs1429980
แหล่งที่มา

1

ไม่พวกเขาเทียบเท่า โปรดจำไว้ว่า HTML 5 เข้ากันได้กับรายการ HTML 4 แบบย้อนหลังดังนั้นคุณสามารถใช้สิ่งเหล่านี้ได้อย่างอิสระ การแลกเปลี่ยนเป็นรหัสน้อยสำหรับรุ่นที่ 2

หากคุณมีความกังวลเกี่ยวกับความเข้ากันได้ย้อนหลังเกี่ยวกับการเบราว์เซอร์ให้แน่ใจว่าจะรวมถึงการชิมนี้เพื่อให้การทำงานของแท็กเช่นและ<nav><article>

— acconrad
แหล่งที่มา

8

รายการลิงก์จะให้ความหมายและความสามารถในการเข้าถึงเพิ่มเติม (เช่นโปรแกรมอ่านหน้าจอจะประกาศ "รายการสามรายการ" เมื่อคุณเข้าสู่การนำทาง)

— robertc

@robertc โปรแกรมอ่านหน้าจอเป็นจุดที่ดีมาก คุณน่าจะตอบได้! ฉันจะทำเครื่องหมายว่าถูกต้อง +1 ไม่ว่าในกรณีใด ๆ

— kikito

1

ถ้าเรากำลังพูดถึง "ตามหนังสือ" ก็ไม่; คุณไม่จำเป็นต้องใช้รายการเพื่อทำเครื่องหมายการนำทางของคุณ ข้อได้เปรียบที่แท้จริงเพียงอย่างเดียวคือให้ความยืดหยุ่นในระดับที่ดีขึ้นเมื่อจัดแต่งทรงผม

— Phil.Wheeler
แหล่งที่มา

1

ฉันต้องการให้<ul><li>แท็กเพราะแท็กใหม่ ( <nav>, <section>, <article>และอื่น ๆ ) เป็นเพียงรุ่นความหมายมากขึ้นของ<div>s

ด้วยเหตุผลเดียวกับที่คุณไม่มีลิงก์ใน a จำนวน<div>มาก แต่ควรมีโครงสร้างภายใน<nav>แท็กด้วย

— whostolemyhat
แหล่งที่มา

เหตุผลที่ฉันใช้ <ul> s แทนการเชื่อมโยงจำนวนมากใน <div> ในอดีตนั้นแน่นอนว่า <ul> s มีความหมายมากกว่า แต่ตอนนี้ <nav> มีความหมายมากขึ้น ฉันสับสน

— kikito

2

<ul> s ยังคงมีความหมายมากกว่าลิงก์ <a> ธรรมดา แต่ <nav> มีความหมายมากกว่า <div> <ul> vs <a> แยกเป็น <nav> vs <div>

— whostolemyhat

การไม่สนใจเรื่องความหมายไม่ใช่หนทางที่จะไปเมื่อเขียน HTML

— Andrew Marshall

1

มีโพสต์รายละเอียดเกี่ยวกับ CSS Tricks เกี่ยวกับคำถามที่แน่นอนนี้ เห็นได้ชัดว่าเป็นประเด็นที่ถกเถียงกันอย่างมาก โพสต์มีมากกว่า 200 ความคิดเห็น

การนำทางในรายการ: จะเป็นหรือไม่เป็น (CSS Tricks, ม.ค. 2013)

— Astrotim
แหล่งที่มา

นี่คือบทความติดตามที่พวกเขาเขียนcss-tricks.com/wrapup-of-navigation-in-lists

— Graham