Lección 7: Fundamentos de HTML: Perspectiva de rendimiento

Explicación del concepto

Esta lección muestra cómo la estructura HTML puede afectar el rendimiento de una página mucho antes de que escribas cualquier CSS o JavaScript. Practicarás la construcción de marcado conciso y significativo, reduciendo envoltorios innecesarios y organizando el contenido para que un navegador pueda analizarlo rápidamente y un humano pueda mantenerlo fácilmente. El objetivo es pensar en el rendimiento como un hábito de marcado: estructura más simple, jerarquía más clara y menos elementos desperdiciados.

Dónde poner el código

1. • Comienza con variables y entradas. Coloca el marcado en secciones semánticas con una estructura clara.
2. • Agrega la lógica de procesamiento en la sección central.
3. • Finaliza con la salida y una validación rápida.

Referencia de comandos

• • Verifica si cada elemento tiene un propósito de contenido real antes de mantenerlo.
• • Prefiere contenedores semánticos como `main`, `article`, `section` y elementos de lista sobre envoltorios genéricos.
• • Compara una versión verbosa y una versión concisa de la misma estructura de página.
• • Revisa el marcado en busca de legibilidad, profundidad de anidamiento y repetición innecesaria.

Guía paso a paso

1. Construye el marcado inicial exactamente una vez y confirma que el contenido se lee correctamente en el navegador.
2. Elimina al menos un envoltorio innecesario o un contenedor repetido.
3. Reemplaza cualquier elemento genérico con uno semántico más significativo donde sea apropiado.
4. Compara las estructuras original y revisada y anota cuál es más fácil de escanear.
5. Finaliza con una breve lista de verificación: jerarquía clara, anidamiento mínimo y flujo de contenido legible.

Ejercicios prácticos

• Reconstruye el ejemplo como una página de anuncio corta con contenido diferente pero con la misma mentalidad de "rendimiento primero".
• Toma un bloque de marcado anidado y desordenado y simplifícalo sin perder significado.
• Crea una pequeña sección de página que use encabezados, párrafos y listas sin `divs` innecesarios.

Retos de código

• Recrea la misma idea de diseño usando menos elementos que en tu primer borrador.
• Explica qué elecciones estructurales mejoran la mantenibilidad, así como la eficiencia de renderizado.

Mini tareas de práctica

• Cuenta cuántos elementos usa tu versión final.
• Escribe una oración explicando por qué el HTML semántico también puede ayudar al rendimiento.
• Elimina un envoltorio adicional y recarga la página.