Estructuras de texto en HTML: párrafos, encabezados y citas
Cuando empezamos con HTML es fácil pensar que todo es “texto suelto”: escribo algo, pongo un salto de línea, agrando una letra por ahí… y listo. Pero la web no funciona así.
HTML está diseñado para darle estructura al texto: qué es un párrafo, qué es un título, qué es una cita importante, etc. Eso ayuda a los navegadores, a los buscadores y a las tecnologías de apoyo (como lectores de pantalla) a entender tu contenido y presentarlo mejor.
En esta guía vamos a ver tres piezas básicas, pero poderosísimas:
- Párrafos: el bloque básico de texto con la etiqueta
<p>. - Encabezados: los títulos y subtítulos con
<h1>…<h6>. - Citas: cómo marcar texto citado usando
<blockquote>y<cite>.
La idea no es solo “aprender etiquetas”, sino cambiar la forma de ver una página: de un muro de texto a una historia bien organizada 📖.
El Mapa Mental: De “Texto Plano” a Estructura Clara
Piensa en una página web como un pequeño libro:
- Los encabezados son la estructura del índice: títulos y subtítulos.
- Los párrafos son los bloques donde realmente cuentas la historia.
- Las citas son voces que traes de otros lugares: frases destacadas, referencias, testimonios.
Si solo cambias el tamaño de letra sin usar las etiquetas correctas, la página puede verse bien, pero por dentro está desordenada. Usando <h1>, <p> y <blockquote> le das significado al texto, no solo estilo.
Párrafos en HTML: Cada Idea Merece su Propio Bloque
El párrafo es el ladrillo básico del texto en HTML. Casi todo texto “normal” debería vivir dentro de <p>.
La regla mental es sencilla:
“Cada idea o paso importante va en su propio párrafo.”
Vamos a ver un ejemplo simple de una pequeña presentación personal marcada con <p>:
<p>Hola, soy Ana y estoy aprendiendo desarrollo web.</p>
<p>Me gusta HTML porque me permite estructurar mis ideas de forma clara.</p>
<p>Mi objetivo es crear páginas que sean bonitas, rápidas y accesibles.</p>Errores típicos cuando no usamos bien <p>:
- Escribir todo en un solo párrafo enorme.
- Usar muchos
<br>seguidos para “simular” párrafos. - Mezclar títulos, párrafos y listas sin una estructura clara.
Un antipatrón muy común es algo así:
<h1>Mi historia</h1>
Texto texto texto texto…
<br><br>
Más texto en el mismo bloque…
<br><br>
Todavía más texto en lugar de usar párrafos…Encabezados en HTML: La Estructura de tu Historia
Los encabezados son los títulos y subtítulos de tu contenido. Van desde <h1> (el más importante) hasta <h6> (el menos importante).
No son solo “texto grande”: son la forma en que le dices a HTML y a los buscadores cómo está organizada tu página.
Cómo Usar h1, h2, h3… sin Enredarte
<h1>: el título principal de la página (normalmente solo uno).<h2>: secciones importantes dentro de la página.<h3>: subsecciones dentro de un<h2>.- Y así sucesivamente hasta
<h6>, si lo necesitas.
Por ejemplo, una página sobre café podría verse así:
<h1>Guía básica del café</h1>
<h2>1. Tipos de café</h2>
<h3>1.1 Espresso</h3>
<h3>1.2 Americano</h3>
<h2>2. Métodos de preparación</h2>
<h3>2.1 Prensa francesa</h3>
<h3>2.2 Cafetera italiana</h3>Buenas Prácticas con Encabezados
- Usa un solo
<h1>por página para el título principal. - No uses encabezados solo para hacer el texto más grande; para eso está CSS.
- Respeta el orden: después de un
<h2>lo normal es usar<h3>, no saltar a<h5>sin necesidad. - Piensa tus encabezados como si fueran el índice de un libro.
Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!