HTML y CSS
Test de HTML semántico
Practica HTML semántico con 50 casos sobre estructura, regiones, enlaces, imágenes, tablas y elección de elementos según su función.
Cada intento mezcla preguntas y respuestas para evitar patrones memorizables.
Cargando preguntas…
Qué vas a practicar
Este banco plantea decisiones de marcado dentro de situaciones de desarrollo y revisión. Trabaja estructura del documento, regiones, encabezados, listas, enlaces, imágenes, citas, tablas, controles nativos y atributos globales sin confundir semántica con apariencia.
- Distinguir metadatos, contenido visible y regiones principales.
- Elegir article, section, nav, main, aside, header y footer según su propósito.
- Marcar listas, enlaces, imágenes, citas, código y fechas con semántica adecuada.
- Construir tablas simples y usar atributos globales sin crear estructuras artificiales.
Preguntas de ejemplo
Los ejemplos siguientes pertenecen al banco interactivo y conservan exactamente la misma respuesta y explicación.
1¿Qué declaración debe aparecer al inicio de un documento HTML moderno para activar el modo estándar?
Respuesta: <!doctype html>
Explicación: La declaración <!doctype html> informa al navegador de que debe interpretar el documento con el modo estándar de HTML.
2Una biografía lateral está relacionada solo de forma indirecta con el contenido principal. ¿Qué elemento encaja mejor?
Respuesta: <aside>
Explicación: <aside> marca contenido relacionado de forma indirecta, como barras laterales, glosarios o información complementaria.
3Para ejecutar una acción en la página sin navegar a otra URL, ¿qué elemento nativo suele ser apropiado?
Respuesta: <button>
Explicación: <button> comunica una acción interactiva y ofrece comportamiento de teclado nativo; los enlaces se reservan para navegación.
4Para expresar énfasis semántico capaz de cambiar el sentido de una frase, ¿qué elemento corresponde?
Respuesta: <em>
Explicación: <em> señala énfasis; <i> indica una voz o convención distinta sin implicar necesariamente énfasis. La diferencia resulta perceptible para herramientas que interpretan la estructura aunque el estilo visual sea idéntico.
5Para identificar una celda como encabezado de tabla, ¿qué elemento debes usar?
Respuesta: <th>
Explicación: <th> define una celda de encabezado; puede relacionarse con datos mediante scope o headers. La estructura de tabla debe conservar la relación entre encabezados y datos, no limitarse a reproducir filas visuales.
6¿Qué formato corresponde a un atributo de datos personalizado válido?
Respuesta: data-user-id="42"
Explicación: Los atributos personalizados deben comenzar por data- y pueden leerse mediante dataset en JavaScript. La sintaxis válida permite que CSS y JavaScript accedan al dato de forma predecible mediante los mecanismos estándar.
Cómo aprovechar la práctica
Sitúa cada fragmento dentro del caso planteado: identifica la función que debe comunicar, compara las alternativas y descarta las etiquetas que solo imitan la apariencia. Después revisa la explicación para entender por qué la opción elegida mejora estructura y mantenimiento.
Fuentes y alcance
Las preguntas se han revisado con el HTML Living Standard de WHATWG y la referencia de elementos HTML de MDN. Revisión editorial: 19 de agosto de 2026.