Listen werden häufiger verwendet, als Sie vielleicht denken. Wenn Sie jemals einen Programmierkurs absolviert haben, war das erste Projekt möglicherweise das Erstellen einer Einkaufsliste oder einer To-do-Liste. Das sind Listen. Multiple-Choice-Tests sind in der Regel nummerierte Fragenlisten: Die mehreren möglichen Antworten für jede Frage sind verschachtelte Listen.
HTML bietet uns verschiedene Möglichkeiten zum Auszeichnen von Listen. Es gibt geordnete Listen (<ol>), unsortierte Listen (<ul>) und Beschreibungslisten (<dl>).
Listenelemente (<li>) sind in geordneten und unsortierten Listen verschachtelt. Innerhalb einer Beschreibungsliste finden Sie Beschreibungsbegriffe (<dt>) und Beschreibungsdetails. <dd>. All diese werden wir hier behandeln.
In HTML-Formularen bestehen Listen mit <option>-Elementen den Inhalt von <datalist>, <select> und <optgroup> innerhalb einer <select>. Diese werden in HTML-Formularen erläutert.
In Menüs und ungeordneten Listen werden Listenelemente normalerweise in Aufzählungspunkten dargestellt. In geordneten Listen ist ihnen normalerweise ein aufsteigender Zähler wie eine Zahl oder ein Buchstabe vorangestellt. Die Aufzählungszeichen und die Nummerierungsreihenfolge können mit HTML, CSS oder beidem gesteuert oder umgekehrt werden.
Standardmäßig werden geordneten und ungeordneten Listeneinträgen Zahlen oder Aufzählungspunkte vorangestellt. Aber auch wenn Listen nicht wie Listen aussehen sollen, benötigen Sie dennoch eine Liste von Elementen, z. B. in Navigationsleisten, eine To-do-Liste mit Kästchen anstelle von Aufzählungszeichen oder Richtig-und-Falsch-Fragen in einem Multiple-Choice-Test. Bei allen Listen ohne Aufzählungszeichen empfiehlt es sich, HTML-Listenelemente zu verwenden.
Unsortierte Listen
Das <ul>-Element ist das übergeordnete Element für unsortierte Listen von Elementen. Die einzigen untergeordneten Elemente einer <ul> sind ein oder mehrere <li>-Listenelementelemente. Lassen Sie uns eine Liste mit Maschinen erstellen. Wir verwenden eine unsortierte Liste, da die Reihenfolge keine Rolle spielt (erwähnen Sie das nicht):
Standardmäßig wird jedem unsortierten Listenelement ein Aufzählungszeichen vorangestellt. Die unsortierte Liste hat keine elementspezifischen Attribute.
Du musst deine Listen mit einem </ul> abschließen.
Nummerierte Listen
Das <ol>-Element ist das übergeordnete Element für geordnete Elementlisten. Die einzigen untergeordneten Elemente einer <ol> sind ein oder mehrere <li>-Elemente oder Listenelemente.
Die „Aufzählungspunkte“ sind in diesem Fall jedoch Zahlen einer Vielzahl von Typen. Der Typ kann in CSS mit der Eigenschaft list-style-type oder über das Attribut type definiert werden.
<ol> hat drei elementspezifische Attribute: type, reversed und start.
Das Aufzählungsattribut type legt den Nummerierungstyp fest. Es gibt fünf gültige Werte für type. Der Standardwert ist 1 für Zahlen. Sie können aber auch a, A, i oder I für Groß- und Kleinbuchstaben oder römische Ziffern verwenden. Das Attribut list-style-type bietet viele weitere Werte.
Wie im Codepen erwähnt, überschreibt das Attribut list-style-type den Wert des Attributs type. Wenn Sie eine Dokumentation schreiben, bei der der numerische Typ wichtig ist, wie beispielsweise bei rechtlichen Dokumenten, müssen Sie type angeben.
Wenn das boolesche Attribut reversed enthalten ist, kehrt die Reihenfolge der Zahlen von der größten zur niedrigsten Zahl um.
Das Attribut start legt den Startwert fest. Der Standardwert ist 1.
Ähnlich wie bei </ul> ist die schließende </ol> erforderlich.
Wir können Listen verschachteln, sie müssen aber in einem Listenelement verschachtelt sein. Denken Sie daran, dass ein oder mehrere <li>-Elemente das einzige Element eines <ul>- oder <ol>-Elements sein können.
Listeneinträge
Wir haben das <li>-Element verwendet, es wurde aber noch nicht formell eingeführt. Das <li>-Element kann einer ungeordneten Liste (<ul>), einer geordneten Liste (<ol>) oder einem Menü (<menu>) direkt untergeordnet sein. Das <li> muss einem dieser Elemente untergeordnet sein und ist nirgendwo sonst gültig.
Das Schließen eines Listenelements ist gemäß der Spezifikation nicht erforderlich, da es implizit geschlossen wird, wenn der Browser das nächste öffnende <li>-Tag oder das erforderliche schließende Listen-Tag findet: </ul>, </ol>, </menu>. Die Spezifikation erfordert es nicht und einige unternehmensinterne Best Practices empfehlen, Listenelemente nicht zu schließen, um Byte zu sparen. Schließen Sie aber Ihre <li>-Tags. Ihr Code ist so leichter zu lesen,
und Ihr zukünftiges Ich wird es Ihnen danken. Es ist einfacher, alle Elemente zu schließen, als sich zu merken, welche Tags geschlossen werden müssen und welche ein optionales schließendes Tag haben.
Es gibt nur ein elementspezifisches <li>-Attribut: value. Dabei handelt es sich um eine Ganzzahl. value ist nur dann nützlich für <li>, wenn das <li> in einer geordneten Liste verschachtelt ist und für unsortierte Listen oder Menüs keine Bedeutung hat. Bei einem Konflikt wird der Startwert von <ol> überschrieben.
value ist die Nummer des Listenelements in einer geordneten Liste. Bei nachfolgenden Listenelementen wird die Nummerierung des Wertesatzes fortgesetzt, es sei denn, für dieses Element wurde auch das Attribut value festgelegt. Der Wert muss nicht in der richtigen Reihenfolge sein. Wenn er nicht in der richtigen Reihenfolge ist, sollte es einen guten Grund dafür geben.
Wenn Sie reversed für <ol> mit value-Attributen für Listenelemente kombinieren, legt der Browser <li> auf den angegebenen Wert fest. Dann wird für die vorangehenden <li>s ein Countdown und für die darauffolgenden <li>s hochgezählt. Wenn ein zweites Listenelement ein Wertattribut hat, wird der Zähler bei diesem zweiten Listenelement zurückgesetzt und der nachfolgende Wert verringert sich um eins.
All dies kann auch mit CSS-Zählern gesteuert werden, die generierte Inhalte für das Pseudoelement ::marker bereitstellen.
Wenn es sich um eine reine Präsentationszahl handelt, verwenden Sie CSS. Verwenden Sie diese Attribute, wenn die Nummerierung semantisch wichtig ist oder anderweitig eine Bedeutung hat.
Bisher haben wir uns Listenelemente angesehen, die nur Textknoten enthalten. Listenelemente können den gesamten Ablaufinhalt enthalten, d. h. jedes Element im Textkörper, das als direktes untergeordnetes Element von <body> verschachtelt werden kann. Dazu gehören auch Überschriften, die Inhalte in Abschnitte einteilen.
Wir haben einige ungeordnete Listen in MLW. Die Lehrkräfte im Abschnitt „Lehrkräfte“ und die Geräte der Schüler im Abschnitt „Rezensionen“ werden in einer Liste angezeigt. Die Lehrkraft <ul> hat zwei <li>s: eine für jede Lehrkraft. Jedes <li> enthält ein Bild und einen Absatz:
<ul>
<li>
<img src="svg/hal.svg" alt="hal">
<p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, <NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
</li>
<li>
<img src="images/eve2.png" alt="Eve">
<p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
</li>
</ul>
Der Abschnitt „Rezensionen“ enthält drei Rezensionen, also drei <li>s. Jede enthält ein Bild, ein Blockzitat und einen dreizeiligen Absatz mit zwei Zeilenumbrüchen.
<ul>
<li>
<img src="images/blender.svg" alt="Blender">
<blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
<p>
--Blendan Smooth,<br/>
Former Margarita Maker, <br/>
Aspiring Load Balancer
</p>
</li>
<li>
<img src="images/vaccuum.svg" alt="Vaccuum"/>
<blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
<p>
--Hoover Sukhdeep,<br/>
Former Sucker, <br/>
Aspiring DDoS Cop
</p>
</li>
<li>
<img src="images/toaster.svg" alt="Toaster">
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
Es kommt auch häufig vor, Listen innerhalb von Listen zu verschachteln. Das MLW hat keine verschachtelten Listen, diese Website aber schon. Im ersten Kapitel dieser Reihe, „Übersicht über HTML“, hat der Abschnitt „Hauptelemente“ zwei Unterabschnitte. Das Inhaltsverzeichnis, das eine ungeordnete Liste ist, enthält eine verschachtelte ungeordnete Liste mit Links zu diesen beiden Abschnitten:
<ul role="list">
<li>
<a href="#e">Elements</a>
<ul>
<li>
<a href="#nr">Non-replaced elements</a>
</li>
<li>
<a href="#rave">Replaced and void elements</a>
</li>
</ul>
</li>
<li>
<a href="#a">Attributes</a>
</li>
<li>
<a href="#aoe">Appearance of elements</a>
</li>
<li>
<a href="#e2">Element, attributes, and JavaScript</a>
</li>
</ul>
Da ein <li> das einzige untergeordnete Element eines <ul> ist, wird eine verschachtelte Liste in einem <li> und niemals direkt in einem <ol> oder <ul> gefunden.
In diesem letzten Beispiel haben Sie vielleicht bemerkt, dass role="list" im <ul> enthalten ist. Die implizite Rolle von <ul> und <ol> ist list. Das Entfernen der Listendarstellung mit CSS, einschließlich der Einstellung display: grid oder list-style-type: none, kann dazu führen, dass VoiceOver (der iOS- und MacOS-Screenreader) die implizite Semantik in Safari entfernt. Dies ist eine Funktion, kein Fehler.
Im Allgemeinen sollten Sie das Rollenattribut nicht hinzufügen, wenn Sie semantische Elemente verwenden, da dies nicht erforderlich ist. Im Allgemeinen müssen Sie auch keine solche Liste zu einer Liste hinzufügen, es sei denn, der Nutzer muss wirklich wissen, dass es sich um eine Liste handelt, z. B. wenn es für ihn von Vorteil wäre, zu wissen, wie viele Elemente sich in der Liste befinden.
Beschreibungslisten
Eine Beschreibungsliste ist ein Element der Beschreibungsliste (<dl>), das eine Reihe von Beschreibungsbegriffen (<dt>) mit einer Reihe von Beschreibungsbegriffen (<dt>) und den zugehörigen Beschreibungsdetails (<dd>) enthält. Die ursprünglichen Namen für diese drei Elemente waren „Definitionsliste“, „Definitionsbegriff“ und „Definition“.
Der Name hat sich im lebenden Standard geändert.
Ähnlich wie geordnete und unsortierte Listen können sie verschachtelt werden. Im Gegensatz zu geordneten und unsortierten Listen bestehen sie aus Schlüssel/Wert-Paaren.
Ähnlich wie <ul> und <ol> ist <dl> der übergeordnete Container. Die Elemente <dt> und <dd> sind untergeordnete Elemente von <dl>.
Wir können eine Liste von Maschinen mit ihrer Karriere und ihren Zielen erstellen. Eine Beschreibungsliste der Studenten, gekennzeichnet durch das <dl>, enthält eine Gruppe von Begriffen – in diesem Fall sind die „Begriffe“ die Namen der Schüler, die mit dem Element <dt> angegeben werden – zusammen mit einer Beschreibung für jeden Begriff – in diesem Fall die Karriereziele der einzelnen Schüler und Studenten –, die durch die <dd>-Elemente angegeben werden.
Diese Beschreibungsliste gehört nicht zur MLW-Seite. Beschreibungslisten dienen nicht nur für Begriffe und Definitionen. Deshalb wurden die Namen der Elemente allgemeiner gehalten.
Wenn Sie eine Liste mit Begriffen und ihren Definitionen oder Beschreibungen oder ähnliche Listen von Schlüssel/Wert-Paaren erstellen, werden mit den Beschreibungselementen die entsprechende Semantik bereitgestellt. Die implizite Rolle eines <dt> ist term, wobei listitem eine weitere zulässige Rolle ist. Die implizite Rolle eines <dd> ist definition. Weitere Rollen sind nicht zulässig. Im Gegensatz zu <ul> und <ol> hat der <dl> keine implizite ARIA-Rolle.
Das ergibt Sinn, da <dl> nicht immer eine Liste ist. Ist dies jedoch der Fall, werden die Rollen list und group akzeptiert.
Am häufigsten stoßen Sie auf Beschreibungslisten mit der gleichen Anzahl von <dt>- und <dd>-Elementen. Beschreibungslisten sind jedoch nicht immer und müssen auch nicht mit Begriff/Beschreibung-Paaren übereinstimmen. Sie können mehrere zu eins oder eins zu mehreren haben, z. B. bei einem Wörterbuchbegriff mit mehr als einer Definition.
Jede <dt> ist mit mindestens einer <dd> verknüpft und jeder <dd> ist mindestens eine <dt> zugeordnet. Es ist zwar möglich, den zusammengehörenden Kombinator oder den relationalen :has()-Selektor zum Targeting auf variable Zahlen dieser Elemente mit CSS zu verwenden. Bei Bedarf können Sie jedoch <div> als untergeordnetes Element von <dl> einfügen und das übergeordnete Element von einem oder mehreren <dt>- oder <dd>-Elementen (oder beiden) ist zulässig. Das <dl> kann mehrere weitere untergeordnete Elemente haben. Das Verschachteln von <div>, <template> oder <script> ist zulässig. Keines der Elemente der Beschreibungsliste hat Elementspezifische Attribute.
Sie wissen jetzt, was Links und Listen sind. Als Nächstes wollen wir beide Elemente kombinieren, um eine Navigation zu erstellen.
Wissen testen
Testen Sie Ihr Wissen über Listen.
Ist es zulässig, ein <h2>-Element in einen Listeneintrag einzufügen?
Wählen Sie die drei Elemente aus, die Listentypen definieren.
<il><ol><ul><dl>