Etiquetas de texto

Domina los títulos, párrafos, énfasis, citas y el resto de etiquetas que dan forma al contenido textual de cualquier página.

El texto es el contenido principal de la mayoría de webs. HTML tiene etiquetas específicas para cada tipo de fragmento textual — y elegir la correcta importa tanto para la accesibilidad como para el SEO.

Títulos: <h1> a <h6>

Los títulos definen la jerarquía del contenido. <h1> es el más importante, <h6> el menos.

<h1>Título principal de la página</h1>
<h2>Sección principal</h2>
<h3>Subsección</h3>
<h4>Apartado dentro de la subsección</h4>
<h5>Rara vez necesario</h5>
<h6>Casi nunca usado</h6>

Regla clave: cada página debe tener un solo <h1>. Los motores de búsqueda lo usan como señal del tema principal. El resto de títulos pueden repetirse, pero siempre respetando la jerarquía — no saltes de <h2> a <h4> sin <h3>.

Párrafos: <p>

El bloque básico de texto. Cada párrafo va en su propio <p>:

<p>Este es el primer párrafo. Tiene varias frases.</p>
<p>Este es el segundo párrafo. El navegador añade espacio entre ellos automáticamente.</p>

No uses <br> para separar párrafos. Para eso están los <p>. <br> es solo para saltos de línea dentro de un mismo bloque (como en una dirección postal o un poema).

Énfasis: <strong> y <em>

<p>El atributo <strong>lang</strong> es <em>muy importante</em> para la accesibilidad.</p>
  • <strong> → negrita semántica — el contenido es importante
  • <em> → cursiva semántica — el contenido tiene énfasis especial

No uses <b> e <i> para esto. Existen pero no tienen significado semántico — son puramente estéticos.

Citas: <blockquote> y <q>

<!-- Cita en bloque (multilinea, por ejemplo de un libro o artículo) -->
<blockquote cite="https://developer.mozilla.org">
  <p>HTML es el lenguaje de marcado estándar para crear páginas web.</p>
</blockquote>

<!-- Cita en línea (dentro de un párrafo) -->
<p>Como dijo alguien sabio: <q>El código es poesía.</q></p>

Código: <code> y <pre>

<!-- Fragmento de código en línea -->
<p>Usa <code>console.log()</code> para depurar en JavaScript.</p>

<!-- Bloque de código con formato preservado -->
<pre>
  <code>
    function saludar(nombre) {
      return `Hola, ${nombre}!`;
    }
  </code>
</pre>

<pre> preserva los espacios y saltos de línea tal cual están en el HTML.

Otras etiquetas útiles

<!-- Texto eliminado y texto insertado (útil en comparaciones) -->
<p>El precio era <del>50€</del> y ahora es <ins>35€</ins>.</p>

<!-- Subíndice y superíndice -->
<p>H<sub>2</sub>O es agua. E = mc<sup>2</sup> es Einstein.</p>

<!-- Abreviatura con tooltip -->
<p><abbr title="HyperText Markup Language">HTML</abbr> es la base de la web.</p>

<!-- Texto pequeño (avisos legales, notas al pie) -->
<p><small>© 2026 Todos los derechos reservados.</small></p>

La diferencia entre semántica y estilo

Un error común es elegir las etiquetas por cómo se ven en lugar de por lo que significan:

<!-- ❌ Usar h3 porque "tiene el tamaño que quiero" -->
<h3>Aviso legal</h3>

<!-- ✅ Usar la etiqueta correcta y cambiar el tamaño con CSS -->
<p class="aviso-legal">Aviso legal</p>

El HTML describe qué es algo. El CSS describe cómo se ve. Mezclarlos crea problemas de accesibilidad y SEO.

En la siguiente lección aprendemos a conectar páginas entre sí y a mostrar imágenes: los dos elementos que convierten un documento en una web de verdad.