Warum sollte ich 'li' anstelle von 'div' verwenden?

Ich bin mir nicht sicher, warum ich ul-li verwenden muss, anstatt einfach divs zu verwenden, wenn ich Elemente aufliste. Ich kann beide genau gleich aussehen lassen. Wo liegt also der funktionale Vorteil beim Erstellen einer ungeordneten Liste gegenüber dem Aneinanderreihen von Divs?

Für semantische Korrektheit. HTML kann Listen von Dingen ausdrücken und hilft dem Google-Roboter, Bildschirmlesern und allen Arten von Nutzern, die sich nicht nur für die Präsentation der Website interessieren, Ihren Inhalt besser zu verstehen.

Ich bin mir nicht sicher, warum ich ul-li verwenden muss, anstatt einfach divs zu verwenden, wenn ich Elemente aufliste. Ich kann beide genau gleich aussehen lassen

Dass es das Schlüsselwort in Ihrer Frage gibt: "schauen". Können Sie sie auch geben für blinde Menschen das gleiche eines Braille - Reader? Können Sie sie mit einem Text-zu-Sprache-Synthesizer für Blinde gleich klingen lassen ? Können Sie sie mithilfe von benutzerdefinierten clientseitigen CSS-Benutzer-Stylesheets für Sehbehinderte immer noch gleich aussehen lassen?

Das Wort "Look" ist ein sehr gefährliches Wort. Wenn Sie es in Bezug auf HTML verwenden, sollten alle Alarme in Ihrem Kopf ausgelöst werden. HTML ist eine Sprache zur Beschreibung der semantischen Struktur eines Hypermedia-Dokuments. Eine semantische Struktur nicht hat einen „Look“, es ist ein abstrakter Begriff.

Auch wenn Sie sich nicht für diesen semantischen Hokuspokus interessieren und sich nicht für Blinde interessieren, bedenken Sie Folgendes: Google, Yahoo, MSN und Co. haben keine Augen, sie "schauen" nicht auf Ihr gerendertes CSS .

Durch die Verwendung von semantisch korrektem Markup binden Sie zusätzliche Informationen in Ihren Text ein. Mit ul / li kommunizieren Sie der konsumierenden Anwendung, dass die Informationen eine Liste sind und nicht nur "etwas" (wer weiß was), das ein Text in einem beliebigen Element ist.

Direkte Antwort auf Ihre Frage: Der funktionale Vorteil besteht darin, dass Divs für sich genommen wenig bedeuten, während ul lis explizit bedeutet, dass dies eine ungeordnete Liste von Elementen ist.

Der Begriff "Semantik" bezieht sich auf die Art und Weise, wie Sie die inhärente Bedeutung vorhandener Strukturen verwenden, um eine explizite Bedeutung zu erstellen. HTML besteht aus Tags, die bestimmte Dinge für sich bedeuten. Und es gibt festgelegte Regeln / Richtlinien / Verwendungsmöglichkeiten, damit Ihr veröffentlichtes HTML-Dokument vermittelt, was es bedeuten soll.

Wenn Sie etwas in Ihrem Dokument auflisten, fügen Sie eine geordnete Liste (UL) oder eine ungeordnete Liste (OL) hinzu. Auf der anderen Seite wird das DIV-Element (Page Division) verwendet, um einen bestimmten und separaten Inhalt zu erstellen.

Die div Element "teilt". Wenn Sie sich eine Seite ansehen, gibt es bestimmte Teile wie einen Inhaltskörper, die Fußzeile, eine Kopfzeile, eine Navigation, Menüs, Formulare usw. Sie können div- Tags verwenden, um diese Unterteilungen zu erstellen. Häufig entsprechen die Seitenteile einem visuellen Layout. Daher ist die Verwendung expliziter Seitenteile (DIVs) zum Aufteilen Ihres Layouts in CSS eine natürliche Anpassung. Auf diese Weise werden die div- Tags strukturell.

Wenn Sie das div- Tag missbrauchen oder überbeanspruchen , kann dies zu einer unbeabsichtigten Bedeutung und einem Aufblähen des Codes führen.

Um die Sache zu verwirren: Google verwendet h3 und div , um die aufgelisteten Suchergebnisse zu "teilen". ul> li> h3 + div

Wenn Sie also alle Stile deaktivieren (Umschalt + Befehlstaste / Strg + S in Firefox mit WebDeveloper-Symbolleiste), wird die Divs und natürlich . Ihr nackter HTML-Code sollte immer noch eine schöne Seite mit einer klaren Hierarchie rendern: von oben nach unten, der wichtigste Inhalt zuerst und Listen mit Aufzählungszeichen und Zahlen für aufgelistete Elemente. Es ist eine gute Idee, oben einen Link hinzuzufügen (für nicht visuelle Benutzer), mit dem Sie zu folgenden Themen springen können: Hauptinhalt, wichtige Formulare oder Hauptüberschriften (wie ein Inhaltsverzeichnis).

Denken Sie schließlich daran, dass Sie ein Dokument erstellen. Ohne alle visuellen Effekte sollte es immer noch ein schlüssiges Dokument sein.

Es wird viel über die Verwendung <li>oder Verwendung gesprochen, <div>aber kein einziger Kommentar gab ein solides Beispiel für den Inhalt dieser Tags. Mein Gefühl ist das <ul>und<li> nicht wirklich so wichtig, da ich Ihnen nicht sagen kann, wann ich das letzte Mal tatsächlich eine "Liste" von Dingen auf einer Website, Zeitung oder Zeitschrift gelesen habe - online oder in gedruckter Form.

<div>ist viel vielseitiger. Wenn Sie Zutaten für einen Kuchen auflisten, ist das eine Liste. Wenn Sie Dinge auflisten, die Sie für eine Wanderung mitnehmen möchten, ist dies eine Liste.

Aber was ist mit einer Benutzerform, die zum Beispiel einige zufällige Dinge auflistet, die nicht wirklich eine Liste, eine Reihe von Absätzen oder alle "Überschriften" sind? Einige Dinge sind Datumsangaben, andere Kontrollkästchen und andere Text. Teilen Sie es auf, wenn Sie mich fragen. Eine blinde Person wäre falsch informiert , wenn es markiert wurde <ul>und <li>und sie hörten : „Hier ist eine Liste von ...“ , wenn es nur ein Sammelsurium von Sachen, nicht wirklich eine Liste.

Sie sollten geeignete Tags für den Inhalt verwenden, den Sie einfügen möchten. Dies bedeutet nicht nur, dass ul / li besser für Listen geeignet ist. Dies bedeutet auch, dass Sie den Inhalt Ihrer Liste berücksichtigen müssen, um festzustellen, ob es sich um eine ungeordnete / geordnete Liste oder eine Definitionsliste handelt.

Ein weiteres Argument ist das, wenn Sie CSS deaktivieren. Der Browser rendert sein Standard-Styling, wodurch es einfacher wird, zu prüfen, ob alternative Browsing-Geräte verwendet werden. Es verbessert auch die Zugänglichkeit.

Wenn Sie stattdessen div verwenden, kann lynx die Seite nicht lesbar rendern.

Ich persönlich mag Li für die Semantik. Wenn Sie die Quelle anzeigen, sehen Sie sofort, dass Sie eine Liste von etwas haben, wenn diese von einem Li umschlossen sind. Eine div-Auflistung hat keine semantische Bedeutung, und normalerweise wird die einzige Semantik der Liste von den CSS-Klassen wie "listItem" eingeführt. Was offensichtlich darauf hinweist, dass ein Li überhaupt hätte verwendet werden sollen.

Wenn Sie eine Schleife in Ihrer Präsentationslogik haben, bevorzuge ich immer ein Li gegenüber einem Div.

<li> bedeutet ein Element in einer Liste, mit dem Parser (Browser, Suchmaschinen, Spinnen) wissen, dass Sie Elemente auflisten. Sie können DIV anstelle von LI verwenden, aber diese Parser würden nie wissen, dass diese Elemente aufgelistet werden, und DIV beschreibt nichts wirklich, außer dass es sich um einen Block handelt.

Das hängt vom Projekt ab. Ich habe kürzlich ein Projekt durchgeführt, bei dem ein Menü anhand einer Liste erstellt wurde. Sie wollten eine Reihe von Effekten wie Schieben / Verblassen hinzufügen und es mit mehreren Ebenen zusammenklappbar machen.

In diesem Fall waren DIVs viel besser geeignet. Ich konnte Container für untergeordnete Divs erstellen und jQuery anwenden, um die gewünschten Effekte zu erzielen.

Auch wenn Ihr Projekt diese Anforderungen noch nicht erfüllt, ist es möglicherweise ratsam, darüber nachzudenken, wie Sie es in Zukunft ändern können ...

Die Verwendung <li>(falls zutreffend) reduziert die <div>Tag-Suppe, die Sie so oft auf Webseiten sehen, was Entwicklern sehr hilft.

Nicht, dass <div>das schlecht wäre, aber wenn ein Tag überbeansprucht wird (wie so <div>oft), wird die semantische Bedeutung des Tags so weit verwässert, dass es völlig nutzlos ist. Ich habe dies kürzlich von einem Auftragnehmer erfahren, den wir beauftragt haben, mit dem CSS / UI unserer Web-App zu helfen, und der Unterschied, den es zur Lesbarkeit / Wartbarkeit des HTML-Codes gemacht hat, ist für mich sehr auffällig.

Wenn es Ihnen nur darum geht, dass Listen mit minimalem Aufwand auf eine bestimmte Weise angezeigt werden, ist dies bereits ein Kinderspiel: Es <li>ist ein Zeichen weniger einzugeben als <div> und das schließende Tag ist in HTML optional.

Und das zusätzlich zu dem, was alle anderen über Semantik gesagt haben.

Zum korrekten Rendern in primitiven Browsern oder Mobilgeräten

Ihre Frage ist bereits beantwortet von Ich möchte meine zwei Cent hier hinzufügen. Ich habe an einem Projekt gearbeitet, in dem ich die Backend-Logik erstellt habe und meine Daten zu einer von meinem Designer erstellten Seitenvorlage zusammengefasst wurden. Er verwendete ul- und li-Tags, um jede Art von Liste auf der Seite darzustellen, von denen einige Widgets waren. Die Daten stammten von einem CMS, in dem Benutzer Rich-Text über HTML-Tags eingeben konnten. Als Benutzer anfingen, Listen in ihrem Inhalt zu erstellen, sahen die Listen nicht mehr wie Listen mit Aufzählungszeichen aus, sondern vermasselten die gesamte Seite.

Lektion gelernt: Verwenden Sie keine Listen-Tags mit generischen CSS-Selektoren, wenn Ihr Inhalt HTML in sich enthalten kann.

eine andere Sache über ul li ist; Sie können ul als Container verwenden, mit dem Sie die Style-Klasse festlegen können

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Ich mag dieses Muster, wenn ich ul benutze

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Natürlich kommt es darauf an, wie wir es nutzen wollen und wie es uns gefällt. So mag ich es

Hoffnung hilft Danke