2009-06-24 8 views
55

Scheint austauschbar?Wann UL oder OL in HTML zu verwenden?

+3

Sie sollten wirklich andere Namen gewählt haben, als wenn Sie zuerst darüber lernen, ist es verwirrend, da eine visuelle Liste offensichtlich in einer bestimmten Reihenfolge angezeigt wird. Sie sollten es wie (für Aufzählungsliste) und benannt haben (für nummerierte Liste). –

Antwort

72

UL bedeutet "ungeordnete Liste". OL bedeutet "geordnete Liste".

UL liefert Ihnen Aufzählungspunkte. OL bekommt Zahlen.

Definitiv nicht austauschbar.

+14

Nun, technisch können Sie ändern, wie die Liste mit CSS (List-Stil) erscheint. Aber ja, semantisch sollte UL für ungeordnete Daten und OL für geordnet verwendet werden. – jimr

+0

Sehr wahr. CSS ist nur die Anzeige der Daten; Es ist der semantische Unterschied, der wichtig ist, IMO. – Randolpho

+0

-1 - Die Tatsache, dass die Standardanzeige anders ist, sollte keinen Einfluss darauf haben, welche Sie verwenden möchten. Ich werde den Downvote abbrechen, wenn das Display etwas entfernt oder geklärt ist. –

13

OL:

  1. Liste Artikel 1
  2. Liste Artikel 2

UL:

  • Liste Artikel 1
  • Liste Artikel 2

OL ist geordnete Liste, UL ist ungeordnete Liste

+0

Für OL, ist die Nummer zu verbergen? – omg

+0

Wie in den anderen Posts erwähnt, können Sie css list-style verwenden: none; um es zu verstecken. Kann auch List-style-type verwenden, um das Aussehen zu stören. Wenn du einen Downvote machst, hinterlasse einen Grund. – Zach

+0

Got it. Und was, wenn ich den Rand zwischen jedem UL-Element festlegen möchte? – omg

25

Eine ist geordnete Liste (OL), es ist für Dinge, die eine definierte und eindeutige Reihenfolge haben. Es gibt einen Grund, warum sie organisiert sind.

Die andere (UL) ist ungeordnete Liste, die nur eine Sammlung von Dingen in keiner bestimmten Reihenfolge ist. Ihre Organisation ist trivial.

+9

Ja. Was die anderen nicht erwähnen, ist, dass die Zahlen oder Aufzählungszeichen nur die Standardformatierung sind. Die semantische Bedeutung ist die Hauptsache. –

+1

BTW, wie die Kugeln von UL durch CSS zu verbergen? – omg

+9

Listenart: keine; –

7

Ich denke, es ist ein sematischen Problem, da die Nummerierung/Aufzählungspunkte können durch CSS verändert werden.

Sortierte Listen sollten Dinge wie Anweisungen, oder jede sequentielle Informationen sein.

Ungeordnete Listen sollten alles andere sein.

+2

es Schlag mich. Danke für die Semantik. –

44

Bei <ol> ist die Reihenfolge der Daten wichtig und wird (standardmäßig) angezeigt, während bei <ul> die Reihenfolge nicht so wichtig ist. Beispiel:

<p>Tomorrow I will</p> 
<ol> 
<li>Wake up</li> 
<li>Have breakfast</li> 
<li>Go to sleep</li> 
</ol> 
<p>During breakfast, I will eat</p> 
<ul> 
<li>Butter</li> 
<li>Eggs</li> 
<li>Bacon</li> 
</ul> 
3

Verwenden OL, wenn Sie die Schritte Auflistung sind, die in einer bestimmten Reihenfolge durchgeführt werden müssen. Verwenden Sie UL, wenn Sie Artikel in einer bestimmten Reihenfolge von Wichtigkeit auflisten.

17

Haha, so viele Antworten!

Als HTML zuerst herauskam, gab es OL und UL, die, wie alle anderen Plakate gesagt haben, geordnete Liste und ungeordnete Liste bedeuteten.

Der Unterschied war einfach. OLs angezeigt ... eine Zahl neben ihnen. Oder eine römische Ziffer oder ein Buchstabe! Sie könnten sogar kontrollieren, ob es Großbuchstaben oder Großbuchstaben verwendet! Cool!

ULs gaben Ihnen Kugeln. 3 Arten von Kugeln, gerade - Scheiben (leere Kreise), Quadrate (gefüllte Quadrate), Kreise (gefüllte Kreise.)

Es gab keine CSS. Abgesehen von diesen Attributen gab es nicht wirklich eine Möglichkeit, die Listenformate (und Ränder und Interpretationen und alles andere) anzupassen. Diese Unterscheidung war also wichtig.

Heutzutage ist alles CSS.In der Tat wollen die Leute von w3, dass Sie Styles anstelle des HTML-Attributs "type" verwenden, das Sie verwendet haben. Die Verwendung von UL vs OL spielt also keine Rolle, wenn Sie einer der neumodischen CSS-Benutzer sind.

Mit CSS können Sie den Aufzählungstyp ändern oder ein Bild verwenden oder die Ränder/Stile/Einrückungen ändern oder überhaupt kein Aufzählungszeichen anzeigen.

Nochmals bearbeiten: Diese Antwort ist nicht wirklich gedacht, um die semantischen Vorteile von UL vs OL zu adressieren. Aber technisch (Sie wissen, in den Bits und Bytes) oben skizziert die Unterschiede im Verhalten.

+7

Das richtige ist, die Unterscheidung zu machen, weil Sie nicht wissen, wie der Benutzer die Information erreichen wird. Vielleicht unterstützt sein Browser kein CSS oder er benutzt einen Bildschirmleser oder was auch immer. Semantisch sind sie nicht gleich, also müssen Sie sie unterscheiden. – basaundi

46

In Mathematik ausgedrückt (hey, warum nicht?), Stellt eine <ol> eine Sequenz dar, während <ul> eine Menge darstellt. Das Umordnen der Elemente in einer geordneten Liste ändert die Bedeutung der Liste. Das Neuordnen in einer ungeordneten Liste tut dies nicht.

Dies ist eine gute Faustregel für die Art der zu verwendenden Liste. Wenn das Ändern der Reihenfolge der Elemente die Liste falsch macht, möchten Sie <ol> verwenden. Wenn die Reihenfolge keine Rolle spielt, verwenden Sie <ul>.

+5

Sequenz vs Set ist eine lustige Metapher, außer dass ein mathematischer Satz Wiederholungen nicht erlaubt, während eine HTML ungeordnete Liste tut. – jtmoulia

+0

Ich glaube, du meintest "aber" statt "außer". Die Tatsache, dass "ein mathematischer Satz keine Wiederholungen zulässt, während eine html-ungeordnete Liste dies tut", ändert nichts an der Tatsache, dass "Sequenz vs Satz eine lustige Metapher ist". ratskin

1

ul bedeutet keine Liste. Es ist für Listen in whick es ist egal, in welcher Reihenfolge die Listenelemente sind.

ol bedeutet geordnete Liste. Es ist für Listen, die nummeriert sind oder in irgendeiner Weise zeigen, dass sie eine bestimmte Reihenfolge haben.

Standardmäßig erhält ul Ihnen Aufzählungslisten und nummerierte Listen, obwohl diese in CSS bearbeitet werden können.

7

Als Frage stellt „wenn sie benutzen“, dachte ich geeignete Beispiele zu bieten, wenn ich entscheiden in der Regel OL zu verwenden, wenn ich eine Reihe von Schritten wollen, und UL, wenn ich will Entscheidungen bieten:

geordnete Liste

Hier die Schritte für den Geschäftsfall von entscheidender Bedeutung sind, müssen wir die Schritte in dieser Reihenfolge tun, damit eine geordnete Liste verwendet wird.

Checkout-Phasen im eCommerce werden diese Schritte in dieser Reihenfolge ausgeführt.

<ol> 
    <li>shipping</li> 
    <li>billing</li> 
    <li>summary</li> 
    <li>confirmation</li> 
</ol> 

Ungeordnete Liste

Ein Benutzer in der Größenordnung entscheiden kann sie wählen, um mit diesen Entscheidungen

<ul> 
    <li>Contact Us</li> 
    <li>Newsletter Signup</li> 
    <li>Terms</li> 
    <li>Log out</li> 
</ul> 
1

In einigen Fällen (insbesondere von Screen Readers für Menschen verwendet, um die Interaktion mit spezielle Bedürfnisse) möchten Sie möglicherweise eine Liste bestellt haben, aber keine Nummern aufgrund visueller Gestaltung mit ihnen verbunden haben. Bsp. Wenn Sie auf einer Seite Anweisungen zum Ausfüllen eines Formulars angegeben haben und möchten, dass Bildschirmleseprogramme die bestellten Elemente in den Anweisungen verwenden, ist dies nützlich. Für alle visuellen Zwecke können sie über CSS genau gleich aussehen. Es ist die (nicht visuelle, aber hilfreiche Screenreader) Semantik, die anders und manchmal nützlich ist.

1

http://techuap.com/category/tips/computer-programming-tips

Verwenden OL, wenn Sie die Schritte Auflistung sind, die in einer bestimmten Reihenfolge durchgeführt werden müssen. Verwenden Sie UL, wenn Sie Artikel in einer bestimmten Reihenfolge von Wichtigkeit auflisten. Standardmäßig erhält ul Bullet-Listen und nummerierte Listen, obwohl diese in CSS bearbeitet werden können. danke ..

Verwandte Themen