Explicación del concepto
La refactorización en HTML consiste principalmente en mejorar la estructura sin cambiar el significado de la página. En esta lección, comenzarás con un bloque de marcado simple y lo transformarás en HTML más limpio y semántico. El objetivo es identificar elementos genéricos que puedan ser reemplazados por etiquetas mejores, agrupar el contenido relacionado de forma más clara y hacer que el documento sea más fácil de leer, mantener y estilizar posteriormente.
Dónde poner el código
- Comienza con variables y entradas. Coloca el marcado en secciones semánticas con una estructura clara.
- Añade la lógica de procesamiento en la sección intermedia.
- Finaliza con la salida y una validación rápida.
Referencia de comandos
- Reemplaza al menos dos contenedores no semánticos con etiquetas que describan mejor el contenido.
- Ejecuta la página y confirma que la salida del navegador aún coincide con la intención original.
- Explica una elección de refactorización en lenguaje sencillo, como por qué `<article>` o `<header>` encaja mejor.
- Revisa el marcado final y verifica si otro desarrollador podría entenderlo rápidamente.
Guía paso a paso
- Lee el marcado inicial e identifica las partes que se sienten demasiado genéricas o repetitivas.
- Reescribe la estructura con elementos semánticos como `header`, `main`, `article`, `section` o `footer` donde sea apropiado.
- Abre la página y confirma que el contenido visible no se rompió después de la refactorización.
- Compara las versiones antigua y nueva y anota cuál es más fácil de escanear.
- Escribe una frase sobre cómo el HTML semántico mejora la mantenibilidad.
Ejercicios prácticos
- Refactoriza una tarjeta de evento simple construida con elementos `div` en una estructura semántica más significativa.
- Toma un bloque corto de descripción de producto y reorganízalo usando elementos de encabezado, párrafo, lista y pie de página.
- Construye una segunda versión de la misma página con una estructura más limpia pero el mismo contenido visible.
Retos de código
- Crea dos soluciones semánticas válidas para el mismo contenido y compara cuál se lee más claramente.
- Refactoriza una sección de página desordenada manteniendo el marcado accesible y fácil de estilizar posteriormente.
Mini tareas de práctica
- Reemplaza un contenedor genérico con una etiqueta semántica.
- Verifica que los encabezados sigan un orden lógico.
- Resume en una línea qué cambió en la refactorización.
Error común
Skipping input validation or mixing logic/output in one unstructured block.
Mini reto de la vida real
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.