HTML/Listas

En Wikibooks, o Galilibros en galego.

En HTML existen tres tipos de listas para presentar os distintos tipos de información. Unha lista por puntos, para elementos que non siguen ordealgunha ou nos que a orde é irrelevante, que se crea coas etiquetas <ul> e </ul>. Unha lista numerada, para elementos cuxa orde importa, coma unha secuencia ou uns pasos a seguir, que se fai coas etiquetas <ol> e </ol>. E para rematar unha lista de definicións, que se crea coas etiquetas <dl> e </dl>.

[editar] Listas sen ordenar

As listas sen ordenar amosan unha serie de elementos precedidos dun punto. Velaquí un exemplo de código dunha destas listas:

  <ul>
    <li>Primeiro elemento,</li>
    <li>segundo elemento,</li>
    <li>e terceiro elemento.</li>
  </ul>

o que renderizado resultaría en:

Dentro das etiquetas <ul> e <li> podemos introducir o atributo type para codificar a forma da viñeta, no primeiro caso de toda a lista, no segundo só dun punto. Os posibles valores de type son: disc (disco), circle (círculo) e square (cuadrado).

[editar] Listas ordenadas

As listas ordenadas fornecen listas de elementos, precedidos todos eles de cadanseu número, incrementándose a partir do 1. Velaquí un exemplo de código:

  <ol>
    <li>Primeiro elemento,</li>
    <li>segundo elemento,</li>
    <li>e terceiro elemento.</li>
  </ol>

o que renderizado resultaría en:

Dentro das etiquetas <ol> e <li> podemos introducir os atributos type e start. type utilízase para establecer a forma en que se sinalará a orde dos elementos, e os seus posibles valores son 1 (secuencia numérica), I (secuencia numérica romana en maiúsculas), i (secuencia numérica romana en minúsculas), A (secuencia alfabética en maiúsculas) ou a (secuencia alfabética en minúsculas). O atributo start establece o número en que se inicia a secuencia, e o seu valor é un número calquera. Cando se utiliza nunha etiqueta <li>, reinicia a conta a partires dese elemento, e no número que establezamos.

[editar] Listas de definicións

As listas de definicións amosan unha lista de termos en letra grosa, seguidos dadefinición nunha nova liña son sangrado (por defecto). Velaquí un exemplo do código:

  <dl>
    <dt>casa</dt>
    <dd>Cousa onde vive xente.</dd>
    <dt>cousa</dt>
    <dd>Substantivo auxiliar.</dd>
  </dl>

o que renderizado daría:

Se dous termos comparten unha mesma definición, poden agruparse así:

  <dl>
    <dt>Follas de estilo en cascada</dt>
    <dt>CSS</dt>
    <dd>Definición das follas de estilo en cascada, tamén coñecidas coma CSS.</dd>
    <dt>Definición</dt>
    <dd>Definición de definición.</dd>
  </dl>

o que renderizado sería:

Se un termo ten dúas definicións alternativas, usa un dd para cadadefinición. Velaquí o código de exemplo:

  <dl>
    <dt>Meniña</dt>
    <dd>Abertura do ollo por onde lle entra a luz.</dd>
    <dd>Nena de moi curta idade e lactante.</dd>
  </dl>

O que renderizado daría como resultado:

As definicións que resulten moi longas poden dividirse en parágrafos aniñando elementos <p> dentro do elemento <dd>:

  <dl>
    <dt>Definición</dt>
    <dd>
      <p>Acto de definir bla bla bla...</p>
      <p>... bla bla bla algo.</p>
    </dd>
  </dl>

o que renderizado resultaría en:

[editar] Listas aniñadas

As listas poden aniñarse. A mellor forma de entender a maneira de facelo é cun exemplo:

<ul>
  <li>Listas
    <ul>
      <li>Listas numeradas</li>
      <li>Listas sen numerar</li>
    </ul>
  </li>
</ul>

Ao aniñar, os elementos das listas aniñadas deberan escribirse dentro dun elemento dunha lista superior.

Este é un exemplo de aniñación incorrecta:

<ul>
  <li>Listas</li>
  <ul>
    <li>Listas numeradas</li>
    <li>Listas sen numerar</li>
  </ul>
</ul>

Velaquí outro exemplo de aniñación incorrecta, con dous elementos <ul> seguidos:

<ul>
   <li>
      Elemento da lista superior
      <ul>
        <ul>
          <li>
            Elemento da lista inferior entre dous etiquetas <ul> consecutivas.
          </li>
        </ul>
      </ul>
   </li>
</ul>

[editar] Formato

As descricións que se fixeron de cada un dos tipos de listas fan referencia ao renderizado por defecto dos seus correspondentes códigos HTML que fai un navegador web. Porén, grazas ao uso de follas de estilo, pódese cambiar o formato das listas. Por exemplo, con HTML pódense convertir as listas en verticais, en vez de horizontais.