{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-elements", "title": "HTML Block & Inline", "description": "Comprende la diferencia fundamental entre elementos contenedores (bloque) y elementos en línea", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "block-vs-inline-intro", "title": "Elementos de bloque vs en línea", "description": "Los elementos HTML se dividen en dos categorías principales:

Elementos de bloque (contenedores) comienzan en una nueva línea y ocupan todo el ancho. Ejemplos: <div>, <p>, <h1>, <section>

Elementos en línea fluyen dentro del texto y solo ocupan el ancho necesario. Ejemplos: <span>, <a>, <strong>, <em>", "task": "Envuelve la palabra importante con etiquetas <strong> para ponerla en negrita. Observa cómo el párrafo (bloque) ocupa todo el ancho mientras que strong (en línea) fluye con el texto.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }", "sandboxCSS": "", "initialCode": "

Este es un párrafo con una palabra importante.

", "solution": "

Este es un párrafo con una palabra importante.

", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "p", "message": "Añade un elemento de párrafo <p>" }, { "type": "parent_child", "value": { "parent": "p", "child": "strong" }, "message": "Envuelve la palabra importante con etiquetas <strong>" } ] }, { "id": "semantic-containers", "title": "Etiquetas semánticas", "description": "El HTML moderno usa contenedores semánticos que describen su contenido:

<header> - Encabezado de página o sección
<nav> - Enlaces de navegación
<main> - Área de contenido principal
<section> - Agrupación temática
<article> - Contenido independiente
<footer> - Pie de página o sección", "task": "Crea una estructura básica de página:
1. Añade un <header> con un <h1> que contenga el texto Mi Sitio Web
2. Añade un elemento <main> con un párrafo que diga ¡Bienvenido a mi sitio!
3. Añade un <footer> con un párrafo que diga Copyright 2026", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n

Mi Sitio Web

\n
\n
\n

¡Bienvenido a mi sitio!

\n
\n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "header", "message": "Añade un elemento <header>" }, { "type": "element_exists", "value": "main", "message": "Añade un elemento <main>" }, { "type": "element_exists", "value": "footer", "message": "Añade un elemento <footer>" }, { "type": "parent_child", "value": { "parent": "header", "child": "h1" }, "message": "Añade un encabezado <h1> dentro de tu header" } ] } ] }