Etiquetas de texto

Domina los elementos para formatear y dar jerarquía al texto: encabezados, párrafos, énfasis y más.

📖

Teoría

El texto es el contenido más común en la web. HTML ofrece múltiples etiquetas para darle estructura semántica y significado al texto:

<h1> a <h6> → Encabezados, del más importante al menos importante

<p> → Párrafo de texto

<strong> → Importancia (negrita semántica)

<em> → Énfasis (cursiva semántica)

<span> → Contenedor en línea genérico

<br> → Salto de línea

html

<!-- Jerarquía de encabezados -->
<h1>Título principal del artículo</h1>
<h2>Sección importante</h2>
<h3>Subsección</h3>

<!-- Párrafos y énfasis -->
<p>El café es <strong>muy importante</strong> para los desarrolladores.</p>
<p>Algunos prefieren <em>té verde</em> por sus antioxidantes.</p>

<!-- span para estilos específicos -->
<p>Mi color favorito es <span style="color: blue">azul</span>.</p>

<!-- Salto de línea -->
<p>Línea uno.<br>Línea dos en el mismo párrafo.</p>

⚠️Semántica vs Presentación

Usa <strong> para importancia y <em> para énfasis, no solo para poner negrita o cursiva. Para estilos visuales sin significado semántico, usa CSS. Un lector de pantalla pronunciará <em> con énfasis vocal.

⚡

Ejercicio práctico

🎯 Tu misión

Crea un artículo sobre tu tecnología favorita usando jerarquía de encabezados (h1, h2, h3), varios párrafos, y usa strong/em para destacar términos clave.

Vista previa

←Capítulo anterior

Siguiente capítulo→