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

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

Referente al curso IA generativa en Front-End: trabajando con semántica y HTML

por Daniel Andres Torres Rodriguez
| 37.3k xp | 43 posts

HTML Tengo la duda de sí es una buena practica tener mi

dentro de una etiqueta 
<div class="encabezado__container">
        <header class="encabezado">
            <a href="" class="encabezado__logo" aria-label="Ir a la pagína de inicio">
                <img class="encabezado__logo--icono" alt="Logo encabezado" src="./img/logobranco-1@2x.png" >
            </a>
            <nav class="encabezado__navegacion">
                <ul>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a 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>

CSS

.encabezado__navegacion--lista {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.encabezado__navegacion--elemento {
    color: var(--blanco);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
1 respuesta
por Evelyn Reis
| 2529.4k xp | 9133 posts
Instructor Instructora

¡Hola Daniel!

Es una buena práctica utilizar la etiqueta <header> directamente en lugar de anidarla dentro de un <div>. La etiqueta <header> tiene un significado semántico específico, ya que representa la introducción o un grupo de contenido introductorio en un documento o una sección de una página web. Por lo tanto, se recomienda utilizarla directamente en el cuerpo del documento.

Aquí tienes un ejemplo de cómo podrías estructurar tu HTML sin anidar el <header> dentro de un <div>:

<header class="encabezado">
    <a href="" class="encabezado__logo" aria-label="Ir a la página de inicio">
        <img class="encabezado__logo--icono" alt="Logo encabezado" src="./img/logobranco-1@2x.png" >
    </a>
    <nav class="encabezado__navegacion">
        <ul class="encabezado__navegacion--lista">
            <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a 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>

Al hacerlo de esta manera, estás siguiendo las mejores prácticas de semántica HTML y facilitando la comprensión del contenido para los navegadores y otros dispositivos de asistencia.

Espero que esta información te sea útil. ¡Si tienes alguna otra pregunta, no dudes en preguntar!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!