Warum wird die Verwendung einer UL-, LI-Struktur in Menülisten akzeptiert?

Question

Ich bin neu in HTML. Als ich angefangen habe, Dokumentation über Listen zu lesen, habe ich festgestellt, dass überall eine , <li> Struktur verwendet wird, selbst für die Erstellung sehr einfacher Listen.

Aber für mich ist es am bequemsten nur <a> Elemente mit CSS zu verwenden:

display: block; 
/* and/or */ 
float: left; 

Also, warum <ul> verwenden <li> statt nur <a>?

Vielen Dank.

Answer 1

Da strukturell sind sie die am besten geeigneten Elemente für diesen Zweck. Außerdem können Bildschirmleser die Elemente einer Seite richtig diktieren.

Denken Sie daran, dass HTML für Markup/Inhalt (was ist dieser Text? Ein Absatz? Wickeln Sie es in einem p-Tag), CSS ist für Styling, JS ist für das Verhalten.

Sie können Tausende von Ankern auf Ihrer Webseite haben, aber was ist, wenn Sie Anker, die in aufgelisteten Elementen verschachtelt sind, anders als andere Anker formatieren möchten?

<ul> 
<li><a href="#">blah</a></li> 
</ul> 

<a href="#">sfl</a> 

Wenn Sie die Dinge richtig gemacht hätte, wäre Ihre CSS trivial implementieren

a { } 
ul li a { } 

Sonst würde man Klassen um Anker werfen müssen und es wäre chaotisch und unstructural sein.

In Bezug auf die SEO - ich glaube, dass in der Vergangenheit semantisch markiertem Code nicht viel tragend, aber heutzutage mit Spezifikationen wie RDF, HTML 5 Elemente wird das Web mehr und mehr semantisch, so dass es nur vorteilhaft ist sei so semantisch wie du nur sein kannst.

Im Jahr 2010 angegeben Google drei Formen von strukturierten Metadaten, die ihre Systeme verwenden strukturierte semantischen Inhalt in Web-Seiten zu finden. Solche Informationen, wenn Personenprofile, Brancheneinträge zu Bewertungen, bezogen, und Veranstaltungen werden von Google verbessern den ‚Schnipsel‘ oder kurzes Stück von zitierten Text verwendet werden, die angezeigt wird, wenn die Seite in Suchergebnislisten erscheint . Google gibt an, dass diese Daten unter Verwendung von Mikrodaten, Mikroformaten oder RDFa angegeben werden können. [13] Microdata wird innerhalb itemtype und itemprop Attribute angegeben, die zu vorhandenen HTML Elementen hinzugefügt werden; Microformat-Schlüsselwörter sind innerhalb Klassenattributen wie oben diskutiert hinzugefügt; und RDFa stützt sich auf die Attribute rel, typeof und property , die zu bestehenden Elementen hinzugefügt wurden. [14]

Answer 2

Da Ihr Markup eher semantisch als nur zu Anzeigezwecken verwendet werden soll.

Jeder, der Ihr Dokument liest, kann sofort erkennen, dass ein mit <ul><li>...</li></ul> Tags versehener Bereich eine Liste ist.

CSS beschreibt nicht was etwas ist, nur wie es gerendert werden soll. Im Idealfall sollten Sie Ihr Dokument markieren, um zu beschreiben, was jeder Teil ist, und dann CSS verwenden, um diese Teile entsprechend zu rendern.

Answer 3

Da UL, LI und OL sind die HTML-Elemente mit dem besonderen Zweck des Seins Listen erstellt. Durch die Verwendung des richtigen Markups fügen Sie Ihrem Inhalt weitere Informationen hinzu. Jedes automatisierte Tool, das Ihren Code sieht, weiß, dass es sich um Listen handelt, die in der Lage sind, entsprechend zu handeln.

Wenn Sie Links in einem Listenelement möchten, können Sie ein A-Element innerhalb des LI geschachtelt setzen:

<ul> 
    <li><a href="example.com">Example</a></li> 
</ul> 

Answer 4

Für diejenigen, die nicht überzeugt genug von Semantik, ich glaube, seine Messe auch zu erwähnen, dass eine Liste mit Das Tag kann schön erweitert werden, um die Navigation auf der zweiten Ebene einzuschließen. Dann fügen Sie etwas css (und etwas Javascript für IE) und bosh ... Sie haben superfish Menüs.