Tema 4 · Fundamentos

Encabezados, Párrafos y Saltos

Domina la jerarquía de títulos de <h1> a <h6>, la estructuración de párrafos con <p>, el manejo de espacios en blanco y el uso de <pre>.

Elementos, Etiquetas y Atributos Formato de Texto y Énfasis

Encabezados en HTML (Headings)

HTML define seis niveles de encabezados, desde <h1> hasta <h6>. Indican la importancia y jerarquía de las secciones de tu página:

  • <h1>: El título principal y más importante de la página. Por buenas prácticas de SEO y accesibilidad, solo debe existir un <h1> por documento.
  • <h2>: Subtítulos de las secciones principales.
  • <h3>: Sub-secciones dentro de un <h2>.
  • <h4>, <h5>, <h6>: Niveles de detalle descendentes para temas muy estructurados.
⚠️ Importante: No uses etiquetas de encabezado solo para hacer el texto más grande o en negrita. Usa encabezados únicamente para estructurar el documento. Para cambiar el tamaño visual usa CSS (font-size).

Párrafos y el Fenómeno de Colapso de Espacios

El elemento <p> define un párrafo de texto. Los navegadores agregan automáticamente un margen vertical antes y después de cada párrafo.

Un detalle crucial para principiantes es que los navegadores web colapsan los espacios en blanco: si en tu código fuente escribes 10 espacios seguidos o 5 saltos de línea con Enter dentro de un <p>, el navegador los comprimirá a un solo espacio. 

<!-- El navegador lo renderizará todo en una sola línea continua con un único espacio -->
<p>
  Texto con muchos
     espacios       y
  saltos de línea.
</p>

Saltos de Línea (<br>) y Separadores (<hr>)

  • <br> (Break): Inserta un salto de línea sin iniciar un nuevo párrafo. Ideal para direcciones postales, poemas o letras de canciones. No debe usarse para crear espacios vacíos entre bloques.
  • <hr> (Horizontal Rule): Representa un cambio o ruptura temática en el contenido, dibujando una línea horizontal por defecto.

Texto Preformateado (<pre>)

El elemento <pre> muestra el texto exactamente como fue escrito en el editor de código: respeta cada espacio, tabulación y salto de línea, y se renderiza en una tipografía monoespaciada (de ancho fijo): 

<pre>
  Fila 1:    100 pts
  Fila 2:     50 pts
  Fila 3:     25 pts
</pre>

⚡ Jerarquía de Títulos y Comportamiento de Párrafos

Compara los diferentes niveles de encabezado y observa cómo <pre> conserva los espacios exactos frente a <p>:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Encabezados y Párrafos en HTML</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.5; color: #1e293b; }
    .seccion { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
    pre { background: #0f172a; color: #38bdf8; padding: 15px; border-radius: 6px; font-size: 0.9rem; overflow-x: auto; }
  </style>
</head>
<body>

  <div class="seccion">
    <h1>Encabezado Nivel 1 (H1 Principal)</h1>
    <h2>Encabezado Nivel 2 (H2 Sección)</h2>
    <h3>Encabezado Nivel 3 (H3 Subtema)</h3>
    <h4>Encabezado Nivel 4 (H4 Detalle)</h4>
  </div>

  <div class="seccion">
    <h2>Dirección de Ejemplo con &lt;br&gt;</h2>
    <p>
      Kilopolis Tech Park<br>
      Cl. 8 #19-80<br>
      Pereira, Risaralda, Colombia
    </p>

    <hr>

    <h2>Ejemplo de Texto Preformateado con &lt;pre&gt;</h2>
    <pre>
  ASCII ART / DIAGRAMA
  +-------------+       +-------------+
  |  Navegador  | ----> | Servidor Web|
  |  (Cliente)  | <---- | (HTML/CSS)  |
  +-------------+       +-------------+
    </pre>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.