2009-05-06 7 views
3

Ich arbeite an der Entwicklung einer Web 2.0-Website, und ich habe untersucht, wie Websites mit Menüs und Nav-Bars umgehen. Viele Sites (wie Twitter) verwenden ULs, während Sites wie stackoverflow Divs verwenden, die IDs mit Links sind.HTML-Site-Entwicklung: div vs vs für Navigation und Menüs

Gibt es einen Vorteil, UL nicht zu verwenden, außer es beseitigt einige IE Bugs?

Gibt es einen Vorteil bei der Verwendung von UL?

Danke!

+0

Eigentlich verwendet Stack-Überlauf ein ul für die Fragen/Tags/Benutzer usw. Navigationsliste. – Chuck

+0

ja, aber für die Fußzeile nav und die 'Abmeldung | über | faq 'ist ein div –

Antwort

9

Ich persönlich benutze ul/li für alle meine Menüanforderungen, da es sogar für einen nicht gestylten Browser (Links zum Beispiel) klarstellt, dass es sich um ein Menü irgendeiner Art handelt und dass es sich um verschiedene Links handelt, die zu verschiedenen Teilen führen auf einer Website.

Nicht nur das, aber das Markup ist bemerkenswert einfach und ermöglicht sehr interessante Dinge mit ul, li und a zu tun, um tolle Menüs mit CSS mit verschiedenen Optionen, CSS Sprite Hintergründe zu machen.

Die Verwendung von divs macht dies ebenfalls möglich, macht aber die Absicht weniger deutlich. Mit einem Browser, der das richtige CSS-Layout erstellt, werden Sie keinen Unterschied bemerken und der einzige, der Sie kennen wird, sind Sie und der Benutzer, der eine Ansichtsquelle erstellt.

Es kann einen Unterschied machen, wenn Sie den dom mit Hilfe von JavaScript analysieren müssen, kann es nicht ...

+0

Danke, ich denke, klare Absicht ist wichtig, wenn Sie mit Entwicklungsteams arbeiten, und mit Was sagte Sohnee über Display: Block, ich denke, ich kann alles erreichen, was ich brauche. –

+0

Wenn Ihre Site 508-Konformität erfordert (oder jemals erfordert), hilft die hierarchische Struktur von mehreren verschachtelten ul, li für die Navigation in Textreader. –

13

Es hängt davon ab, wie Sie es betrachten, UL steht für ungeordnete Liste. Das Einfügen von Dingen in ein UL-Element ist eine semantische Art zu sagen, dass die Elemente untergeordnete Elemente (<li>) Listenelemente und daher eine logische Gruppe sind. Das gibt dem Stück HTML mehr Struktur/Bedeutung als nur ein paar div Tags.

Ist ein Menü eine Liste? Ich denke schon. Also, wenn Sie für etwas wie dieses bevorzugen können, die ul.

ul kann mit css schwieriger zu stylen, vor allem wenn das Menü horizontal ist.

+2

Ich stimme mit allem außer dem letzten Satz überein. Sie sind wirklich einfach zu stylen, fast genau wie ein Div in der Tat, wie Sie das li-Element einstellen können: block, an dem Punkt haben Sie sich selbst etwas wie ein div. – Fenton

+0

Beachten Sie das Wort * can * in diesem Satz und beziehen sich auf horizontal. Sobald Sie wissen, wie es nicht so schlecht ist ... aber es braucht mehr css und Wissen, um eine ul horizontal zu stylen, keine Ticks, etc ... –

8

ULs sind freundlicher für Bildschirmleser und sind eine Möglichkeit, Sie zwingen, das Menü von anderen HTML sauber zu halten. Die li-Tags können im Prinzip wie divs behandelt werden, wenn Sie das wollen.

Also im Grunde ist der Unterschied, dass der UL-Tag ein bisschen mehr spezialisiert ist, aber im Wesentlichen das gleiche wie divs liefern könnte.

Verwandte Themen