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

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?

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.

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.

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.

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.

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

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.

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 .

Zu genau dieser Frage gibt es einen sehr detaillierten Beitrag zu CSS-Tricks. Es ist offensichtlich ein heiß diskutiertes Thema; Der Beitrag hat über 200 Kommentare.

Navigation in Listen: Sein oder Nichtsein (CSS Tricks, Jan 2013)