Texto y encabezados

El texto es el corazón de casi cualquier sitio. En esta lección aprenderás a estructurarlo con encabezados, párrafos, énfasis, citas y bloques de código, y a escribir caracteres especiales con entidades HTML.

Concepto

Elegir la etiqueta correcta para el texto no es cuestión de cómo se ve (eso lo decide CSS), sino de qué significa. Un <h1> no es "texto grande": es "el título principal de esta página". Google y los lectores de pantalla usan ese significado para entender tu contenido.

Piensa en el índice de un libro: título del libro, capítulos, subcapítulos. Los encabezados de HTML funcionan igual.

Encabezados: h1 a h6

<h1>Café Aroma</h1>                 <!-- Título principal de la página -->
  <h2>Nuestro menú</h2>             <!-- Sección -->
    <h3>Bebidas calientes</h3>      <!-- Subsección -->
      <h4>Cafés con leche</h4>
    <h3>Bebidas frías</h3>
  <h2>Contacto</h2>

(La sangría es solo para que veas la jerarquía; en HTML no es necesaria.)

Reglas profesionales:

1. Un solo <h1> por página, que describa de qué trata.
2. No te saltes niveles: después de un <h2> viene un <h3>, no un <h5>.
3. No elijas un encabezado por su tamaño. Si quieres un <h2> más pequeño, cámbialo con CSS.
4. Los usuarios de lectores de pantalla navegan saltando de encabezado en encabezado: un buen esquema es su "menú".

Error común

Usar <h3> para un texto solo porque "se ve del tamaño que quiero", o poner en negritas un párrafo en lugar de usar un encabezado. Ambas cosas rompen la estructura del documento.

Párrafos y saltos

<p>Abrimos en 2018 con una idea sencilla: servir el mejor café mexicano.</p>
<p>Hoy somos un punto de encuentro para todo el barrio.</p>

<!-- br: salto de línea DENTRO de un mismo bloque (direcciones, poemas) -->
<p>
  Av. Francisco Sosa 123<br>
  Coyoacán, CDMX<br>
  C.P. 04000
</p>

<!-- hr: cambio temático entre bloques de contenido -->
<hr>

HTML ignora los espacios y saltos de línea extra que escribas en el código: diez espacios se muestran como uno. Para separar bloques usa párrafos y, para espaciar visualmente, CSS (margin). Nunca uses varios <br> seguidos para crear espacio.

Énfasis e importancia

Etiqueta	Significado	Se ve como
<strong>	Importancia fuerte	Negrita
<em>	Énfasis (cambia el sentido de la frase)	Cursiva
<b>	Llamar la atención sin importancia extra (palabras clave, nombres de productos)	Negrita
<i>	Voz o tono diferente (términos técnicos, palabras en otro idioma)	Cursiva
<mark>	Texto resaltado o relevante para la búsqueda	Fondo amarillo
<small>	Letra pequeña, avisos legales	Más pequeño
<s>	Ya no es correcto o vigente (precio anterior)	Tachado
<sub> / <sup>	Subíndice / superíndice	H₂O, m²
<abbr>	Abreviatura	Subrayado punteado

<p><strong>Atención:</strong> el local cierra a las 9 p.m.</p>
<p>Me <em>encanta</em> el café de olla.</p>
<p>Precio: <s>$60</s> <strong>$45</strong></p>
<p>El agua es H<sub>2</sub>O y el local mide 80 m<sup>2</sup>.</p>
<p>Diseñamos sitios con <abbr title="Search Engine Optimization">SEO</abbr> incluido.</p>
<p><small>Precios sujetos a cambio sin previo aviso.</small></p>

Buena práctica

Usa <strong> y <em> cuando el significado importa. Si solo quieres un estilo visual (por ejemplo, un texto en negrita decorativo), usa un <span> con una clase y dale estilo con CSS.

Citas

<!-- Cita en bloque, con su fuente -->
<figure>
  <blockquote cite="https://maps.google.com/reseña-123">
    <p>El mejor café de olla que he probado en la ciudad.</p>
  </blockquote>
  <figcaption>— Mariana G., <cite>Reseñas de Google</cite></figcaption>
</figure>

<!-- Cita corta dentro de un párrafo: el navegador agrega comillas -->
<p>Como dice nuestro barista: <q>El café no espera a nadie</q>.</p>

• <blockquote>: cita larga en bloque.
• <q>: cita corta en línea.
• <cite>: el título de una obra (libro, película, sitio). No el nombre de una persona.

Código y texto preformateado

<p>Para centrar usa <code>display: grid</code> y <code>place-items: center</code>.</p>

<p>Presiona <kbd>Ctrl</kbd> + <kbd>S</kbd> para guardar.</p>

<p>El programa respondió: <samp>Archivo no encontrado</samp></p>

<!-- pre respeta espacios y saltos de línea tal cual -->
<pre><code>function saludar() {
  console.log("Hola");
}</code></pre>

• <code>: fragmento de código.
• <kbd>: teclas que el usuario debe presionar.
• <samp>: salida de un programa.
• <pre>: texto preformateado (respeta espacios). Combínalo con <code> para bloques de código.

Entidades HTML

Algunos caracteres tienen significado especial en HTML (como el signo menor que, que abre una etiqueta). Para mostrarlos como texto se usan entidades: empiezan con & y terminan con ;.

Entidad	Resultado	Uso
<	menor que	Mostrar etiquetas como texto
>	mayor que	Mostrar etiquetas como texto
&	ampersand	El propio signo &
"	comillas dobles	Dentro de atributos
 	espacio que no se rompe	Unir "10 km" para que no se separe
©	©	Derechos de autor
® / ™	® / ™	Marcas
—	—	Raya
€	€	Moneda

<p>La etiqueta &lt;p&gt; crea un párrafo.</p>
<p>Juan &amp; María</p>
<p>Estamos a 5&nbsp;km del centro.</p>
<footer>&copy; 2026 Café Aroma</footer>

Gracias a UTF-8 puedes escribir directamente acentos, ñ, €, © o emojis; no necesitas entidades para ellos. Solo son imprescindibles para el signo menor que, el mayor que y el ampersand cuando aparecen en el texto.

Elementos genéricos: div y span

• <div>: contenedor en bloque sin significado (ocupa todo el ancho).
• <span>: contenedor en línea sin significado (se queda dentro del texto).

<div class="tarjeta">
  <p>Precio: <span class="precio">$45</span></p>
</div>

Úsalos cuando ningún elemento semántico encaje. En la lección de HTML semántico verás alternativas con significado.

Casos de uso reales

• Página de servicios: <h1> con el nombre del servicio, <h2> para "Beneficios", "Precios", "Preguntas frecuentes".
• Blog técnico: <pre><code> para fragmentos de código y <kbd> para atajos.
• Tienda: <s> para el precio anterior y <strong> para el precio de oferta.
• Pie de página: © y <small> para el aviso legal.

Ejercicios

1. Estructura con encabezados correctos la página de un gimnasio: nombre del gimnasio, secciones "Clases" (con "Yoga" y "Spinning"), "Horarios" y "Contacto".
2. Escribe un párrafo que muestre literalmente el texto: Usa la etiqueta <strong> para lo importante.
3. Crea una oferta con precio anterior tachado, precio nuevo destacado y una nota legal en letra pequeña.

Ver solución

<!-- Ejercicio 1 -->
<h1>Gimnasio Fuerza Total</h1>
<h2>Clases</h2>
<h3>Yoga</h3>
<p>Lunes y miércoles a las 7:00.</p>
<h3>Spinning</h3>
<p>Martes y jueves a las 19:00.</p>
<h2>Horarios</h2>
<p>Lunes a sábado de 6:00 a 22:00.</p>
<h2>Contacto</h2>
<p>Tel. 55 1234 5678</p>

<!-- Ejercicio 2 -->
<p>Usa la etiqueta <code>&lt;strong&gt;</code> para lo importante.</p>

<!-- Ejercicio 3 -->
<p>
  Mensualidad: <s>$899</s> <strong>$599</strong>
  <br><small>Promoción válida hasta el 31 de diciembre. Aplican restricciones.</small>
</p>

Resumen

• Usa encabezados <h1> a <h6> por jerarquía, no por tamaño; un solo <h1> por página.
• <p> para párrafos; <br> solo para saltos dentro de un mismo bloque; <hr> para cambios de tema.
• <strong> = importancia, <em> = énfasis; para estilos puramente visuales, CSS.
• <blockquote>, <q> y <cite> para citas; <code>, <pre> y <kbd> para código.
• Las entidades (<, &,  , ©) muestran caracteres especiales.
• <div> y <span> son contenedores genéricos sin significado.