informaticaPC

Tutorial de HTML

Listas


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Crear una lista

Los tipos de listas más usadas en HTML son las listas ordenadas (usando la etiqueta <ol>) y las listas no ordenadas (con <ul>).

Independientemente del tipo de lista, usaremos la etiqueta <li> para indicar cada elemento de la misma.

Veamos los atributos de cada tag:


<ul
    type: marca de los elementos de la lista (circle | disc | square). Sólo en modo transitional.
>
</ul>


<ol
    start: número en el que comenzará la lista. Sólo en modo transitional.
    type: estilo de cada elemento de la lista (a | A | i | I | 1). Sólo  en  modo transitional.
>
</ol>


<li
    type: marca de los elementos de la lista (circle | disc | square | a | A | i | I | 1).
    value: valor (numérico) que tendrá el elemento. Sólo en modo transitional.
>
</li>

Veamos un ejemplo:

<html>
    <head>
        <title>Página WEB de ejemplo: listas</title>
    </head>
    <body>
        <ol>
            <li>Opción 1</li>
            <li>Opción 2</li>
            <li>Opción 3</li>
        </ol>

        <ul>
            <li>Opción 1</li>
            <li>Opción 2</li>
            <li>Opción 3</li>
        </ul>
    </body>
</html>

Descargar ejemplo

Listas en HTML

Listas anidadas

Con HTML es posible crear listas anidadas poniendo otra dentro de una etiqueta <li>, como podemos ver en el siguiente ejemplo.

<html>
    <head>
        <title>Página WEB de ejemplo: listas</title>
    </head>
    <body>
        <ol>
            <li>Opción 1</li>
            <li>Opción 2
                <ul>
                    <li>Opción 2A</li>
                    <li>Opción 2B</li>
                    <li>Opción 2C</li>
                </ul>
            </li>
            <li>Opción 3</li>
        </ol>
    </body>
</html>

Descargar ejemplo

Listas anidadas

En las listas ordenadas podemos usar el atributo type para configurar el estilo de cada elemento de la lista, pudiendo tomar uno de los siguientes valores: 1, 'A', 'a', 'I', 'i'.

En las listas desordenadas dicho atributo podrá tener uno de los siguientes valores: disc, square o circle.

Dicho atributo se puede poner tanto en la etiqueta <ol> (para que se aplique a toda la lista) como en <li> (para cada elemento de forma individual).

Otro atributo que podemos usar en las listas ordenadas es start, para indicar desde qué número debe comenzar.

Veamos un ejemplo:

<html>
    <head>
        <title>Página WEB de ejemplo: listas</title>
    </head>
    <body>
        <ol type="I" start="5">
            <li>Opción 1</li>
            <li>Opción 2</li>
            <li>Opción 3</li>
        </ol>

		<ul type="square">
			<li>Opción 2A</li>
			<li>Opción 2B</li>
			<li>Opción 2C</li>
		</ul>

        <ol type="a">
            <li type="i">Opción 1</li>
            <li type="I">Opción 2</li>
            <li type="1">Opción 3</li>
        </ol>
    </body>
</html>

Descargar ejemplo

Listas

Información

Los atributos type y start se encuentran desactualizados en HTML 4: se recomienda usar CSS en su lugar.

Más información

Relacionado: [ Listas en CSS ]

Listas de definición

Para crear listas anidadas, aunque es posible usar las etiquetas HTML mencionadas en el punto anterior, también podemos hacerlo creando listas de definición utilizando <dl> (define el comienzo y final de lista), <dt> (cada opción o término de la lista) y <dd> (definición de cada opción).

Dichas tags HTML aparte de los atributos estándar no tienen otros que merezca la pena reseñar.

Primera página Anterior Anterior Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso