HTML/Listas

HTML
← Volver a Liñas horizontais	Listas	Seguir con Mapas de imaxes →

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>.

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:

Primeiro elemento,
segundo elemento,
e terceiro elemento.

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).

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:

Primeiro elemento,
segundo elemento,
e terceiro elemento.

Listas de definicións

As listas de definicións amosan unha lista de termos en letra grosa, seguidos da definició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:

casa: Cousa onde vive xente.
cousa: Substantivo auxiliar.

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:

Follas de estilo en cascada
CSS: Definición das follas de estilo en cascada, tamén coñecidas coma CSS.
Definición: Definición de definición.

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:

Meniña: Abertura do ollo por onde lle entra a luz.; Nena de moi curta idade e lactante.

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:

Definición

Acto de definir bla bla bla...

... bla bla bla algo.

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>

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.

HTML
← Volver a Liñas horizontais	Listas	Seguir con Mapas de imaxes →