Soll ich <ul> s und <li> s in meinen <nav> s verwenden?

114

Der Titel erklärt es ziemlich genau.

Jetzt, wo wir ein spezielles <nav>Tag haben,

Ist das:

<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>

besser als die folgenden?

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

Ich meine, vorausgesetzt, ich benötige keine zusätzliche DOM-Ebene für eine CSS-Positionierung / Auffüllung, was ist der bevorzugte Weg und warum?

Kikito
quelle
Das ist eine gute Frage ... Gilt bei Tags, die für HTML 4 keinen Sinn ergeben, eine der vorherigen Best Practices?
Guffa

Antworten:

63

Das nav-Element und die Liste enthalten unterschiedliche semantische Informationen:

  • Das nav-Element teilt mit, dass es sich um einen Hauptnavigationsblock handelt

  • Die Liste gibt an, dass die Links in diesem Navigationsblock eine Liste von Elementen bilden

Unter http://w3c.github.io/html/sections.html#the-nav-element können Sie sehen, dass ein nav-Element auch Prosa enthalten kann.

Ja, eine Liste in einem nav-Element zu haben, fügt Bedeutung hinzu.

Thomas Maas
quelle
Vielen Dank, das habe ich gebraucht! Auch der Kommentar von robertc über Bildschirmleser, die unten "Liste der 3 Elemente" ankündigen, war sehr nützlich.
Kikito
7
Das UL-Tag scheint nichts zu helfen: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
psycho brm
2
Der Link scheint für mich zu funktionieren. Lesen Sie unbedingt das Follow-up, in dem Listen und keine Listen als unentschieden deklariert werden. css-tricks.com/wrapup-of-navigation-in-lists
RobW
Meiner Meinung nach wird ein <nav>ohne <ul><li>es dynamischere Kindermenüs haben. Was ist, wenn Sie mehrere Menülisten haben, die einen anderen Typ und eine andere Position in der haben <nav>? Ich würde diese Menülisten wie <ul><li>in der gruppieren <nav>. Also, wenn Ihre Menüs regelmäßig haben, würde ich mit gehen <ul><li>.
Wonsuc
3

An dieser Stelle würde ich die <ul><li>Elemente beibehalten, da noch nicht alle Browser HTML5-Tags unterstützen.

Zum Beispiel bin ich auf ein Problem mit dem <header>Tag gestoßen - Chrome und FF haben wie ein Zauber funktioniert, aber Opera hat gegabelt.

Bis alle Browser HTML vollständig unterstützen, würde ich sie einbinden, mich aber aus Gründen der Abwärtskompatibilität auf die alten verlassen.

Demian Brecht
quelle
3
Verwenden Sie die HTML 5 Shim-Javascript-Datei ( remysharp.com/2009/01/07/html5-enabling-script ), um mögliche Abwärtskompatibilitätsfehler mit Browsern wie Opera und IE zu verringern.
acconrad
Aber dann ist Ihre Website nicht freundlich zu nicht aufdringlichen Skripten :)
Demian Brecht
1
Du meinst wie bis IE8 den Markt verlässt ... so wie bis 2016 ...:)
Šime Vidas
@ Šime - genau :) Und das Ausschalten von Javascript ist in Browsern keine Option mehr;)
Demian Brecht
@ Agent_9191 wird es - ich bin heute völlig überrascht, als ich nur überprüfen wollte, wie viele Leute noch auf IE7 sind und raten Sie mal - in den meisten Ländern gibt es mehr Leute in Browsern wie Opera oder iPad Safari als in IE7. Ich bin so froh, dass ich jetzt die Unterstützung für IE7 einstellen kann! Und IE8 wird früher oder später verschwinden. Es ist der letzte hartnäckige Browser, dem wir uns stellen müssen (IE9 ist nicht so schlecht, um dagegen zu programmieren).
Camilo Martin
2

Es liegt wirklich an dir. Wenn Sie normalerweise eine ungeordnete Liste verwendet haben, um Ihr Navigationsmenü zu markieren, würde ich sagen, dass Sie dies im <nav> -Element fortsetzen. Der Zweck des <nav> -Elements besteht darin, beispielsweise die Navigation der Site zu einem Computerleser zu identifizieren. Es ist also unerheblich, ob Sie eine Liste oder nur Links verwenden.

Ian Devlin
quelle
+1, weil erwähnt wird, dass navs und as für Bildschirmleser jetzt genauso gut sind wie Listen.
Camilo Martin
2

Für mich sind die ungeordneten Listen zusätzliche Markups, die nicht wirklich erforderlich sind. Wenn ich mir ein HTML-Dokument anschaue, möchte ich, dass es so sauber und einfach wie möglich zu lesen ist. Dem Betrachter ist bereits klar, dass eine Liste angezeigt wird, wenn der richtige Einzug verwendet wird. Das Hinzufügen des UL zu diesen a-Tags ist daher nicht erforderlich und erschwert das Lesen des Dokuments.

Obwohl Sie vielleicht etwas Flexibilität gewinnen, halte ich es für eine bessere Idee, das Markup nicht mit unsemantischen ul-Klassen aufzublähen und die a-Elemente auf einen Schlag zu stylen. Und Sie haben keine Entschuldigung: Verwenden Sie die Pseudo-Selektoren: vor und: nach.

Bearbeiten : Ich wurde darauf aufmerksam gemacht, dass einige ARIA-Screenreader Listen anders behandeln als einfache Ankertags. Wenn Ihre Website auf behinderte Menschen ausgerichtet ist, könnte ich den listenbasierten Ansatz in Betracht ziehen.

user1429980
quelle
1

Nein, sie sind gleichwertig. Denken Sie daran, dass HTML 5 abwärtskompatibel mit HTML 4-Listen ist, sodass Sie sie auch in derselben Hinsicht verwenden können. Der Kompromiss ist weniger Code für die 2. Version.

Wenn Sie Bedenken hinsichtlich der Abwärtskompatibilität in Bezug auf Browser haben, stellen Sie sicher, dass Sie diesen Shim einschließen , um die Funktionalität von Tags wie <nav>und bereitzustellen <article>.

acconrad
quelle
8
Eine Liste von Links bietet zusätzliche Semantik und Zugänglichkeit (z. B. geben Bildschirmleser beim Aufrufen der Navigation die Liste der drei Elemente an).
Robertc
@robertc Der Screenreader-Punkt ist sehr gut. Du hättest es auf eine Antwort setzen sollen! Ich hätte es als richtig markiert. +1 auf jeden Fall.
Kikito
1

Wenn wir "nach dem Buch" sprechen, dann nein; Sie müssen keine Listen verwenden, um Ihre Navigation zu markieren. Der einzige wirkliche Vorteil, den sie bieten, besteht darin, ein besseres Maß an Flexibilität beim Styling zu bieten.

Phil.Wheeler
quelle
1

Ich würde die halten <ul><li>Tags, weil die neuen Tags ( <nav>, <section>, <article>usw.) sind nur mehr semantische Versionen <div>s.

Aus dem gleichen Grund würden Sie nicht nur eine Menge Links in einem haben <div>, sie sollten auch innerhalb eines <nav>Tags strukturiert sein .

whostolemyhat
quelle
Der Grund, warum ich in der Vergangenheit in einem <div> <ul> s anstelle vieler Links verwendet habe, war genau, dass <ul> s semantischer waren. Aber jetzt sind <nav> s semantischer. Ich bin verwirrt.
Kikito
2
Die <ul> s sind immer noch semantischer als einfache <a> -Links, aber <nav> ist semantischer als <div>. Das <ul> vs <a> ist getrennt von <nav> vs <div>
whostolemyhat
Sich beim Schreiben von HTML nicht um Semantik zu kümmern, ist nicht der richtige Weg.
Andrew Marshall