🏠 NIVEL 1

DOCTYPE y Estructura Básica del HTML

📊 Progreso del Nivel 1 0%
📖 Aprende sobre DOCTYPE y la estructura HTML

🤔 ¿Qué es DOCTYPE?

El <!DOCTYPE html> es como una tarjeta de identificación para tu página web. Le dice al navegador (Chrome, Firefox, Edge) que tu archivo es un documento HTML5 moderno.

📚 Historia: Antes de HTML5, DOCTYPE era muy largo y complicado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

¡Pero en HTML5 se simplificó muchísimo! Ahora solo es:

<!DOCTYPE html>

💡 Importante

¡DOCTYPE siempre va en la primera línea del archivo! Si no lo pones, el navegador entra en "modo quirks" (modo extraño) y tu página puede verse mal.

✅ Correcto: Empieza con <!DOCTYPE html>

❌ Incorrecto: Poner espacios o comentarios antes del DOCTYPE

⚠️ ¿Qué pasa sin DOCTYPE?

  • Los márgenes y tamaños pueden ser diferentes
  • Algunos estilos CSS no funcionarán bien
  • Tu sitio puede verse diferente en cada navegador
  • Es más difícil hacer que funcione en móviles

🏗️ La etiqueta HTML - El contenedor principal

La etiqueta <html> es como una caja gigante que contiene TODO tu sitio web. Siempre tiene una etiqueta de apertura y una de cierre.

📦 Analogía: La caja de Lego

Imagina que <html> es una caja de Lego:
🔺 <html> = Tapa de la caja (apertura)
🧱 Dentro van todas las piezas (head y body)
🔻 </html> = Fondo de la caja (cierre)

¡Nada puede estar fuera de esta caja! (excepto el DOCTYPE)

📝 Reglas de las etiquetas HTML:

  1. Etiqueta de apertura: <html> - Abre el contenedor
  2. Contenido: Todo lo que va dentro (head + body)
  3. Etiqueta de cierre: </html> - Cierra el contenedor

📌 Recuerda: La etiqueta de cierre lleva una barra diagonal /

🌍 El atributo lang - Hablando el idioma correcto

lang="es" le dice al navegador que la página está en español.

🎯 ¿Por qué es importante?

  • 🔊 Accesibilidad: Lectores de pantalla pronuncian correctamente
  • 🔍 SEO: Google entiende el idioma y muestra tu sitio a la audiencia correcta
  • 📝 Corrector: El navegador usa el diccionario correcto
  • 🌐 Traducción: Chrome puede ofrecer traducir la página
  • 📱 Teclado móvil: Muestra caracteres especiales del idioma (ñ, á, é)

📖 Ejemplos reales:

<html lang="es"> → Español de España
<html lang="es-MX"> → Español de México
<html lang="es-AR"> → Español de Argentina
<html lang="en-US"> → Inglés de Estados Unidos

⚠️ Nota: Para la mayoría de casos, lang="es" es suficiente. Solo usa variantes regionales si tu contenido tiene diferencias importantes de idioma.

📋 Tabla de códigos de idioma:

Código Idioma Ejemplo
es 🇪🇸 Español lang="es"
en 🇺🇸 Inglés lang="en"
fr 🇫🇷 Francés lang="fr"
pt 🇧🇷 Portugués lang="pt"

📝 Estructura básica completa

Todo documento HTML tiene esta estructura mínima:

  1. DOCTYPE - Identifica el tipo de documento
  2. html - Contenedor principal
  3. head - Información del documento (nivel 2)
  4. body - Contenido visible (nivel 3)
💻 Editor de Código En Vivo
👁️ Vista Previa
🎮 Actividad 1: Responde las preguntas

Pregunta 1: ¿Qué hace el DOCTYPE?

Pregunta 2: ¿Qué significa lang="es"?

Pregunta 3: ¿Dónde va el DOCTYPE?

🏆 Desafío Básico: ¡Modifica el código!

Usa el editor de arriba para hacer estos cambios:

  • ✏️ Cambia el idioma de "es" a "en" (inglés)
  • ✏️ Modifica el título dentro de <title>
  • ✏️ Cambia el texto del <h1> por tu nombre
  • ✏️ Agrega un nuevo párrafo <p> con tu edad
🌍 Ejemplos del Mundo Real

🔍 Así se ve en sitios web famosos:

🎬 YouTube

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

✅ YouTube usa lang="en" porque su idioma principal es inglés

📰 El País (España)

<!DOCTYPE html>
<html lang="es">
  <head>...</head>
  <body>...</body>
</html>

✅ Un periódico español usa lang="es"

🛒 Amazon

<!DOCTYPE html>
<html lang="es-MX">
  <head>...</head>
  <body>...</body>
</html>

✅ Amazon México usa lang="es-MX" para español mexicano

💡 Puntos clave que aprendimos:

  • 📌 TODOS los sitios web profesionales usan DOCTYPE
  • 📌 El atributo lang coincide con el idioma del contenido
  • 📌 La estructura es SIEMPRE la misma: DOCTYPE → html → head → body
  • 📌 Es simple pero absolutamente necesario
🚀 Desafío Avanzado (Opcional)

🎯 Crea tu propia estructura HTML desde cero

En el editor de arriba, borra todo y escribe el código completo de memoria:

  1. Comienza con el DOCTYPE
  2. Abre la etiqueta html con idioma francés (lang="fr")
  3. Crea el head con un title "Mon Site Web"
  4. Crea el body con:
    • Un h1 que diga "Bonjour!"
    • Dos párrafos con texto en francés
  5. Cierra todas las etiquetas correctamente
💡 Pista: Recuerda que cada etiqueta de apertura necesita su cierre con /
🤔 Preguntas de Reflexión

❓ ¿Qué pasaría si...?

  1. ¿Olvidaste cerrar la etiqueta <html>?
    → El navegador tratará de adivinar dónde termina, pero puede causar errores
  2. ¿Escribiste el DOCTYPE en mayúsculas o minúsculas?
    → ¡No importa! Ambas formas funcionan: <!DOCTYPE html> o <!doctype html>
  3. ¿Pusiste texto directamente en <html> sin head o body?
    → El navegador lo aceptará pero no es correcto, siempre usa head y body

✅ Checklist de verificación

Antes de pasar al siguiente nivel, asegúrate de que entiendes:

  • ☑️ Para qué sirve el DOCTYPE
  • ☑️ Qué hace la etiqueta <html>
  • ☑️ Por qué es importante el atributo lang
  • ☑️ Cómo abrir y cerrar etiquetas correctamente
  • ☑️ La estructura básica mínima de un documento HTML
🤖

¡Hola! Soy CodeBot, tu asistente.

💡 Tip: Prueba cambiar el texto dentro de las etiquetas y haz clic en "Ejecutar" para ver los cambios en la vista previa.

🏆

¡Nivel Completado!

Has aprendido sobre DOCTYPE y la estructura HTML

⭐⭐⭐