Títulos y párrafos

HTML tiene seis niveles de título, de h1 a h6, y quienes usan lectores de pantalla suelen saltar de título en título para orientarse en una página.

Un esquema hecho de títulos

Piensa en un libro de recetas. El libro tiene un título, cada receta tiene un nombre y cada receta tiene partes más pequeñas, como Ingredientes y Preparación. HTML expresa el mismo esquema con seis elementos de título, de <h1> a <h6>. <h1> es el nivel superior, normalmente el título de la página. <h2> marca las secciones principales, <h3> las partes dentro de una sección, y así sucesivamente. La mayoría de las páginas nunca necesitan más de tres o cuatro niveles.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Elige el nivel por la estructura, no por el tamaño

Los navegadores dibujan <h1> grande y <h6> pequeño, y es tentador elegir un título por su tamaño. No lo hagas. El nivel le dice al software cómo está organizada la página. Los lectores de pantalla pueden listar todos los títulos de una página y dejar que el usuario salte directamente a uno, como en un índice. Los buscadores también usan los títulos para entender de qué trata una página. Si quieres que un h2 se vea más pequeño, déjalo como h2 y cambia su tamaño con CSS.

Dos costumbres mantienen limpio el esquema. Primero, usa un solo <h1> por página para su título principal; MDN lo recomienda, y es lo que espera la mayoría de los usuarios. Segundo, no te saltes niveles al bajar: después de un h2 viene un h3, no un h5. Volver a subir está bien, así que un h3 puede ir seguido de un h2 nuevo cuando empieza la sección siguiente.

Párrafos

El texto corrido va en elementos <p>, uno por párrafo. Como HTML colapsa los espacios en blanco, presionar Enter dos veces en tu archivo no crea un párrafo nuevo en pantalla; solo lo hace un <p> nuevo. Los navegadores agregan por defecto un espacio arriba y abajo de cada párrafo, que CSS puede cambiar. Un párrafo no puede contener otro párrafo ni un título, así que si olvidas un </p> de cierre, el navegador lo cierra por ti en cuanto empieza el siguiente elemento de bloque.

A veces los saltos de línea son parte del contenido, como en una dirección postal o un poema. Para eso, usa <br> al final de cada línea dentro de un solo párrafo o de un <address>. No uses un montón de elementos <br> para hacer espacio vertical; ese es trabajo de los márgenes de CSS. Para marcar un cambio de tema dentro de una sección, como un cambio de escena en un cuento, usa <hr>, el cambio temático, que los navegadores dibujan como una línea horizontal.

Citas

Una cita larga de otra fuente va en <blockquote>, que los navegadores muestran con sangría. Pon dentro los párrafos citados, y puedes indicar la dirección de la fuente en su atributo cite. Una cita corta dentro de una oración usa <q>, y el navegador agrega las comillas por ti. El elemento <cite> marca el título de una obra, como un libro o una película.