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

Este 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
| 5947k xp | 21672 posts
Instructor

Hola Andres, espero que estés bien

¡Qué bueno que estás trabajando en mejorar la semántica y accesibilidad de tu código HTML! La refactorización que has hecho es un gran paso hacia adelante. Aquí te dejo algunas observaciones sobre los cambios que realizaste:

  1. Uso de etiquetas semánticas: Has introducido las etiquetas <header> y <nav>, lo cual es excelente para mejorar la semántica del documento. Estas etiquetas ayudan a los navegadores y tecnologías de asistencia a entender mejor la estructura de la página.

  2. Lista de navegación: Al envolver los enlaces de navegación en una lista <ul>, estás siguiendo una buena práctica que mejora la semántica y la accesibilidad. Las listas indican que los elementos están relacionados, lo cual es perfecto para menús de navegación.

  3. Atributos aria-label: Al añadir estos atributos a los enlaces, estás proporcionando descripciones claras para los lectores de pantalla, lo que mejora la accesibilidad para usuarios con discapacidades visuales.

  4. Etiqueta <a> para el logo: Al añadir un aria-label al enlace del logo, indicas que este lleva a la página principal, lo cual es muy útil para la navegación.

En resumen, tu refactorización ha mejorado significativamente la semántica y accesibilidad del código. Continúa aplicando estas prácticas en otros proyectos para seguir mejorando tus habilidades en desarrollo web.

Espero haber ayudado y buenos estudios!