Texto y enlaces

Ya sabes montar el esqueleto de una página. Una página vacía, eso sí, no le sirve a nadie: ahora toca llenarla de contenido. Y casi todo el contenido de la web es, al final, texto —titulares, párrafos, palabras destacadas— y enlaces, que son lo que conecta una página con otra. Sin enlaces no habría web; habría documentos sueltos.

Seguimos con la ficha de Tracer del capítulo anterior. La misma página, ahora con contenido de verdad.

Encabezados: el índice, no el tamaño#

Hay seis niveles de encabezado, de <h1> a <h6>. Es el error más común de quien empieza, así que va en negrita: un encabezado no se elige por cómo de grande quieres el texto. Se elige por su lugar en la estructura. Son el índice del documento.

<!-- el título de la página: solo uno -->
<h1>Tracer</h1>
<!-- una sección -->
<h2>Cómo jugarla</h2>
<!-- una subsección dentro de la anterior -->
<h3>Errores típicos</h3>

La regla sana:

• Un único <h1> por página: lo que nombra a toda la página.
• Debajo, <h2> para cada sección; <h3> para subsecciones de esos <h2>, y así.
• No te saltes niveles (de <h1> directo a <h3>). Quien navega por encabezados —algo muy común con lector de pantalla— recorre justo ese índice; si tiene huecos, deja de tener sentido.

Si lo que quieres es un texto grande que no es un titular, eso es trabajo del CSS, no de un encabezado. Lo verás en el bloque de CSS.

Párrafos y saltos#

El texto corrido va en párrafos, con <p>:

<!-- primer párrafo -->
<p>Tracer es una heroína de daño centrada en la movilidad.</p>
<!-- segundo párrafo; el navegador los separa automáticamente -->
<p>Su trabajo es presionar la retaguardia rival y desaparecer.</p>

El navegador deja un espacio entre párrafos por su cuenta. Para separar dos bloques no metas líneas en blanco ni <br> repetidos: cada idea, su <p>.

Hay dos etiquetas de salto que se usan con cuentagotas:

• <br> fuerza un salto de línea dentro de un mismo bloque. Tiene sentido donde el salto es parte del contenido (una dirección postal, un verso), no para crear separación.
• <hr> es una separación temática: un cambio de asunto dentro de la página.

Ambas son elementos sin cierre, como <meta>.

<p>
  <!-- salto dentro de la dirección: el salto es parte del contenido -->
  Cuartel General de Overwatch<br>
  <!-- otra línea de la misma dirección, no un párrafo nuevo -->
  Ciudad de Gibraltar<br>
  Costa del Mediterráneo
</p>

<!-- separa dos secciones de asunto diferente: lo que hay arriba y lo que hay abajo son temas distintos -->
<hr>

<!-- nuevo bloque temático, tras la separación -->
<p>Estadísticas de la temporada anterior.</p>

Dar énfasis con significado#

Aquí vuelve la idea de fondo de todo el HTML: la etiqueta dice qué es algo, no cómo se ve. Hay dos parejas que parecen lo mismo y no lo son:

• <strong> marca que algo es importante. Se ve en negrita.
• <em> marca énfasis (cambia el sentido de la frase). Se ve en cursiva.
• <b> pone en negrita. Y nada más: no significa nada.
• <i> pone en cursiva. Y nada más.

Visualmente, <strong> y <b> se ven igual. La diferencia es invisible en pantalla y enorme por debajo: un lector de pantalla entona <strong> y <em>, porque comunican significado; a <b> y <i> los lee planos. Usa <strong>/<em> siempre que la palabra de verdad sea importante o lleve énfasis. <b>/<i> quedan para los pocos casos en que solo quieres el aspecto y no hay significado detrás (y muchas veces, ni eso: eso sería CSS).

Enlaces: lo que hace que sea la web#

El enlace es la pieza que conecta páginas. Es el elemento <a> (de anchor), y su destino va en el atributo href:

<a href="reinhardt.html">Ver la ficha de Reinhardt</a>
<!-- href="reinhardt.html" es la ruta de destino del enlace; el texto entre las etiquetas es lo que ve el usuario -->

El destino del href puede ser de dos tipos:

• Relativo: una ruta dentro de tu propio sitio (reinhardt.html, heroes/mercy.html). Es lo que usas para moverte entre las páginas de tu proyecto.
• Absoluto: una dirección completa con https:// a otro sitio (https://overwatch.blizzard.com).

Y hay un tercer caso útil: un enlace interno a la misma página, que salta a un elemento con un id concreto. El atributo id le da a un elemento un nombre único dentro de la página; lo verás a fondo en el bloque de CSS, pero aquí ya hace falta: si tienes <h2 id="como-jugarla">, entonces <a href="#como-jugarla"> salta exactamente ahí.

Dos costumbres que separan un enlace cualquiera de uno bien hecho:

• El texto del enlace describe su destino. “Lee la guía de Tracer”, no “haz click aquí”. Quien navega saltando de enlace en enlace, o un buscador, solo ve ese texto: “aquí” no informa de nada.
• Para abrir en otra pestaña, target="_blank", y acompáñalo de rel="noopener":

<a href="https://overwatch.blizzard.com" target="_blank" rel="noopener">
<!--                                      ^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^
     target="_blank" abre el enlace en una pestaña nueva
     rel="noopener"  impide que esa página acceda a la tuya -->
  Guía oficial de héroes
</a>

Históricamente, sin rel="noopener" la página de destino recibía una referencia a la tuya y podía manipularla. Los navegadores modernos (2026) ya aplican noopener por defecto al usar target="_blank", así que el riesgo está cubierto de serie; aun así, escribirlo deja la intención explícita en el código y protege en navegadores antiguos.

Caracteres especiales: las entidades#

Algunos caracteres tienen un significado reservado en HTML. El < empieza una etiqueta, así que no puedes escribirlo a pelo en el texto: el navegador se confunde. Para esos casos están las entidades, códigos que empiezan por & y terminan en ;:

Así, para escribir “daño & movilidad” en el texto, pones daño & movilidad.

Pruébalo#

Esta es la ficha de Tracer con encabezados, párrafos, énfasis y dos enlaces (uno interno a la propia página, otro externo). Sin CSS: fíjate en cómo el navegador, por defecto, hace el titular grande y pinta los enlaces en azul y subrayados. Cambia el texto, baja un encabezado de nivel o toca un enlace.

Comprueba lo que sabes#

Tu turno#

Llena la ficha de Tracer con texto bien marcado y enlaces que se entiendan solos, aquí mismo en el playground. Sigue sin haber CSS: lo que importa es la estructura del contenido. Edita el HTML en la pestaña izquierda y comprueba el resultado en el preview. Cuando creas que lo tienes, despliega las soluciones y compáralas con la tuya.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Tracer</title>
  </head>
  <body>
    <h1>Tracer</h1>

    <h3>Cómo jugarla</h3>
    <p>Tracer es una heroína de <b>daño</b> muy <i>rápida</i>. Su trabajo es presionar la retaguardia rival y volver atrás antes de que la castiguen.</p>

    <p>Para saber más, pincha <a href="https://overwatch.blizzard.com">aquí</a>.</p>
    <p><a href="reinhardt.html">aquí</a> para ver otro héroe.</p>
  </body>
</html>

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Tracer — Overwatch Team Builder</title>
  </head>
  <body>
    <h1>Tracer</h1>
    <p>Tracer es una heroína de <strong>daño</strong> centrada en la movilidad: su trabajo es presionar la retaguardia rival y desaparecer antes de recibir el castigo.</p>

    <h2>Cómo jugarla</h2>
    <p>Su parpadeo la reposiciona al instante, y su <em>retroceso</em> deshace los últimos segundos: úsalo para escapar de una emboscada, no por costumbre.</p>

    <p><a href="reinhardt.html">Ver la ficha de Reinhardt</a></p>
    <p><a href="https://overwatch.blizzard.com">Guía oficial de héroes</a></p>
  </body>
</html>

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Tracer, héroe de daño · Overwatch Team Builder</title>
  </head>
  <body>
    <h1>Tracer</h1>
    <p>Tracer es una heroína de <strong>daño</strong> centrada en la movilidad: su trabajo es presionar la retaguardia rival y desaparecer antes de recibir el castigo.</p>

    <h2>Cómo jugarla</h2>
    <p>Su parpadeo la reposiciona al instante, y su <em>retroceso</em> deshace los últimos segundos: úsalo para escapar de una emboscada, no por costumbre. Su sello es <em>daño &amp; movilidad</em>: presiona, molesta y se va.</p>

    <h2>Más del Team Builder</h2>
    <p><a href="reinhardt.html">Ver la ficha de Reinhardt, tanque principal</a></p>
    <p>
      <a href="https://overwatch.blizzard.com" target="_blank" rel="noopener">
        Guía oficial de héroes (se abre en una pestaña nueva)
      </a>
    </p>
  </body>
</html>