Menthal27

XHTML: Listat

• Tavallinen lista
  1. Ul
  2. Li
  3. Ol
• Määrittelylista

Tavallinen lista

Tavallisella listalla tarkoitetaan tässä yhteydessä listaa, jossa listattavat asiat ilmestyvät allekkain luettelomerkin kera.

Esimerkki tällaisesta listasta on alla. Listassa voi olla rajattomasti alikohtia ja alikohtien alla alilistoja. Luettelomerkit ovat muokattavissa ja poistettavissa CSS:llä, tarkemmat ohjeet löytyvät CSS-osiosta.

• Kohta 1
• Kohta 2
  1. Alilista
     1. Alilistan alilista
• Kohta 3

Ul

Ul-tagi aloittaa ja päättää listan. Listan kohdat ovat aina ul:n sisällä.

<ul>
</ul>

Li

Listan jokainen kohta aloitetaan ja päätetään li-tagilla.

<ul>
<li>Kohta 1</li>
<li>Kohta 2</li>
<li>Kohta 3</li>
</ul>

Ol

Mikäli halutaan alilistoja, ne laitetaan valitun li-tagin sisään ja merkitään ol-tageilla. Ol-tagien sisään tulee alilistan kohdat (li-tagit).

<ul>
<li>Kohta 1</li>
<li>Kohta 2
   <ol>
      <li>Alilista</li>
   </ol>
</li>
<li>Kohta 3</li>
</ul>

Alilistoilla voi olla omia alilistoja rajattomasti:

<ul>
<li>Kohta 1</li>
<li>Kohta 2
   <ol>
      <li>Alilista
         <ol>
            <li>Alilistan alilista</li>
         </ol>
      </li>
   </ol>
</li>
<li>Kohta 3</li>
</ul>

Määrittelylista

Määrittelylistassa on kohtia, jotka alikohdat selittävät. Esimerkiksi:

HTML (Hyper Text Markup Language)

Kuvailukieli, jonka avulla tehdään kotisivuja

CSS (Cascading Style Sheet)

Kuvailukieli, jolla määritellään HTML-sivun ulkonäköä

Määrittelylista aloitetaan ja lopetetaan dl-tagilla.

<dl>
</dl>

Määriteltävä asia merkitään dt-tageilla.

<dl>
<dt>HTML (Hyper Text Markup Language)</dt>
</dl>

Termin selitys lisätään heti perään dd-tageissa.

<dl>
<dt>HTML (Hyper Text Markup Language)</dt>
<dd>Kuvailukieli, jonka avulla tehdään kotisivuja</dd>
</dl>