Welche Vorteile hat das li als Navigations Tag?

Darkxor

Hallo zusammen,

man sieht ja immer häufiger die <ul><li> Verwendung auch in waagerechten Navigationen. Macht das wirklich Sinn?

Ich muss zugeben auch ich hab dies schon häufiger benutzt, doch wenn man eine waagerechte Navigation zentrieren möchte, ist das soweit ich weiß nur über eine padding/margin Lösung zu erreichen, welche im Bereich der Dynamik (unterschiedliche Navigationstexte und entsprechend unterschiedliche Breiten) eher negativ zu beurteilen ist.

Da wäre die normale Lösung, die Links aneinanderzureihen doch deutlich besser, da man beispielsweise text-align:center nutzen kann?

Danke!

sejuma

Listenmenüs haben sich eben eingebürgert und lassen sich im Falle von Untermenüs leichter behandeln.
Wenn du ein normales, horizontales Menü haben willst, spricht m.E. nichts dagegen, das so wie von dir beschrieben zu machen, da "a" ein Inline-Element ist und sich so auch leichter zentrieren lässt.

Man kann aber auch eine ul-Liste ohne feste Breite mit einem kleinen Trick zentrieren: http://www.ohne-css.gehts-gar.net/0063.php

Dodo

An sich ist es sowieso egal, welche Elemnte du verwendest. Du kannst mit (fast) jedem Element (fast) alles designen.
Du kannst einen Textabsatz mit A machen, eine Tabelle, verschachtelte DIVs, eine Liste, etc.

Aber wenn du nach den Grundgedanken von HTML nachdenkst, kann nur eines die Frage richtig beantworten.
Der Grundgedanke von HTML (und anderen XML-ähnlichen Sprachen ist, dann Daten so dargestellt werden, dass die Informationen richtig benannt werden. Stichwort: Semantik.

Und wenn du nach diesem Merksatz deine Website aufbaust, kannst du dein Menü nur auf eine Weise richtig auszeichnen:
Ein Menü ist kein Textabsatz, ein Menü ist keine tabellarische Darstellung von Daten, ein Menü sind keine verschachtelten Container. Sondern ein Menü ist eine Liste aus Links, die zur Navigation dienen.
Jedes Menü ist eigentlich eine ungeordnete Liste - sie wird jedenfalls von unserem Hirn so gesehen: Mehrere Links in einer Reihe.

Nun stellt sich die Frage: Wozu Semantik?
Semantik dienst zur Strukturierung von Informationen.
Das sieht man auch in den Programmiersprachen. Man kann Variablennamen namens a, b, c und d vergeben. Syntaktisch absolut richtig und es funktioniert.
Aber wenn man query_string, summe, buffer oder ausgabe schreibt, ist das ganze um einiges lesbarer.

Das verhält sich in HTML genauso. CSS bietet genügend Werkzeuge um ein semantisch richtiges Menü schön zu gestalten

Darkxor

Hallo,
danke für eure Antworten.

Die Lösung von sejuma ist ja genial und hat bei mir auch funktioniert. Allergings scheint das float:left; im .container unnötig zu sein.

Grevas

Es gibt noch einen Grund:
Wenn der Client kein CSS Unterstützt, siehts nicht behämmert aus .

Man kann aber auch seine eigenen Elemente definieren - ist kein Problem. Wenn man mit HTML 5 arbeiten möchte, muss man das sogar (für die Browser die kein HTML 5 unterstützen). Zumindest solang dahinter keine Funktionalität steht - dann wirds nämlich nicht ganz so einfach.

Zu Darstellungszwecken muss man nur die entsprechenden CSS Eigenschaften festlegen z.B.

HTML

<h0>Custom Headline</h0>


<style>
h0 {
    display: block;
    font-weight: bold;
    font-size: 2.5em;
    text-decoration: underline;
}
</style>

Alles anzeigen

Funktioniert.

Aber n eigenen <a> tag nur mit CSS erstellen kann man nicht . Wenn man es denn unbedingt will, muss man dafür eine entsprechende JavaScript Funktion schreiben.

Tags