Los Tres Pilares: doctype, head y body

“Un edificio sin cimientos colapsa. Un HTML sin estructura correcta, jamás alcanza la maestría.” - Código del Ninja

🎯 Objetivo Ninja

Construirás la estructura base de CUALQUIER documento HTML profesional. Dominarás los tres pilares que sostienen toda la web.

🏯 Teoría: El Por Qué

Imagina construir un templo ninja. Necesitas:

  1. Planos aprobados (DOCTYPE) - “Vamos a construir según este estándar”
  2. Información de la construcción (HEAD) - Permisos, materiales, planos
  3. La construcción visible (BODY) - Paredes, puertas, ventanas

En HTML es IGUAL:

<!DOCTYPE html>           <!-- 1. Planos: Usaremos HTML5 -->
<html lang="es">          <!-- 2. Inicio del templo -->
  <head>                  <!-- 3. Información invisible -->
    <!-- metadata aquí -->
  </head>
  <body>                  <!-- 4. Construcción visible -->
    <!-- contenido aquí -->
  </body>
</html>                   <!-- 5. Fin del templo -->

¿Por qué NO puedes saltarte esto?

  • Sin DOCTYPE, el navegador entra en “modo quirks” (modo loco)
  • Sin HEAD, no hay SEO, no hay estilos, no hay metadatos
  • Sin BODY, no hay contenido visible

⚔️ Implementación

Pilar 1: DOCTYPE (La Declaración)

<!DOCTYPE html>

¿Qué hace?

  • Le dice al navegador: “Este documento es HTML5”
  • Activa el “modo estándar” (rendering correcto)
  • Debe ser la PRIMERA línea (antes de <html>)

Historia ninja:

<!-- Antiguo (HTML4 - NO uses esto) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- Moderno (HTML5 - USA esto) -->
<!DOCTYPE html>

Pilar 2: HEAD (La Información Invisible)

El <head> contiene metadata (datos sobre datos). El usuario NO ve esto, pero es crítico:

<head>
  <!-- OBLIGATORIO: Codificación de caracteres -->
  <meta charset="UTF-8">
  
  <!-- OBLIGATORIO: Responsive en móviles -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- OBLIGATORIO: Título (aparece en la pestaña) -->
  <title>Mi Página Ninja - 8devmx</title>
  
  <!-- Descripción (SEO) -->
  <meta name="description" content="Aprende desarrollo web ninja">
  
  <!-- Icono de la pestaña -->
  <link rel="icon" href="favicon.ico">
  
  <!-- Estilos CSS -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- JavaScript (opcional en head) -->
  <script src="app.js" defer></script>
</head>

Elementos críticos:

<meta charset="UTF-8">

Sin esto, caracteres especiales (ñ, á, é) se ven así: ñ.

<!-- SIN charset -->
Niño → Niño   ❌

<!-- CON charset UTF-8 -->
Niño → Niño    ✅

<meta name="viewport">

Sin esto, tu sitio se ve HORRIBLE en móviles:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

El texto de la pestaña del navegador:

<title>Ruta del Shinobi - Aprende desarrollo web</title>

Aparece en:

  • La pestaña del navegador
  • Resultados de Google
  • Marcadores/favoritos

Pilar 3: BODY (El Contenido Visible)

TODO lo que el usuario VE va aquí:

<body>
  <h1>¡Bienvenido al Dojo!</h1>
  <p>Este contenido SÍ lo verás en pantalla.</p>
  <img src="ninja.webp" alt="Un ninja">
</body>

Documento Completo: Plantilla Ninja

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Codificación -->
  <meta charset="UTF-8">
  
  <!-- Responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO -->
  <meta name="description" content="Plataforma de aprendizaje ninja">
  <meta name="keywords" content="html, css, javascript, frontend">
  <meta name="author" content="8devmx">
  
  <!-- Título -->
  <title>Mi Página Ninja</title>
  
  <!-- Favicon -->
  <link rel="icon" href="favicon.ico">
  
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- JavaScript (defer = espera a que cargue HTML) -->
  <script src="app.js" defer></script>
</head>
<body>
  <!-- TODO tu contenido visible aquí -->
  <h1>¡Hola, Ninja!</h1>
</body>
</html>

🎯 Reto Ninja

MISIÓN DE RANGO GENIN

⛩️ Forjando tu Primer Dojo

1

Crea un archivo llamado mi-dojo.html en tu computadora.

2

Copia la Plantilla Ninja que vimos arriba y pégala en tu archivo.

3

Personaliza tu templo: cambia el <title> a "Mi Dojo de [Tu Nombre]" y la descripción a algo personal.

4

En el <body>, añade un <h1> con tu nombre ninja, un <p> con tu misión y una lista <ul> con 3 técnicas por aprender.

5

Guarda y abre el archivo en tu navegador (doble clic). ¡Si ves tu nombre, has tenido éxito!

Consejo del Sensei: Arrastra el archivo directamente a una pestaña de Chrome para verlo cobrar vida al instante.

Validación de Maestría:

  • ¿Ves el título en la pestaña del navegador?
  • ¿Se ven bien las tildes y la ñ?
  • ¿El contenido es exactamente lo que escribiste?

🔓 Pergamino Oculto (Bonus)

Técnica 1: Open Graph (Vista previa en redes sociales)

Cuando compartes tu link en Facebook/Twitter/WhatsApp:

<head>
  <!-- Open Graph -->
  <meta property="og:title" content="Ruta del Shinobi">
  <meta property="og:description" content="Aprende desarrollo web ninja">
  <meta property="og:image" content="https://8devmx.com/preview.webp">
  <meta property="og:url" content="https://8devmx.com">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
</head>

Resultado: Vista previa bonita con imagen al compartir tu link.

Técnica 2: Preload de Recursos Críticos

<head>
  <!-- Precarga la fuente MÁS importante -->
  <link rel="preload" href="fonts/ninja.woff2" as="font" crossorigin>
  
  <!-- Precarga imagen crítica -->
  <link rel="preload" href="hero.webp" as="image">
</head>

Beneficio: 200-500ms más rápido en carga inicial.

Técnica 3: Atributo lang para SEO y Accesibilidad

<!-- Español de México -->
<html lang="es-MX">

<!-- Español de España -->
<html lang="es-ES">

<!-- Inglés -->
<html lang="en">

Beneficios:

  • Google sabe en qué idioma indexar tu página
  • Lectores de pantalla pronuncian correctamente
  • Navegador sugiere traducción si es necesario

Técnica 4: Prevenir Zoom en iOS (Cuidado)

<!-- EVITA esto (mala para accesibilidad) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<!-- MEJOR: deja que el usuario haga zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

✅ Checklist de Dominio

MAESTRÍA ALCANZADA

Pergamino de Habilidades

Próximo Pergamino: Texto con Alma - Dominarás títulos, párrafos, listas y énfasis semántico.

¡Los cimientos están listos, ninja! Ahora construyamos el templo. 🏯