Capitulo 6 ➜ Enlaces y Listas

¿Qué son los enlaces HTML?

Los enlaces HTML son definidos con la etiqueta . El destino del enlace está especificado en el atributo href.

¿Qué son las listas HTML?

Las listas permiten agrupar un conjunto de elementos relacionados en listas.

• • - Define una lista no ordenada.
    • 1. - Define una lista ordenada.
         •  
         • - Define un elemento de la lista.
    Codea
    • Navegador web
    • Editor de código
    • HTML 5
    1. Navegador web
    2. Editor de código
    3. HTML 5
    4. Codea

Mi primera página web

En HTML, puedes crear enlaces y listas para organizar y conectar contenido en tus páginas web. Aquí te muestro cómo crear enlaces y varios tipos de listas en HTML:

Enlaces (<a>):

Para crear enlaces a otras páginas web o recursos, utiliza la etiqueta <a> (ancla). Debes incluir el atributo href para especificar la URL de destino del enlace.

<a href="https://www.ejemplo.com">Visita Ejemplo.com</a> 

Puedes crear enlaces internos en tu página web utilizando la ruta relativa de destino:

<a href="pagina.html">Ir a otra página</a> 

También puedes agregar texto descriptivo al enlace:

<a href="pagina.html">Ir a <em>otra</em> página</a> 

Listas (<ul>, <ol>, <li>):

Las listas son útiles para presentar información de manera organizada. HTML admite dos tipos principales de listas: listas desordenadas (<ul>) y listas ordenadas (<ol).

Listas desordenadas (<ul>): Este tipo de lista se utiliza para elementos que no tienen un orden específico.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul> 

Listas ordenadas (<ol>): Este tipo de lista se utiliza para elementos que siguen un orden numérico o alfabético.

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>

Dentro de las listas, utilizamos la etiqueta <li> (elemento de lista) para cada elemento de la lista.

Listas anidadas: Puedes anidar listas dentro de otras listas para crear estructuras más complejas.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2
        <ul>
            <li>Subelemento 1</li>
            <li>Subelemento 2</li>
        </ul>
    </li>
    <li>Elemento 3</li>
</ul>

Estos son ejemplos básicos de cómo crear enlaces y listas en HTML. Puedes personalizar estos elementos utilizando CSS para adaptarlos al diseño de tu página web y mejorar la legibilidad y la navegación.