Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafío: principios de la semántica HTML - Navegación

Referente al curso IA generativa en Front-End: trabajando con semántica y HTML, en el capítulo Técnicas de revisión de código y actividad Desafío: principios de la semántica HTML - Navegación

por Diego Fernando Olarte Mateus
| 44k xp | 7 posts

He organizado el código del desafío con las siguientes etiquetas:

Código inicial:

 <a>
   <img class="encabezado__logo--icono" alt="" src="./img/logoproviblanca-1@2x.png" />
 </a>
 <div class="encabezado__navegacion">
   <a class="encabezado__navegacion--elemento" href="">Blog</a>
   <a class="encabezado__navegacion--elemento" href="">Paquete de viaje</a>
   <a class="encabezado__navegacion--elemento" href="">Contacto</a>
 </div>

Código corregido:

 <header class="encabezado">
     #Enlace Logo-->
     <a href="/" aria-label="Logo *nombre de la compañía*">
         <img class="encabezado__logo--icono" alt="Logotipo de la compañía" src="./img/logoproviblanca-1@2x.png" />
     </a>
         #Navegación-->
     <nav class="encabezado__navegacion">
         <ul>
             <li><a class="encabezado__navegacion--elemento" href="#blog">Blog</a></li>
             <li><a class="encabezado__navegacion--elemento" href="#paquete-viaje">Paquete de viaje</a></li>
             <li><a class="encabezado__navegacion--elemento" href="#contacto">Contacto</a></li>
         </ul>
     </nav>
</header>

Agradezco sus comentarios de retroalimentación :)

1 respuesta
por Brenda Souza
| 3806.9k xp | 13893 posts
Alura Scuba Team Scuba

¡Hola Diego, espero que estés bien!

Veamos la diferencia entre el código inicial y el código corregido. En el código inicial, se utilizan etiquetas como <a> y <div> de manera genérica, lo que no aporta mucha información sobre la estructura del contenido.

En cambio, en el código corregido, se emplean etiquetas semánticas como <header>, <nav> y <ul>, lo que proporciona una estructura más clara y significativa.

Además, en el código corregido se utiliza el atributo aria-label para proporcionar una etiqueta descriptiva al logo, lo que mejora la accesibilidad para personas con discapacidad visual.

En resumen, al refactorizar el código HTML, se ha logrado una estructura más semántica y accesible, lo que contribuye a una mejor experiencia para los usuarios, incluyendo aquellos que utilizan lectores de pantalla.

Considero su código muy bueno, en este momento no veo puntos de mejora. ¡Continúa con sus estudios y éxito en su carrera!

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Sigue adelante con tus desafíos de IA generativa en Front-End!

Espero haber ayudado y buenos estudios!