HTML <ul> tag

  • Vorige pagina <u>
  • Volgende pagina <var>

Definitie en gebruik

<ul> tag om een ongesorteerde (met opsommingstekens) lijst te definiëren.

Gebruik <ul> tag en <li> tag om een ongesorteerde lijst te maken.

Tip:Gebruik CSS omStel de lijststijl in.

Tip:Voor geordende lijsten, gebruik: <ol> tag.

Zie ook:

HTML-tutorial:HTML Lijst

HTML DOM referentiehandleiding:Ul-object

CSS-tutorial:Stel de lijststijl in

Voorbeeld

Voorbeeld 1

Een ongesorteerde HTML-lijst:

<ul>
  <li>Koffie</li>
  <li>Thee</li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 2

Stel verschillende lijststijltypen in (gebruik CSS):

<ul style="list-style-type:circle">
  <li>Koffie</li>
  <li>Thee</li>
  <li>melk</li>
</ul>
<ul style="list-style-type:disc">
  <li>Koffie</li>
  <li>Thee</li>
  <li>melk</li>
</ul>
<ul style="list-style-type:square">
  <li>Koffie</li>
  <li>Thee</li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 3

Breed en verklein de lijnhoogte in de lijst (gebruik CSS):

<ul style="line-height:180%">
  <li>Koffie</li>
  <li>Thee</li>
  <li>melk</li>
</ul>
<ul style="line-height:80%">
  <li>Koffie</li>
  <li>Thee</li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 4

Maak een andere lijst in de lijst (geneste lijst):

<ul>
  <li>Koffie</li>
  <li>Thee</li>
    <ul>
      <li>Pu'er</li>
      <li>Greentea</li>
    </ul>
  </li>
  <li>melk</li>
</ul>

Probeer het zelf

Voorbeeld 5

Maak een complexere geneste lijst:

<ul>
  <li>Koffie</li>
  <li>Thee</li>
    <ul>
      <li>Pu'er</li>
      <li>groene thee</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>melk</li>
</ul>

Probeer het zelf

Global attributes

<ul> De tag ondersteunt ook Global attributes in HTML.

event attributes

<ul> De tag ondersteunt ook Event attributes in HTML.

Standaard CSS instellingen

De meeste browsers zullen de volgende standaardwaarden weergeven <ul> Element:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Probeer het zelf

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning
  • Vorige pagina <u>
  • Volgende pagina <var>