<!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>