Explicación del concepto
Esta lección se centra en escribir HTML que se mantenga fiable cuando usuarios reales, tecnologías de asistencia y futuros compañeros de equipo interactúen con él. Practicarás la elección de elementos que comuniquen significado claramente, eviten estructuras frágiles y soporten la accesibilidad por defecto. La idea principal es que el HTML fiable no es solo HTML válido; es un marcado que sigue teniendo sentido cuando los estilos fallan, el contenido cambia o alguien navega con un teclado o un lector de pantalla.
Dónde poner el código
- Comienza con variables y entradas. Coloca el marcado en secciones semánticas con 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
- Usa etiquetas, encabezados y texto de botón que se mantengan claros sin estilos visuales.
- Verifica que cada elemento interactivo tenga un propósito obvio y un nombre accesible.
- Revisa la estructura del documento como contenido simple, no como un prototipo visual.
- Busca opciones de marcado frágiles, como elementos genéricos clicables o relaciones faltantes.
Guía paso a paso
- Escribe el marcado base para una pequeña sección interactiva, como un formulario o un panel de configuración.
- Confirma que las etiquetas estén conectadas correctamente a los campos de entrada y controles.
- Lee la página de arriba a abajo y verifica si la estructura sigue teniendo sentido sin CSS.
- Reemplaza cualquier texto vago como "Haz clic aquí" con una redacción más específica.
- Finaliza comprobando que el marcado siga siendo comprensible, navegable y fácil de extender.
Ejercicios prácticos
- Crea un formulario de contacto que use etiquetas, campos obligatorios y texto de botón claro.
- Convierte un bloque visualmente descriptivo en un marcado que siga teniendo sentido al leerse en voz alta.
- Crea una pequeña área de configuración usando encabezados, controles agrupados y texto descriptivo.
Retos de código
- Identifica tres opciones de marcado que mejoren la fiabilidad incluso si el diseño cambia más tarde.
- Reescribe un ejemplo débil que dependa demasiado del estilo en HTML semántico robusto.
Mini tareas de práctica
- Añade un atributo `required` donde mejore la claridad.
- Cambia una etiqueta genérica por una más específica.
- Escribe una comprobación rápida para ver si la página sigue funcionando sin CSS.
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.