HTML <li> -tag
Voorbeeld
Een geordende (<ol>) en een ongeordende (<ul>) HTML-lijst:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <li>tag definieert een lijstitem.
De <li>tag wordt gebruikt in geordende lijsten ( <ol> ), ongeordende lijsten ( <ul> ) en in menulijsten ( <menu> ).
In <ul> en <menu> worden de lijstitems meestal weergegeven met opsommingstekens.
In <ol> worden de lijstitems meestal weergegeven met cijfers of letters.
Tip: gebruik CSS om lijsten op te maken .
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Algemene kenmerken
De <li>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <li>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Gebruik van het waardeattribuut in een geordende lijst:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Voorbeeld
Stel verschillende soorten lijststijlen in (met CSS):
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Voorbeeld
Maak een lijst binnen een lijst (een geneste lijst):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Voorbeeld
Maak een complexere geneste lijst:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Gerelateerde pagina's
HTML-zelfstudie: HTML-lijsten
HTML DOM-referentie: Li Object
CSS-zelfstudie: lijsten opmaken
Standaard CSS-instellingen
De meeste browsers geven het <li>element weer met de volgende standaardwaarden:
li {
display: list-item;
}