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

Respuesta ante el desafió

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 andres felipe barragan nino 88
| 6.9k xp | 7 posts
Estudiante

Es el código antes de aplicar una refactorización: 

<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>

Y este es el código aplicando una refactorización: 

<div class="encabezado__container">
        <header class="encabezado">
            <a href="" class="encabezado__logo" aria-label="Ir a la página principal">
                <img class="encabezado__logo--icono" alt="Logo Jornada" src="./img/logoprovisriablanca-1@2x.png" />
            </a>
            <nav class="encabezado__navegacion">
                <ul>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a el blog">Blog</a></li>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a paquetes de viaje">Paquetes de viaje</a></li>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a contacto">Contacto</a></li>
                </ul>
            </nav>
        </header>
    </div>
1 respuesta
por Brenda Souza
| 6092.4k xp | 22299 posts
Instructor

Hola Andres, espero que estés bien

¡Gracias por compartir tu código! Veo que has hecho un gran trabajo al refactorizar el HTML para mejorar la semántica y la accesibilidad. Aquí hay algunos puntos clave que has abordado correctamente:

  1. Uso de elementos semánticos: Has envuelto la navegación dentro de un elemento <nav>, lo cual es una práctica recomendada para indicar claramente que se trata de un menú de navegación. Además, has colocado el contenido dentro de un <header>, lo que ayuda a estructurar mejor el documento.

  2. Listas para la navegación: Al usar una lista desordenada <ul> con elementos <li>, has mejorado la estructura semántica de los enlaces de navegación. Esto es importante para que los lectores de pantalla y otros dispositivos de asistencia puedan interpretar correctamente la estructura de la página.

  3. Atributos aria-label: Has añadido descripciones con aria-label a los enlaces, lo que mejora la accesibilidad al proporcionar más contexto sobre el destino de cada enlace.

  4. Atributo alt en la imagen: Es importante que el atributo alt de la imagen tenga un texto descriptivo, como has hecho al cambiarlo a "Logo Jornada". Esto es esencial para usuarios que dependen de lectores de pantalla.

En general, tu refactorización sigue las mejores prácticas de HTML semántico y accesibilidad. Si tienes más preguntas o necesitas más aclaraciones, no dudes en preguntar.

Espero haber ayudado y buenos estudios!