Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 9 · Semana 3

Auditoría semántica de una web real

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se lee la estructura real de una página con DevTools, y qué elementos nativos usarías en lugar de programarlos.
  2. 2. Haz: Audita una web en producción y extrae su mapa semántico.
  3. 3. Comprueba: Aplica a tus páginas lo que hayas encontrado que merezca la pena.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué diferencia práctica hay entre section y article?
  2. ¿Cuándo sigue siendo correcto usar un div?
  3. Sustituye <div onclick="...">Guardar</div> por el elemento nativo adecuado.

Ver la estructura, no el diseño

Hasta ahora has escrito HTML. Hoy vas a leerlo, que es lo que harás la mayor parte de tu vida profesional: casi siempre trabajarás sobre código que escribió otro.

Abre DevTools con F12. Tres pestañas interesan:

Pestaña Para qué
Elements / Inspector Ver el HTML real que ha construido el navegador, ya reparado
Accessibility / Accesibilidad Ver el árbol de accesibilidad: zonas y nombres que percibe un lector de pantalla
Console Ver los errores que el navegador sí ha decidido contar

Lo que ves en Elements no es lo que escribió el autor

El panel muestra el documento después de que el navegador lo haya reparado y de que el JavaScript lo haya modificado. Para ver lo que se escribió de verdad, usa Ctrl + U. Comparar los dos es, muchas veces, la auditoría entera.

Extra · elementos que ya existen y solemos reprogramar

Al auditar webs verás componentes hechos con JavaScript que HTML ya resuelve solo:

Un desplegable, sin una línea de código:

<details>
    <summary>¿Cuánto tarda el envío?</summary>
    <p>Los pedidos se envían en 24–48 horas.</p>
</details>

Una fecha legible por personas y por máquinas:

<time datetime="2026-09-15">15 de septiembre de 2026</time>

Progreso y medida, que no significan lo mismo: <progress value="70" max="100"> representa una tarea que avanza; <meter min="0" max="100" value="85"> representa un valor dentro de un rango conocido, como un nivel de batería.

Y datos de contacto: <address>.

La regla general: antes de construir algo complejo, pregúntate si HTML ya sabe hacerlo. Usar la plataforma suele dar soluciones más simples, más accesibles, más compatibles y más fáciles de mantener.

Tarea 8 · Audita una web real

Elige una web de noticias o una tienda conocida y respóndela con DevTools delante:

  1. ¿Tiene un único <main>? ¿Cuántos <nav>?
  2. ¿Cómo está marcado el menú principal: lista de enlaces o enlaces sueltos?
  3. Recorre la jerarquía de encabezados. ¿Hay un solo h1? ¿Se salta algún nivel?
  4. Elige tres imágenes distintas: ¿tienen alt? ¿Es descriptivo, funcional o vacío? ¿Está bien elegido?
  5. Busca algo que parezca un botón. ¿Es un <button> o un div disfrazado? Compruébalo intentando llegar con Tab.
Aspecto Qué has encontrado ¿Correcto? Qué harías tú
main y nav
Menú principal
Jerarquía de encabezados
Textos alternativos
Botones
Estoy atascado · no encuentro los landmarks

En vez de bucear por el árbol, usa el buscador del panel Elements (Ctrl + F dentro de DevTools) y busca directamente main, nav, header o footer. Te dirá cuántas coincidencias hay, que es justo el dato de las dos primeras preguntas.

Microrevisión · diez minutos, sin nota

Intercambia únicamente tu index.html con un compañero. No lo corrijas por él: encuentra un problema semántico concreto y descríbelo con este formato:

  1. Qué veo: señala el elemento y el contenido afectado.
  2. Por qué importa: explica qué significado o navegación pierde.
  3. Qué probaría: propone una alternativa sin reescribir el documento.

El autor decide si acepta la observación. También puede rechazarla, pero debe justificar su decisión con el significado del contenido.

Ahora tú · La misma auditoría, sobre lo tuyo

Pásale a tus cuatro páginas exactamente la misma auditoría que acabas de hacerle a una web profesional, y corrige lo que encuentres.

No es casualidad que la auditoría vaya antes que el proyecto final: es más fácil ver un fallo en el código de otro, y ese ojo entrenado es el que después aplicas al tuyo.

Checkpoint · fin de la sesión 9 y de la semana 3

  • Sabes abrir el árbol de accesibilidad y leer las zonas de una página.
  • Has auditado una web real con hallazgos concretos, no impresiones.
  • Tus cuatro páginas usan elementos estructurales, no div genéricos.
  • Todas tus imágenes tienen alt, lleno o vacío según su función.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Por qué el panel Elements puede no coincidir con el código fuente?
  2. ¿Cómo compruebas en diez segundos si un botón es un botón de verdad?
  3. Nombra un elemento HTML que evite escribir JavaScript.
Ver respuestas

1 · Porque muestra el documento ya reparado por el navegador y modificado por el JavaScript. El fuente original se ve con Ctrl + U.

2 · Intentando llegar hasta él con Tab. Si no recibe el foco, no es un botón.

3 · <details> con <summary> da un desplegable sin código. Vale también <progress>, <meter> o la validación nativa de formularios que veremos la semana que viene.

Microprueba semanal 3 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Reestructura <div class="menu">...</div> <div class="noticia">...</div> con elementos semánticos.
  2. Justifica dos de tus decisiones: no basta con nombrar las etiquetas.
  3. Escribe el alt de una imagen decorativa y el de un gráfico que aporta un dato.