Listas

Listas

As listas existen dende sempre na linguaxe HTML, vexamos os tipos existentes:

Listas non numeradas

As listas non numeradas empréganse para coleccións de elementos relacionados que aparecen sen ningún tipo de orde determinada. En (X)HTML as listas non numeradas indícanse co elemento <ul> (Unnumbered List). O contido dun <ul> limítase a un ou máis elementos de lista <li> (List Item). Estes elementos de lista son elementos de bloque, polo que sempre se mostrarán nunha nova liña.

• ul:

<ul> ... </ul>

Atributos: id, class, style, title

Atributos obsoletos:

- compact

- type="disc | circle | square"

• li:

<li> ... </li>

Atributos: id, class, style, title

Atributos obsoletos:

- type="formato"

- value="número"

Exemplo:

<ul>
  <li>Listas non numeradas</li>
  <li>Listas numeradas</li>
  <li>Listas de definición</li>
</ul>

Recordade que en (X)HTML é obrigatorio pechar todas as etiquetas.

Listas numeradas

As listas numeradas empréganse para listas nas que a secuencia dos elementos é importante. As listas numeradas indícanse co elemento <ol> (Ordered List) e deben incluír un ou máis elementos de lista (<li>). Trátanse de elementos de bloque.

• ol:

<ol> ... </ol>

Atributos: id, class, style, title

Atributos obsoletos:

- compact

- start="number"

- type = "1 | A | a | I | i"

Exemplo:

<ol>
  <li>Instalar o sistema operativo</li>
  <li>Actualizar o sistema operativo</li>
  <li>Instalar o resto do software</li>
 </ol>

Recordade que en (X)HTML é obrigatorio pechar todas as etiquetas.

Listas de definición

Este tipo emprégase para listas que consisten en parellas de termos e definicións. As listas de definición están marcadas como elementos <dl> (Definition List). O contido dun dl é algún número de termos (indicados polo elemento <dt> - Definition Term) e definicións (indicados polo elemento <dd>). O elemento dt (termo) só pode conter elementos en liña. Todos os elementos empregados nas listas de definición son elementos a nivel de bloque e comezarán por unha nova liña.

• dl:

<dl> ... </dl>

Atributos: id, class, style, title, compact

• dd:

<dd> ... </dd>

Atributos: id, class, style, title

A estrutura das listas de definición é algo distinta das listas vistas ata o de agora. Estas listas están compostas por elementos dt e dd, e estes elementos contidos nun elemento dl, tal e como pode verse no seguinte exemplo:

Exemplo:

 <dl>
  <dt>em</dt>
    <dd>Indica texto enfatizado. Renderízase en cursiva.</dd>
  <dt>strong</dt>
    <dd>Indica texto moi enfatizado. Renderízase en negra.</dd>
 </dl>

Non é necesario que os termos e as definicións aparezan alternándose. Pódense introducir dous termos seguidos e logo unha definición (por exemplo).

Aniñar listas

Os elementos de listas poden aniñarse noutras listas. Por exemplo, pódese aniñar unha lista numerada nunha de definición, ou viceversa.

Vexamos un exemplo:

Sistemas Operativos:
<ol>
  <li>Windows 
    <ul>
      <li>Windows Vista</li>
      <li>Windows XP</li>
      <li>Windows 98</li>
    </ul>
  </li>
  <li>Linux</li>
  <li>MacOS X</li>
</ol>

O código anterior dará como resultado:

Sistemas Operativos:

1. Windows
   • Windows Vista
   • Windows XP
   • Windows 98
2. Linux
3. MacOS X

--Vieites e Arribi 12:16 21 oct 2010 (BST)