Manejo de Texto y Listas en HTML

El objetivo es explorar las principales etiquetas para trabajar con texto y listas en HTML, aspectos clave para estructurar y presentar contenido en la web. Estas herramientas fundamentales permiten mejorar la legibilidad y organización de la información, facilitando una mejor experiencia de usuario y una presentación más clara del contenido.

Texto y Formato Básico

HTML proporciona varias etiquetas para formatear el texto y mejorar la legibilidad del contenido.

A continuación, se presentan algunas de las etiquetas más comunes👇:

Nota: Las siguientes etiquetas son esenciales para el formato de texto y listas en HTML.

✅ <h1> a <h6>: Encabezados de diferentes niveles, donde <h1> es el más importante y <h6> el menos importante.
✅ <p>: Define un párrafo de texto.
✅ <strong>: Resalta el texto como importante (generalmente en negrita).
✅ <em>: Enfatiza el texto (generalmente en cursiva).
✅ <br>: Inserta un salto de línea.
✅ <hr>: Crea una línea horizontal que puede servir como separador.
✅ <ul>: Define una lista desordenada (bullets).
✅ <ol>: Define una lista ordenada (números).
✅ <li>: Define un elemento dentro de una lista (ordenada o desordenada).
✅ <a>: Crea un enlace a otra página o recurso.
✅ <img>: Inserta una imagen en la página.
✅ <div>: Contenedor genérico para estructurar elementos.
✅ <span>: Contenedor en línea para agrupar texto o elementos.

Ejemplo

html

<h1>Título Principal</h1>
<p>Este es un <strong>ejemplo</strong> de un párrafo con <em>formato básico</em>.</p>
<br>
<hr>
<p>Aquí hay otro párrafo.</p>

Listas

Las listas en HTML permiten organizar el contenido de forma estructurada.

Hay dos tipos principales de listas:

Advertencia

Listas ordenadas (<ol>): Listas numeradas.
Listas desordenadas (<ul>): Listas con viñetas.

Ejemplo de Lista Desordenada

html

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

Ejemplo de Lista Ordenada

html

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