CodeAventura
HTML
▸Contenido de texto▸Textos

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi sitio web</title>
  </head>
  <body>
  </body>
</html>
●localhost:5173
04 / 16Textos
Anterior

Textos

El arte de escribir en la web

Ya sabes estructurar una página con títulos. Pero imagina un libro que solo tuviera títulos de capítulos y nada más — sería como un menú sin comida. Los títulos organizan, pero el texto es donde vive la historia.

En este episodio vas a aprender a darle vida a tus palabras.

Párrafos: los bloques de pensamiento

Cuando escribes en un documento de texto y presionas Enter dos veces, creas un nuevo párrafo. En HTML, necesitas ser más explícito. La etiqueta <p> le dice al navegador: "Esto es una unidad de pensamiento completa".

Sin la etiqueta <p>, el navegador juntaría todo el texto en una masa informe, ignorando tus saltos de línea como si no existieran. Pruébalo si no me crees — es una de esas lecciones que se aprenden mejor experimentando.

Dando énfasis a las palabras

No todas las palabras son iguales. Algunas gritan, otras susurran. HTML te da herramientas para transmitir esa intención.

<strong> — La voz que no se ignora

Cuando algo es verdaderamente importante, usamos <strong>. No es solo texto en negrita — es una declaración de importancia.


Aviso

Aquí viene un consejo de veterano: no uses strong solo porque quieres texto grueso. Más adelante, con CSS, podrás hacer que cualquier texto se vea como quieras. Usa strong cuando el significado sea importante, no solo la apariencia.

<em> — El énfasis sutil

A veces quieres dar énfasis sin gritar. <em> (de "emphasis") es como inclinar ligeramente la voz para destacar algo.

¿Ves cómo el énfasis cambia completamente el significado? Esa es la magia de <em>.

<i> vs <em> — El gran debate

Ambos se ven en cursiva, pero no son lo mismo:

  • <em> = énfasis real, cambia el significado de la frase
  • <i> = texto en otro "modo": términos técnicos, palabras en otros idiomas, pensamientos

<u> — El subrayado (con precaución)

El subrayado existe, pero úsalo con cuidado. En la web, el texto subrayado tradicionalmente significa "esto es un enlace". Si subrayas texto normal, podrías confundir a tus usuarios.

Citas: las palabras de otros

Cuando quieres incluir las palabras de otra persona — una cita famosa, un fragmento de un libro, el testimonio de un usuario — usas <blockquote>.

Es como poner comillas gigantes alrededor de un texto, diciéndole al mundo: "Esto no lo dije yo, pero vale la pena repetirlo".

Saltos de línea: el respiro

A veces necesitas bajar a la siguiente línea sin empezar un párrafo nuevo — como en un poema o una dirección. Para eso existe <br> (break).

Nota que <br> es una de esas etiquetas especiales que no necesita cierre. Es un comando simple: "baja aquí".

Tu cuarto desafío 🚀

Has aprendido a dar forma a las palabras. Ahora ponlo en práctica: crea un párrafo que cuente algo sobre ti, usando al menos <strong> y <em> para dar énfasis donde tenga sentido.

Las palabras tienen poder. Aprende a usarlas bien...