Headings y párrafos

HTML tiene dos elementos fundamentales para estructurar texto: los headings y los párrafos.

Headings: títulos de sección

Un heading es el título de una sección. Cuando leés un artículo, un libro o cualquier documento, los encabezados te dicen de qué trata y la importancia de lo que viene — antes de que empieces a leerlo.

HTML tiene seis niveles: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Los números indican jerarquía — cuanto menor el número, más abarcador es el título. El <h1> es el título de toda la página; el <h2> abre secciones dentro de ella; el <h3> abre subsecciones dentro de cada sección.

<h1>Recetas de cocina argentinas</h1>

<h2>Platos principales</h2>
<h3>Milanesa napolitana</h3>
<p>La milanesa napolitana es un clásico de la cocina porteña.</p>

<h3>Asado</h3>
<p>El asado es una tradición familiar de los domingos.</p>

<h2>Postres</h2>
<h3>Alfajores</h3>
<p>Los alfajores se rellenan con dulce de leche.</p>

Podés pensarlo como un índice: el <h1> es el libro, los <h2> son los capítulos, los <h3> las secciones dentro de cada capítulo. El navegador, los lectores de pantalla y los motores de búsqueda usan esa jerarquía para entender la estructura de la página y saber qué contenido pertenece a qué sección.

Los headings son semántica, no estilo: Los headings no existen para hacer texto grande — existen para declarar la importancia y jerarquía del contenido.

<!-- ❌ Elegidos por tamaño, no por jerarquía -->
<h3>Menú del día</h3>
<h1>Milanesa napolitana</h1>
<h1>Ensalada caprese</h1>

Visualmente puede parecer aceptable, pero el HTML declara que hay dos títulos principales de página y que ambos son más importantes que el “Menú del día”. Los headings deben reflejar la estructura real del contenido, no su estilo:

<!-- ✅ Elegidos por jerarquía real -->
<h2>Menú del día</h2>
<h3>Milanesa napolitana</h3>
<h3>Ensalada caprese</h3>

Tres reglas concretas:

1. Un solo <h1> por página. Es el título principal — no puede haber dos. Dos <h1> son dos títulos en conflicto.

2. No saltear niveles. No podés ir de <h2> a <h4> sin un <h3> en el medio: es como tener un capítulo 2.4 sin haber pasado por el 2.3. Los lectores de pantalla navegan la página saltando entre headings; una jerarquía rota los confunde.

3. Nunca uses un heading solo para cambiar el tamaño del texto. Si el contenido no es el título de una sección, no es un heading.

Párrafos: <p>

Un párrafo es un bloque de texto continuo que desarrolla una idea. Cuando leés un artículo y el tema cambia, el escritor empieza un párrafo nuevo. <p> hace eso en HTML: agrupa una unidad de prosa y la separa visualmente de lo que viene antes y después.

<p>El mate es una bebida tradicional de Argentina, Uruguay y Paraguay.</p>

<p>
  Se prepara con yerba mate y agua caliente, usando una calabaza y una bombilla como utensilios.
</p>

El navegador muestra cada <p> como un bloque separado con espacio encima y abajo — sin necesidad de hacer nada extra para que se vean separados.

<p> no es un contenedor genérico para cualquier texto. Si el contenido es el título de una sección, usás un heading. Si es un ítem de lista, usás <li>. <p> es específicamente para prosa: bloques de texto corrido que forman párrafos.

Tu turno: el starter tiene los textos de las recetas en comentarios. Reemplazá cada comentario con el elemento correcto: <h1> para el título principal, <h2> para cada sección, <h3> para cada receta y <p> para cada bloque de texto. Luego hacé clic en “Comprobar”.