Curso de HTML / Encabezados y párrafos: h1–h6, p y br

En HTML, h1 a h6 expresan la jerarquía de los encabezados y p identifica un párrafo. br introduce un salto de línea dentro del mismo contenido, sin crear un párrafo nuevo. El nivel de un encabezado se elige por su relación con el resto del documento, no por el tamaño de letra que quieras obtener.

Elegir los niveles según la estructura

Un documento suele tener un h1 que expresa su tema principal, h2 para las secciones importantes y h3 para sus subsecciones. Lee primero los encabezados de este fragmento: los dos h3 pertenecen al apartado “HTML Structure”; el siguiente h2 inicia otro apartado principal.

<h1>Accessibility Guide</h1>



<h2>HTML Structure</h2>

<p>An overview of HTML document structure.</p>



<h3>Heading Levels</h3>

<p>How to organize headings.</p>



<h3>Paragraphs</h3>

<p>How to separate paragraphs.</p>



<h2>CSS Presentation</h2>

<p>How CSS changes the appearance of headings and paragraphs.</p>

Al entrar en una subsección, evita saltar directamente de h2 a h4. Al terminar una subsección sí puedes volver al nivel de la sección que corresponda. Una jerarquía comprensible ayuda a explorar el contenido y a desplazarse entre encabezados con tecnologías de apoyo; la guía de encabezados de W3C WAI explica esa relación.

Si tu tema de WordPress ya muestra el título del artículo como h1, comienza sus secciones principales con h2. No vuelvas a copiar el mismo título como otro encabezado principal dentro del cuerpo. Los encabezados describen temas; los elementos de las regiones de página describen otras relaciones estructurales.

Comparar el tamaño visual con el nivel semántico

Guarda el siguiente documento completo como index.html en UTF-8 y ábrelo en un navegador. Reúne los seis niveles para compararlos, no para recomendar que toda página tenga que utilizarlos todos.

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML Headings and Paragraphs</title>

  </head>

  <body>

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>

    <p>This is the first paragraph.</p>

    <p>This is the second paragraph.</p>

  </body>

</html>

Verás los textos “Heading 1” a “Heading 6” y dos párrafos. Sus tamaños y espacios iniciales pueden variar entre navegadores y estilos. Si necesitas un encabezado más pequeño, modifica su CSS: cambiar un h2 por un h5 solo para reducir la letra altera el significado de la estructura.

Separar párrafos con p

Cada p agrupa un bloque de frases relacionadas. Dos ideas que forman párrafos distintos deben tener elementos separados:

<p>HTML creates the structure of a web page.</p>

<p>CSS controls its appearance.</p>

Una línea vacía en el editor no crea por sí sola un nuevo párrafo HTML. Tampoco conviene utilizar párrafos vacíos como separadores. Para el espacio visual entre párrafos usa CSS, por ejemplo margin. No metas listas, tablas o encabezados dentro de p: tienen su propia estructura y el navegador puede cerrar el párrafo antes de lo que esperabas.

Usar br cuando la posición del salto importa

br es útil en una dirección o un poema si la ubicación del salto forma parte del contenido. Si cambia el tema, normalmente necesitas otro p, no otra línea dentro del mismo párrafo.

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML Paragraphs and Line Breaks</title>

  </head>

  <body>

    <p>This is the first paragraph.</p>

    <p>This is the first line of the second paragraph.<br>This is the second line of the second paragraph.</p>

  </body>

</html>

Guarda este segundo ejemplo en otro archivo o sustituye por completo el primero. El resultado debe mostrar dos párrafos; solo el segundo está dividido en dos líneas mediante br. No pegues un documento completo dentro del body de otro.

Corregir un salto de jerarquía

El siguiente bloque contrapone una jerarquía incompleta con una coherente. Prueba cada versión por separado dentro de body; no mantengas ambas como contenido real de la página.

<!-- A skipped heading level -->
<h2>Delivery information</h2>
<h4>Delivery areas</h4>

<!-- A consistent hierarchy -->
<h2>Delivery information</h2>
<h3>Delivery areas</h3>
<h3>Delivery times</h3>

Lee únicamente el título y los encabezados. ¿Puedes reconocer el tema principal, sus apartados y sus subtemas? Corrige el nivel antes de ajustar tamaños y márgenes. Después vuelve a guardar y comprobar el resultado con el navegador y Nu HTML Checker.

La revisión visual no sustituye la revisión de estructura. También conviene explorar la página mediante teclado y comprobar el orden de lectura, como se practica en los fundamentos de accesibilidad HTML.