<!DOCTYPE html>
<html lang="es">
<head>
  <!-- 1. Codificación de caracteres -->
  <meta charset="UTF-8">

  <!-- 2. Configuración móvil responsiva -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. Título SEO -->
  <title>Aprende HTML5 desde Cero · Kilopolis Academia</title>

  <!-- 4. Descripción para Google -->
  <meta name="description" content="Tutorial práctico e interactivo de HTML5 en español. Domina etiquetas semánticas, tablas, formularios y multimedia con ejemplos en vivo.">
  <meta name="author" content="Kilopolis Academia">

  <!-- 5. Open Graph para WhatsApp y Redes Sociales -->
  <meta property="og:title" content="Manual Completo de HTML5">
  <meta property="og:description" content="Ejemplos ejecutables en tiempo real para dominar la web moderna.">
  <meta property="og:image" content="https://academia.kilopolis.com/assets/img/og-html5.jpg">
  <meta property="og:type" content="website">

  <!-- 6. Estilos internos de demostración -->
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card-meta { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; max-width: 520px; }
    .snippet-preview { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-top: 15px; }
    .snippet-title { color: #1a0dab; font-size: 1.1rem; text-decoration: none; font-weight: 500; }
    .snippet-url { color: #202124; font-size: 0.8rem; margin: 3px 0; }
    .snippet-desc { color: #4d5156; font-size: 0.85rem; }
  </style>
</head>
<body>

  <div class="card-meta">
    <h3 style="margin-top: 0; color: #0f172a;">Simulación de Resultado en Google</h3>
    <p style="font-size: 0.9rem; color: #64748b;">
      Así es como los buscadores leen e interpretan el <code>&lt;title&gt;</code> y el <code>&lt;meta name="description"&gt;</code> de esta cabecera:
    </p>

    <div class="snippet-preview">
      <div class="snippet-url">https://academia.kilopolis.com &rsaquo; manuales &rsaquo; html5</div>
      <a href="#" class="snippet-title">Aprende HTML5 desde Cero · Kilopolis Academia</a>
      <div class="snippet-desc">
        Tutorial práctico e interactivo de HTML5 en español. Domina etiquetas semánticas, tablas, formularios y multimedia con ejemplos en vivo.
      </div>
    </div>
  </div>

</body>
</html>