Este quiz sobre HTML Semántico y CSS consiste en observar muy bien el diseño de una parte del menú de navegación de YouTube y posteriormente analizar cuál código de HTML Semántico y de CSS sería el más indicado para lograr replicar el diseño observado.
A continuación encontrarás:
- Una imagen con la pregunta inicial del quiz.
- 3 opciones de respuesta: cada una con su correspondiente código HTML y CSS.
- La respuesta correcta con su explicación.
Pregunta de HTML Semántico y CSS
En la siguiente imagen encontrarás una sección del menú de navegación de YouTube. Y luego las opciones a, b y c con el código en imágenes y Codepen. Tu desafío en este quiz es elegir la opción que mejor resuelva el objetivo antes de ver la respuesta correcta.
💡 Pista: recuerda el HTML Semántico.
Opción A
Opción B
Opción C
Respuesta correcta
A nivel de HTML Semántico, si usas el elemento ul cuando necesitas una lista no ordenada (o también el ol cuando necesites una lista ordenada), los lectores de pantalla:
- Pueden anunciar este menú como una “lista con elementos”.
- Pueden anunciar la cantidad de elementos en la lista, por ejemplo, “lista con 4 elementos”.
- Pueden anunciar la viñeta o el número de cada elemento.
- Pueden anunciar cuándo ingresa o sale de una lista.
- Pueden saltar de una lista a otra en una página según los accesos directos usados por los usuarios.
Otro aspecto a considerar es la estructura de padres e hijos. Para ello hacer un esquema mental o un dibujito puede ayudar mucho en esta construcción, ya que de ello depende que nuestro código CSS funcione a la perfección, que no nos enredemos tanto y también que alinear elementos sea más sencillo.
¡Cuéntanos en los comentarios cómo te fue en este quiz! ¡Nos vemos en el próximo!
#NuncaParesDeAprender 💚
Curso de Frontend Developer
