Desarrollo Frontend · FRO-101

HTML5 semántico y accesible

Estructura, formularios y semántica pensadas desde el principio para lectores de pantalla y buscadores.

Bajo demanda Iniciación 7 módulos · 36 clases

Formato asíncrono Alumnado, Docentes FP, Desarrollo, Empresa / PYME HTML

DESARROLLO FP ACCESIBILIDAD

Lo que aprenderás

Estructurar una página con header, nav, main, article, section y footer según su significado real.
Escoger el nivel de encabezado correcto para construir un esquema navegable con lector de pantalla.
Construir formularios con label asociada, agrupación por fieldset y tipos de input adecuados.
Insertar imágenes con texto alternativo útil y distinguir cuándo la imagen es decorativa.
Marcar tablas de datos con caption, th y scope para que se lean correctamente.
Validar el marcado con el validador del W3C y con un lector de pantalla en el navegador.

Contenido del curso

7 módulos · 36 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Primeros pasos 5 clases

Qué es HTML y qué no le corresponde
Entorno de trabajo y vista previa en el navegador
Anatomía de un documento HTML5
Etiquetas, atributos y anidamiento correcto
Herramientas de desarrollo del navegador

Módulo 2 · Texto con significado 5 clases

Encabezados y el esquema del documento
Párrafos, listas y citas
Énfasis, importancia y elementos en línea
Enlaces internos, externos y anclas
Errores frecuentes de marcado y sus consecuencias

Módulo 3 · Estructura de la página 5 clases

header, nav, main, footer y su papel
article y section: cuándo usa cada uno
aside y contenido complementario
Regiones y puntos de referencia para lectores de pantalla
Montar el esqueleto de un sitio de varias páginas

Módulo 4 · Imágenes y contenido incrustado 5 clases

Texto alternativo útil frente a texto alternativo inútil
Imágenes decorativas y alt vacío
figure y figcaption
Vídeo y audio con controles y subtítulos
Iframes y cuándo evitarlos

Módulo 5 · Formularios 6 clases

form, action y método de envío
label asociada: la regla que más se incumple
Tipos de input y teclado en móvil
select, textarea y grupos de opciones
fieldset, legend y agrupación lógica
Validación nativa y mensajes de error accesibles

Módulo 6 · Tablas y datos 5 clases

Cuándo una tabla es la etiqueta correcta
caption, thead, tbody y tfoot
th con scope para filas y columnas
Tablas complejas y cómo simplificarlas
Tablas que no deben usarse para maquetar

Módulo 7 · Proyecto de cierre 5 clases

Enunciado: sitio informativo de varias páginas
Marcado semántico completo
Formulario de contacto accesible
Validación con el validador del W3C
Recorrido con lector de pantalla y correcciones

Requisitos

No se necesita experiencia previa en programación ni en diseño web.
Basta con un navegador y un editor de texto; el entorno de prácticas funciona en línea.
Interés por publicar páginas que cualquier persona pueda usar.

Descripción

Muchas páginas se construyen apilando divs hasta que el resultado se parece al diseño. Funciona a la vista y falla en todo lo demás: un lector de pantalla no encuentra los encabezados, el buscador no distingue el contenido principal del menú y un formulario sin etiquetas asociadas resulta imposible de rellenar con teclado. Corregirlo después cuesta mucho más que hacerlo bien al escribir.

El curso enseña HTML partiendo del significado de cada elemento. Se construye una página completa por etapas, comprobando en cada una el resultado con el validador del W3C y con un lector de pantalla real. Los formularios ocupan un bloque propio porque son la parte donde más se falla, y las tablas de datos se marcan como se deben leer, no como se ven.

Al terminar se sabe publicar páginas correctas, accesibles y comprensibles para los buscadores sin depender de arreglos posteriores. Es el punto de entrada natural al curso de CSS moderno, y la base que exige después cualquier trabajo de accesibilidad WCAG o de desarrollo con marcos de trabajo como React o Vue.

¿Para quién es este curso?

Alumnado de ciclos de informática o diseño que empieza a construir páginas web.
Profesorado de FP que prepara prácticas de marcado con criterios de accesibilidad verificables.
Personal de comunicación en PYME que publica contenido y quiere que sea localizable y usable.