📦 Nivel 3 - El Cuerpo del Documento (BODY)

📖 Todo sobre la etiqueta BODY

📦 ¿Qué es el BODY?

El <body> es el cuerpo de tu página web. Aquí va TODO lo que los visitantes pueden VER: textos, imágenes, botones, videos, ¡absolutamente todo!

📍 Ubicación: El BODY siempre va después del <head> y antes de cerrar </html>

<html>

  <head>...</head>

  <body>

    ← TODO el contenido visible va aquí

  </body>

</html>

💡 Analogías para entender el BODY

1. Como un teatro:

🎭 HEAD = Detrás del telón (luces, sonido, producción)
🎬 BODY = El escenario donde actúan (lo que ve la audiencia)

2. Como un restaurante:

👨‍🍳 HEAD = La cocina (preparación invisible)
🍽️ BODY = La mesa con la comida (lo que disfrutas)

3. Como un libro:

🏷️ HEAD = La portada y datos del libro
📖 BODY = Todas las páginas con el contenido

✅ Regla de oro del BODY

Solo puede haber UN body por página HTML. Todo el contenido visible debe ir dentro de él.

❌ Incorrecto: Poner contenido fuera del body
✅ Correcto: Todo dentro de <body>...</body>

🏷️ Etiquetas comunes del BODY:

Títulos y subtítulos

<p>

Párrafos de texto

<img>

Imágenes

<a>

Enlaces/Links

<div>

Contenedores

Listas

Botones

<span>

Texto en línea

📝 Etiquetas de título (h1-h6)

Los títulos van del más grande (h1) al más pequeño (h6):

<h1> - Título principal (¡solo uno por página!)
<h2> - Subtítulos importantes
<h3> - Sub-subtítulos
<h4> a <h6> - Títulos menores

🔗 La etiqueta de enlace

La etiqueta <a href="url"> crea links. El atributo href dice a dónde lleva el enlace.

🏗️ HTML5 Semántico: Estructuras Modernas del BODY

En el pasado, todos usábamos solo <div> para TODO. Pero HTML5 introdujo etiquetas semánticas que tienen SIGNIFICADO especial. Es como usar palabras correctas en lugar de decir "cosa" para todo.

📐 Estructura Semántica Típica:

<body>

  <header>        ← 🎯 Cabecera (logo, menú principal)

    <nav>          ← 🧭 Navegación del sitio

    </nav>

  </header>

  <main>          ← 📄 Contenido principal (¡solo uno!)

    <article>    ← 📰 Artículo independiente

      <section> ← 📦 Sección del artículo

      </section>

    </article>

  </main>

  <aside>         ← 📌 Contenido relacionado (sidebar)

  </aside>

  <footer>        ← 👣 Pie de página (copyright, contacto)

  </footer>

</body>

🎯 Explicación de cada elemento:

🎯 <header>

La cabecera de tu sitio. Normalmente contiene el logo, título principal y menú de navegación. Puede estar en toda la página o dentro de <article> o <section>.

Ejemplo: La barra superior de YouTube con el logo y el buscador.

🧭 <nav>

Contiene los enlaces de navegación principales. Son los menús que llevan a otras secciones del sitio.

Ejemplo: El menú de Wikipedia: "Artículo • Discusión • Leer • Editar"

📄 <main>

¡SUPER IMPORTANTE! El contenido principal de la página. Solo puede haber UNO por página. No incluye elementos que se repiten (como el header, footer o sidebars).

Ejemplo: En una noticia de El País, el <main> contiene el título, la fecha y el texto del artículo.

📰 <article>

Un contenido independiente que tiene sentido por sí solo. Podrías extraerlo y publicarlo en otro lugar. Ideal para posts de blog, noticias, comentarios.

Ejemplo: Cada tweet en Twitter (X) es un <article> porque es un contenido independiente.

📦 <section>

Una sección temática del documento. Agrupa contenido relacionado con un título. Más genérico que <article>.

Ejemplo: En Amazon, cada sección ("Productos relacionados", "Reseñas", "Preguntas") es un <section>.

📌 <aside>

Contenido relacionado pero secundario. Típicamente barras laterales (sidebars) con información adicional.

Ejemplo: En un blog, la barra lateral con "Artículos populares" o "Acerca del autor".

👣 <footer>

Pie de página con información de cierre: copyright, enlaces legales, redes sociales, contacto.

🌍 Análisis: Cómo estructuran sus BODY los sitios famosos

📺 YouTube (youtube.com)

<body>

  <header> ← Logo + Búsqueda + Notificaciones

  <main>

    <section id="videos-recomendados">

      <article class="video-card">...</article>

      <article class="video-card">...</article>

    </section>

  </main>

  <aside> ← Barra lateral con suscripciones

</body>

Observación: Cada tarjeta de video es un <article> porque es independiente. Puedes compartir ese video por separado.

📰 Wikipedia (wikipedia.org)

<body>

  <header>

    <nav> ← Menú: Artículo, Discusión, Leer...

  </header>

  <main>

    <article>

      <h1>Título del artículo</h1>

      <section id="introduccion">...</section>

      <section id="historia">...</section>

      <section id="referencias">...</section>

    </article>

  </main>

  <aside> ← Tabla de contenidos

  <footer> ← Licencia, última edición...

</body>

Observación: Todo el artículo está en un <article>, dividido en <section> para cada tema (historia, características, etc.).

🛒 Amazon (amazon.com)

<body>

  <header>

    <nav> ← Categorías, Ofertas, Carrito...

  </header>

  <main>

    <section id="detalles-producto">

      <h1>Nombre del producto</h1>

      <img> <p> <button>Comprar</button>

    </section>

    <section id="resenas">

      <article class="review">...</article> ← Cada reseña

      <article class="review">...</article>

    </section>

    <section id="productos-relacionados">...</section>

  </main>

  <footer> ← Ayuda, Términos, Privacidad...

</body>

Observación: Cada reseña de usuario es un <article> independiente. Las secciones agrupan diferentes tipos de información.

⚡ Antes vs Ahora: La Revolución Semántica

❌ Forma Antigua (Solo DIV)

<div class="header">

  <div class="nav">...</div>

</div>

<div class="main">

  <div class="article">...</div>

</div>

<div class="footer">...</div>

Problema: Todo es "div". No tiene significado. Los motores de búsqueda y lectores de pantalla no entienden qué es cada cosa.

✅ Forma Moderna (Semántica)

<header>

  <nav>...</nav>

</header>

<main>

  <article>...</article>

</main>

<footer>...</footer>

Ventaja: Cada etiqueta DICE qué es. Google entiende mejor tu contenido. Mejora el SEO y la accesibilidad.

🎁 Beneficios del HTML Semántico:

🔍 Mejor SEO: Google entiende tu contenido y lo posiciona mejor en búsquedas
♿ Accesibilidad: Los lectores de pantalla pueden navegar correctamente
📱 Responsive: Más fácil adaptar a móviles con CSS
🧹 Código más limpio: Otros desarrolladores entienden tu código rápidamente
🔧 Mantenimiento: Es más fácil encontrar y modificar secciones específicas

📋 Reglas de Oro para Estructurar el BODY

1. Solo UN <main> por página

❌ INCORRECTO: Poner varios <main>
✅ CORRECTO: Un solo <main> con el contenido principal

2. Orden lógico de elementos

La estructura típica es: <header> → <nav> → <main> → <aside> → <footer>

3. Usa <article> para contenido independiente

Si puedes extraer ese contenido y publicarlo en otro lugar con sentido completo, usa <article>. Ejemplos: posts de blog, noticias, comentarios, tweets.

4. <section> siempre debe tener un título

Cada <section> debería tener un <h2>, <h3> u otro encabezado que describa su contenido.

5. No anides <main> dentro de otros elementos

El <main> debe ser hijo directo del <body>, no estar dentro de <article> o <section>.

💻 Editor En Vivo - ¡Experimenta!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página con BODY</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        h1 { color: #e74c3c; text-align: center; }
        h2 { color: #3498db; border-bottom: 2px solid #3498db; }
        p { line-height: 1.8; color: #333; }
        a { color: #9b59b6; }
        .destacado {
            background: #fffbcc;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #f39c12;
        }
        ul { background: #ecf0f1; padding: 20px 40px; border-radius: 10px; }
        li { margin: 8px 0; }
        button {
            background: #2ecc71;
            color: white;
            padding: 10px 25px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover { background: #27ae60; }
    </style>
</head>
<body>
    <h1>🎉 Mi Primera Página Completa</h1>
    
    <h2>Sobre Mí</h2>
    <p>¡Hola! Estoy aprendiendo a crear páginas web con HTML. 
       Es muy divertido ver cómo todo aparece en el navegador.</p>
    
    <div class="destacado">
        <strong>💡 Dato interesante:</strong> Esta caja tiene estilos especiales
        usando una clase CSS llamada "destacado".
    </div>
    
    <h2>Mis Pasatiempos</h2>
    <ul>
        <li>🎮 Jugar videojuegos</li>
        <li>📚 Leer libros</li>
        <li>💻 Programar</li>
        <li>🎨 Dibujar</li>
    </ul>
    
    <h2>Enlaces Útiles</h2>
    <p>Visita <a href="https://www.google.com" target="_blank">Google</a> 
       para buscar información.</p>
    
    <button onclick="alert('¡Hiciste clic! 🎉')">¡Haz clic aquí!</button>
</body>
</html>

👁️ Vista Previa - Resultado

El Cuerpo del Documento - BODY

📦 ¿Qué es el BODY?

💡 Analogías para entender el BODY

✅ Regla de oro del BODY

🏷️ Etiquetas comunes del BODY:

📝 Etiquetas de título (h1-h6)

🔗 La etiqueta de enlace

🏗️ HTML5 Semántico: Estructuras Modernas del BODY

📐 Estructura Semántica Típica:

🎯 Explicación de cada elemento:

🌍 Análisis: Cómo estructuran sus BODY los sitios famosos

📺 YouTube (youtube.com)

📰 Wikipedia (wikipedia.org)

🛒 Amazon (amazon.com)

⚡ Antes vs Ahora: La Revolución Semántica

❌ Forma Antigua (Solo DIV)

✅ Forma Moderna (Semántica)

🎁 Beneficios del HTML Semántico:

📋 Reglas de Oro para Estructurar el BODY

1. Solo UN <main> por página

2. Orden lógico de elementos

3. Usa <article> para contenido independiente

4. <section> siempre debe tener un título

5. No anides <main> dentro de otros elementos

1. ¿Cuántas etiquetas <h1> debe tener una página?

2. ¿Qué etiqueta se usa para crear un párrafo?

3. ¿Qué atributo usa <a> para indicar a dónde lleva el enlace?

Desafíos Prácticos - Nivel 3

🏆 Desafío 1: Crea tu Página "Sobre Mí"

🏆 Desafío 2: Estructura Semántica de un Blog

🏆 Desafío 3: Analiza una Página Real

🏆 Desafío Avanzado: Página de Portafolio

Preguntas de Reflexión

1. ¿Por qué es importante usar HTML semántico en lugar de solo <div>?

2. ¿Cuándo usarías <article> y cuándo <section>?

3. ¿Qué pasa si pones dos <main> en una página?

4. ¿Por qué YouTube usa <article> para cada video?

Checklist: ¿Listo para el Nivel 4?

📦 ¿Qué es el BODY?

💡 Analogías para entender el BODY

✅ Regla de oro del BODY

🏷️ Etiquetas comunes del BODY:

📝 Etiquetas de título (h1-h6)

🔗 La etiqueta de enlace

🏗️ HTML5 Semántico: Estructuras Modernas del BODY

📐 Estructura Semántica Típica:

🎯 Explicación de cada elemento:

🌍 Análisis: Cómo estructuran sus BODY los sitios famosos

📺 YouTube (youtube.com)

📰 Wikipedia (wikipedia.org)

🛒 Amazon (amazon.com)

⚡ Antes vs Ahora: La Revolución Semántica

❌ Forma Antigua (Solo DIV)

✅ Forma Moderna (Semántica)

🎁 Beneficios del HTML Semántico:

📋 Reglas de Oro para Estructurar el BODY

1. Solo UN <main> por página

2. Orden lógico de elementos

3. Usa <article> para contenido independiente

4. <section> siempre debe tener un título

5. No anides <main> dentro de otros elementos

1. ¿Cuántas etiquetas <h1> debe tener una página?

2. ¿Qué etiqueta se usa para crear un párrafo?

3. ¿Qué atributo usa <a> para indicar a dónde lleva el enlace?

Desafíos Prácticos - Nivel 3

🏆 Desafío 1: Crea tu Página "Sobre Mí"

🏆 Desafío 2: Estructura Semántica de un Blog

🏆 Desafío 3: Analiza una Página Real

🏆 Desafío Avanzado: Página de Portafolio

Preguntas de Reflexión

1. ¿Por qué es importante usar HTML semántico en lugar de solo <div>?

2. ¿Cuándo usarías <article> y cuándo <section>?

3. ¿Qué pasa si pones dos <main> en una página?

4. ¿Por qué YouTube usa <article> para cada video?

Checklist: ¿Listo para el Nivel 4?

¡Nivel 3 Completado!