Texto: headings, párrafos, énfasis, listas y citas

La web es, ante todo, texto. Esta lección te da las etiquetas para estructurarlo con jerarquía — y te enseña la regla que separa a los aficionados de los profesionales: las etiquetas describen SIGNIFICADO, no apariencia.

Headings: los títulos con jerarquía

HTML tiene seis niveles de título, de <h1> a <h6>:

<h1>El título de la página (h1: solo UNO)</h1>
<h2>Una sección (h2)</h2>
<h3>Una subsección (h3)</h3>
<p>Y el texto normal siempre en párrafos.</p>

body { font-family: system-ui; padding: 24px; color: #1e293b; }

Dos reglas de oro que los lectores de pantalla y Google agradecen:

1. Un solo <h1> por página: es EL título del documento.
2. Sin saltos de nivel: después de un h2 viene un h3, no un h5. La jerarquía es un índice, no una escala de tamaños.

Párrafos y énfasis

<p>
Los párrafos van en <strong>etiquetas p</strong>, y dentro puedes dar
énfasis <em>sutil con em</em> o <strong>fuerte con strong</strong>.
</p>

Listas: el arma secreta de la maquetación

Hay dos tipos, y los usarás muchísimo más de lo que imaginas (los menús de navegación de casi toda la web son listas):

<h2>Desordenada (ul): el orden no importa</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<h2>Ordenada (ol): el orden ES el mensaje</h2>
<ol>
<li>Estructura con HTML</li>
<li>Estilo con CSS</li>
<li>Vida con JavaScript</li>
</ol>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
h2 { font-size: 1rem; }

Cada elemento va en un <li> (list item), y los <li> solo pueden vivir dentro de <ul> o <ol>. Las listas se pueden anidar: un <li> puede contener otra <ul> completa (así se hacen los submenús).

Citas

Para citar a alguien, HTML tiene etiquetas dedicadas:

<blockquote cite="https://developer.mozilla.org">
<p>El HTML define el significado y la estructura del contenido web.</p>
</blockquote>

<p>Como dice MDN, <q>HTML define el significado</q> — cita corta en línea.</p>

<blockquote> es para citas largas (en bloque) y <q> para citas cortas dentro de un párrafo — el navegador le pone las comillas automáticamente.

Mini-reto

En tu index.html, escribe tu receta de cocina favorita: un <h1> con el nombre, un <h2> "Ingredientes" con una <ul>, y un <h2> "Preparación" con una <ol> de pasos. Verás lo natural que se siente la jerarquía cuando el contenido es real.

Qué sigue

Texto dominado. La próxima lección conecta tu página con el mundo: enlaces e imágenes — y el concepto de rutas, que confunde a todos al principio y a ti no.