Manual de HTML: Glosarios y Listas

Glosarios

Un glosario está formado por una serie de parejas palabra-definición. Los elementos de los glosarios no van precedidos por una viñeta como las listas, sino que la maquetación se hace con indentaciones (sangrías) entre los términos y sus definiciones.

  • <dl></dl>

    La etiqueta <dl> (Definition List) etiqueta indica el comienzo de un glosario.

  • <dt></dt>

    La etiqueta <dt> (Definition Term) indica que a continuación va la palabra a definir.

  • <dd></dd>

    La etiqueta <dd> (Definition Definition) indica que a continuación va la definición, por lo que le aplicará sangría.

Ejemplo: veamos cómo crear un pequeño diccionario. Este código:

<dl>
  <dt>perro (<em>n. masc.</em>)</dt>
    <dd>animal de cuatro patas que ladra.</dd>
  <dt>gato (<em>n. masc.</em>)</dt>
    <dd>animal de cuatro patas que maulla y se lleva mal con el perro.</dd>
  <dt>pescadilla (<em>n. fem.</em>)</dt>
    <dd>animal que vive en el mar recubierto de escamas.</dd>
</dl>

… se ve así:

Perro (n. masc.)
Animal de cuatro patas que ladra.
Gato (n. masc.)
Animal de cuatro patas que maulla y se lleva mal con el perro.
Pescadilla (n. fem.)
Animal que vive en el mar recubierto de escamas.

Recursos

Listas

Las listas son unos elementos de maquetación muy eficaces a la hora de dar formato al contenido de una web. Las listas se pueden utilizar para varias cosas:

  • creación de índices y esquemas.
  • corregir el exceso de contenido de una página.
  • corregir la falta de contenido de una página.
  • romper la monotonía de contenidos de la página.

Recursos

  • <ul></ul>

    La etiqueta <ul> (Unordered List, Lista sin ordenar) muestra una lista sin numerar donde las filas (definidas con la etiqueta <li>) pueden ir precedidas de una viñeta, que puede ser diferente en cada fila.

    Propiedades CSS:

    Ejemplo: este código:

    <h4>debemos comprar:</h4>
    <ul>
      <li>camisas para jose</li>
      <li>locion para daniel</li>
    </ul>

    … se ve así:

    debemos comprar:

    • camisas para jose
    • locion para daniel
  • <ol> </ol>

    La etiqueta <ol> (Ordered List, Lista ordenada) muestra una lista numerada donde las filas (definidas con la etiqueta <li>) pueden ir precedidas de un número, que puede tener diferente estilo en cada fila.

    Atributos:

    • start: define el primer secuenciador de la serie de elementos de la lista (debe ser un número entero a partir de 1).

    Propiedades CSS:

    Ejemplo: este código:

    <h4>estudiar para mañana:</h4>
    <ol type="1" start="3">
      <li>geometria</li>
      <li>ciencias sociales</li>
    </ol>
     
    <h4>actividades de la semana:</h4>
    <ol type="i" start="3">
      <li>asistir a la universidad</li>
      <li>comprar disco</li>
      <li>llevar el auto al mecanico</li>
    </ol>

    … se ve así:

    estudiar para mañana:

    1. geometria
    2. ciencias sociales

    actividades de la semana:

    1. asistir a la universidad
    2. comprar disco
    3. llevar el auto al mecanico
  • <li></li>

    La etiqueta <li> define las líneas de las listas, tanto numeradas (<ol>) como sin numerar (<ul>).

    Propiedades CSS:

Anidamiento de listas

Las listas son elementos tipo block, de los que insertan retorno de carro (como los párrafos p y los títulos h1) y se pueden anidar unas en otras sin ningún problema cuantos niveles queramos, con tan sólo respetar la sintaxis y tener cuidado de cerrar las etiquetas.

La forma de anidar listas es sencilla: dentro de una etiqueta <li></li> se introduce el bloque completo de la lista anidada (por ejemplo <ol></ol>), cuidando de cerrar a continuación el elemento padre con su correspondiente </li>.

Ejemplo de listas anidadas: este código:

<ul>
  <li>primer elemento</li>
  <li>segundo elemento
    <ol>
      <li>primer sub-elemento</li>
      <li>segundo sub-elemento</li>
      <li>tercer sub-elemento</li>
    </ol>
  </li>
  <li>tercer elemento</li>
</ul>

… se ve así:

  • primer elemento
  • segundo elemento
    1. primer sub-elemento
    2. segundo sub-elemento
    3. tercer sub-elemento
  • tercer elemento

Menús flotantes con CSS

Combinando las listas con estilos CSS se pueden conseguir efectos realmente espectaculares, como menús de navegación, pestañas, etc.

Ejemplo de menú flotante con CSS: este código:

<style>
.flotante li ul {
  display: none;
}
.flotante li:hover > ul {
  display: block;
}
</style>
<div class="flotante">
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li><a href="#">Sub-menu 1</a></li>
        <li><a href="#">Sub-menu 2</a></li>
      </ul>
    </li>
  </ul>
</div>

… se ve así (pasa el ratón por encima del enlace!):

Listas numeradas automáticamente con CSS

Las propiedades CSS counter-reset, counter-increment y content junto con la función counters() permiten crear listas numeradas automáticamente con CSS.

Ejemplo de listas numeradas automáticamente con CSS: este código:

<style>
.numera ol {
  counter-reset: item;
}
.numera ol > li {
  list-style:none;
}
.numera ol > li:before {
  content: counters(item, ". ") ".- ";counter-increment: item;
}
</style>
<div class="numera">
  <ol type="1">
    <li>elemento 1</li>
    <li>elemento 2
      <ol type="1">
        <li>elemento 2-1</li>
        <li>elemento 2-2
          <ol type="1">
            <li>elemento 2-2-1</li>
            <li>elemento 2-2-2</li>
            <li>elemento 2-2-3</li>
          </ol>
        </li>
        <li>elemento 2-3</li>
      </ol>
    </li>
    <li>elemento 3</li>
  </ol>
</div>

… se ve así:

  1. elemento 1
  2. elemento 2
    1. elemento 2-1
    2. elemento 2-2
      1. elemento 2-2-1
      2. elemento 2-2-2
      3. elemento 2-2-3
    3. elemento 2-3
  3. elemento 3

Recursos

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web