Como ya hemos dicho, el XHTML separa completamente la estructura lógica del contenido de su apariencia física, por lo que en este tema veremos cómo dar una estructura lógica al contenido de nuestra página.
En este tema vamos a ver cómo se hacen listas en html.
Si os habéis fijado en el tema anterior, habréis deducido que sería bastante fácil hacer una lista del siguiente modo:
|| Código: ||
|| <h1>Lista de invitados</h1>
Juan Nomeolvides <br />
Roberto Recuerdos<br />
Pepe teolvide<br />
María Nomeacuerdo<br />
Juana ConGingSeng<br />
Gertrudis Memorias<br /> ||
Gráficamente, conseguirías el resultado que buscas, pero… ¿Es correcto? Pues no, porque de esta manera el navegador no tiene forma de saber que se trata de un listado, y como hemos repetido un tanto machaconamente el HTML consiste en decirle al navegador qué es cada cosa y no cómo mostrar cada cosa, eso lo haremos con CSS.
TIPOS DE LISTADOSFundamentalmente tenemos 2 tipos de listados:
Listas sin ordenar: Listas cómo esta, no están enumeradas de ninguna forma.
Listas ordenadas: Listas cuyos elementos están ordenados (mediante números)
Y una lista para definiciones:
Listas de definición: Nos permiten diferenciar los términos definidos de las definiciones que normalmente se muestran en un nuevo párrafo, aunque como habréis adivinado, eso lo podemos modificar con CSS.
LISTAS SIN ORDENARCómo siempre, para indicar que vamos a hacer una lista, tenemos una etiqueta de apertura y otra de cierre:
<ul> Abre una lista sin ordenar
</ul> Cierra una lista sin ordenar
Para indicar cada elemento de la lista, también tenemos nuestras etiquetas.
<li> Empieza un elemento de la lista
</li> Termina un elemento de la lista.
Así nuestra lista de invitados nos quedaría así:
||
Código: ||
|| <h1>Lista de invitados</h1>
<ul>
<li>Juan Nomeolvides </li>
<li>Roberto Recuerdos</li>
<li>Pepe teolvide</li>
<li>María Nomeacuerdo</li>
<li>Juana ConGingSeng</li>
<li>Gertrudis Memorias</li>
</ul> ||
La viñeta que precede al elemento de la lista, por supuesto es modificable, con CSS, claro!
LISTAS ORDENADASLas etiquetas de apertura y cierre de las listas ordenadas son:
<ol> Etiqueta de apertura de una lista ordenada
</ol> Etiqueta de cierre.
Los elementos utilizan las mismas etiquetas de apertura y cierre que las listas no ordenadas, así si queremos una lista de invitados numerada:
||
Código: ||
|| <h1>Lista de invitados</h1>
<ol>
<li>Juan Nomeolvides </li>
<li>Roberto Recuerdos</li>
<li>Pepe teolvide</li>
<li>María Nomeacuerdo</li>
<li>Juana ConGingSeng</li>
<li>Gertrudis Memorias</li>
</ol> ||
Para establecer una lista de definición utilizamos las etiquetas:
<dl> Abre una lista de definición
</dl> Cierra una lista de definición
Para cada termino que vamos a definir:
<dt>Termino a definir</dt>
Para cada definición:
<dd> definición </dd>
Así si por ejemplo, quisiéramos incluir una pequeña definición sobre cada uno de nuestros invitados para no olvidarnos de sus características principales:
||
Código: ||
|| <dl>
<dt>Juan Nomeolvides </dt>
<dd> Químico, gay, le gusta Roberto Recuerdos. </dd>
<dt>Roberto Recuerdos</dt>
<dd> Informático, casado con María Nomeacuerdo. </dd>
<dt>Pepe Teolvidé</dt>
<dd> Periodista, soltero </dd>
<dt>María Nomeacuerdo</dt>
<dd> Traductora, casada con Roberto Recuerdos. </dd>
<dt>Juana ConGingSeng</dt>
<dd> Bombero, sin preferencia sexual conocida </dd>
<dt>Gertrudis Memorias</dt>
<dd> Bibliotecaria, persigue a Pepe Teolvidé</dd>
</dl> ||
Con HTML también podemos anidar listas, hay que recordar que las listas anidadas deben definirse dentro del elemento <li> del que salen. Vamos a agrupar nuestra lista de invitados.
||
Código: ||
|| <ul>
<li>Parejas establecidas:
<ul>
<li>Roberto Recuerdos</li>
<li>María Nomeacuerdo</li>
</ul>
</li>
<li>Solteros:
<ul>
<li>Juan Nomeolvides </li>
<li>Pepe teolvide</li>
<li>Juana ConGingSeng</li>
<li>Gertrudis Memorias</li>
</ul>
</li>
</ul> ||
Antes se definía la apariencia visual de las listas dentro del propio HTML, hoy en día esta práctica está desaconsejada, considerándose preferible hacerlo mediante hojas de estilo, de todas maneras, vamos a ver cómo se haría:
Para definir un tipo de numeración o de viñeta utilizamos el atributo type="valor"
Listas ordenadas
<ol type="A"> A, B, C, D
<ol type="a"> a, b, c, d
<ol type="I"> I, II, III, IV
<ol type="i"> i, ii, iii, iv
Listas desordenadas:
Discos: <ul type="disc">
Círculos: <ul type="circle">
Cuadrados: <ul type="square">
