Listas en HTML

Tenemos distintos tipos de listas en HTML listas ordenadas, no ordenadas y de definiciones.

Listas ordenadas

Son útiles cuando tenemos que mostrar una serie de datos numerada.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <ol>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
        <li>Cuatro</li>
    </ol>
</body>
</html>

Listas no ordenadas

Como su nombre lo indica son listas que no necesitan de un indicador de orden, solamente se muestran con un pequeño punto a lado derecho de su texto.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li>ROJO</li>
        <li>AZUL</li>
        <li>AMARILLO</li>
        <li>NEGRO</li>
    </ul>
</body>
</html>

Listas de definición

Se usa para asociar un termino a una definición mediante las etiquetas <dt> podemos indicar que es el termino y con la etiqueta <dd> la definición.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <dl>
    <dt>ENERO</dt>
    <dd>El mes de enero tiene 31 días </dd>
    <dt>FEBRERO</dt>
    <dd> El mes de febrero tiene 28 días pero cada 4 años tiene 29 a esto se le llama año bisiesto. </dd>
  </dl>
</body>

</html>

Listas anidadas

Una lista anidada se refiere a que podemos tener una lista de cualquier tipo dentro de otra.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>

<body>
    <h1>Tipos de listas</h1>
    <ol>
        <li>
            <h2>Lista ordenada</h2>
            <ol>
                <li>Uno</li>
                <li>Dos</li>
                <li>Tres</li>
                <li>Cuatro</li>
            </ol>
        </li>
        <li>
            <h2>Lista no ordenada</h2>
            <ul>
                <li>ROJO</li>
                <li>AZUL</li>
                <li>AMARILLO</li>
                <li>NEGRO</li>
            </ul>
        </li>
        <li>
            <h2>Listas de definición</h2>
            <dl>
                <dt>ENERO</dt>
                <dd>El mes de enero tiene 31 días </dd>
                <dt>FEBRERO</dt>
                <dd> El mes de febrero tiene 28 días pero cada 4 años tiene 29 a esto se le llama año bisiesto. </dd>
            </dl>
        </li>

    </ol>
</body>

</html>

Deja un comentario