Lección 5: Fundamentos de HTML: Enfoque en las pruebas

Explicación del concepto

Probar HTML significa verificar más que si la página aparece en pantalla. También querrás verificar la estructura, el orden del texto, las etiquetas, los puntos de referencia y los enlaces. En esta lección, practicarás el uso de una lista de verificación simple para inspeccionar el marcado y detectar problemas a tiempo. El enfoque está en desarrollar el hábito de verificar el HTML con intención, en lugar de asumir que es correcto solo porque se renderiza.

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 que cada sección tenga un encabezado claro o una etiqueta accesible.
• Asegúrate de que los enlaces usen texto significativo en lugar de frases vagas como “haz clic aquí”.
• Inspecciona el orden de lectura y confirma que sigue teniendo sentido sin CSS.
• Anota un problema que encontraste y cómo lo corregiste.

Guía paso a paso

1. Crea el marcado de ejemplo y cárgalo en el navegador.
2. Revisa el HTML con una lista de verificación corta: encabezados, enlaces, listas, etiquetas y anidamiento.
3. Identifica un caso normal y un caso límite, como texto faltante o una sección sin etiquetar.
4. Corrige el problema y vuelve a ejecutar las mismas verificaciones.
5. Escribe una frase que describa por qué las pruebas de HTML son importantes incluso en páginas simples.

Ejercicios prácticos

• Crea un bloque de contacto y prueba si la estructura es clara sin estilos.
• Revisa un menú de navegación corto y mejora cualquier texto de enlace débil.
• Crea una lista de verificación para probar una página de artículo básica y úsala en tu propio marcado.

Retos de código

• Prueba dos versiones de la misma página y explica cuál es más accesible.
• Encuentra tres problemas estructurales en una página de práctica y corrígelos sin cambiar demasiado el contenido visible.

Mini tareas de práctica

• Confirma que cada encabezado introduce el contenido debajo de él.
• Verifica que las listas estén marcadas como listas, no solo como líneas de texto.
• Corrige un pequeño problema de HTML y anota el resultado.