HTML
lijsten

Invoering

Syntaxis

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

Opmerkingen

Ongeordende lijst

Een ongeordende lijst kan worden gemaakt met de tag <ul> en elk lijstitem kan worden gemaakt met de tag <li> zoals in het onderstaande voorbeeld:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Dit levert een lijst met opsommingstekens op (dit is de standaardstijl):

• Item
• Een ander item
• Nog een ander item

Gebruik ul om een lijst met items weer te geven, waarbij de volgorde van de items niet belangrijk is. Als het wijzigen van de volgorde van de items de lijst onjuist maakt, moet u <ol> .

Bestelde lijst

Een geordende lijst kan worden gemaakt met de tag <ol> en elk lijstitem kan worden gemaakt met de tag <li> zoals in het onderstaande voorbeeld:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Dit levert een genummerde lijst op (dit is de standaardstijl):

1. Item
2. Een ander item
3. Nog een ander item

De cijfers handmatig wijzigen

Er zijn een aantal manieren waarop u kunt spelen met welke nummers op de lijstitems in een geordende lijst verschijnen. De eerste manier is om een startnummer te stellen, met behulp van de start attribuut. De lijst begint met dit gedefinieerde nummer en gaat zoals gewoonlijk met één verder.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Dit levert een genummerde lijst op (dit is de standaardstijl):

3. Item
4. Een ander item
5. Nog een ander item

U kunt ook een bepaald lijstitem expliciet instellen op een specifiek nummer. Verdere lijstitems na één met een gespecificeerde waarde zullen blijven stijgen met één met de waarde van dat lijstitem, negerend waar de bovenliggende lijst was.

<li value="7"></li>

Het is ook vermeldenswaard dat u, door het value direct op een lijstitem te gebruiken, het bestaande nummeringssysteem van een geordende lijst kunt overschrijven door de nummering met een lagere waarde opnieuw te starten. Dus als de bovenliggende lijst al op waarde 7 stond en een lijstitem op waarde 4 tegenkwam, dan zou dat lijstitem nog steeds als 4 worden weergegeven en vanaf dat punt opnieuw blijven tellen.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Dus het bovenstaande voorbeeld zal een lijst produceren die het nummeringspatroon van 5, 6, 4, 5, 6 volgt - opnieuw beginnend met een lager getal dan het vorige en het nummer 6 in de lijst duplicerend.

Opmerking: de start en value accepteren alleen een nummer - zelfs als de geordende lijst is ingesteld om te worden weergegeven als Romeinse cijfers of letters.

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Het type cijfer wijzigen

U kunt het type cijfer dat wordt weergegeven in de lijstitemmarkering eenvoudig wijzigen met het kenmerk type

<ol type="1|a|A|i|I">

U moet ol gebruiken om een lijst met items weer te geven, waarbij de items opzettelijk zijn besteld en de volgorde moet worden benadrukt. Als het wijzigen van de volgorde van de items de lijst NIET onjuist maakt, moet u <ul> .

Beschrijvingslijst

Met het dl element kan een beschrijvingslijst (of definitielijst , zoals deze voor HTML5 werd genoemd) worden gemaakt. Het bestaat uit naam-waarde groepen, waarbij de naam wordt gegeven in het dt element en de waarde wordt gegeven in het dd element.

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Live demonstratie

Een naam-waardegroep kan meer dan één naam en / of meer dan één waarde hebben (die alternatieven vertegenwoordigen):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Live demonstratie

Geneste lijsten

U kunt lijsten nesten om subitems van een lijstitem te vertegenwoordigen.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• item 1
• item 2
  • subpost 2.1
  • subpost 2.2
• item 3

De geneste lijst moet een onderliggend element van het li element zijn.

U kunt ook verschillende soorten lijsten nesten:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>