HTML <ul> -tag
Voorbeeld
Een ongeordende HTML-lijst:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <ul>tag definieert een ongeordende (met opsommingstekens) lijst.
Gebruik de <ul>tag samen met de <li> tag om ongeordende lijsten te maken.
Tip: gebruik CSS om lijsten op te maken .
Tip: Gebruik voor geordende lijsten de <ol> tag.
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
Algemene kenmerken
De <ul>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <ul>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Stel de verschillende lijststijltypes in (met CSS):
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Voorbeeld
Vergroot en verklein regelhoogte in lijsten (met CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul
style="line-height:80%">
<li>Coffee</li>
<li>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: Ul Object
CSS-zelfstudie: lijsten opmaken
Standaard CSS-instellingen
De meeste browsers geven het <ul>element weer met de volgende standaardwaarden:
Voorbeeld
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}