en este caso específico, el uso de
y es semánticamente incorrecto y, de hecho, la versión anterior (con div y) era más adecuada.
La Explicación: ¿Por qué no usar
aquí?El propósito de una etiqueta es agrupar contenido (como una imagen, un diagrama o un bloque de código) que es autocontenido y podría, en teoría, moverse a otra parte del documento (como un apéndice) sin que se pierda el sentido.
El
es el título o leyenda de ese contenido.El problema: Tu texto ("Somos una agencia...") no es una leyenda de la imagen. No está describiendo al "Hombre en una canoa". Ese texto es el contenido principal de marketing de tu banner. La imagen es el fondo o el acompañamiento visual.
Al usar
, le estás diciendo incorrectamente a los lectores de pantalla que ese párrafo es la descripción de la foto.La estructura semántica ideal para el SEO y la accesibilidad sería separarlos en un encabezado (<h2>) y un párrafo (<p>).
<section class="banner">
<div class="banner__wrapper">
<img class="banner__img"
alt="Hombre en una canoa"
src="./img/maldivas@2x.png" />
<div class="banner__descripcion">
<h2 class="banner__titulo">
Somos una agencia apasionada por crear viajes inolvidables.
</h2>
<p class="banner__texto">
Desde el destino hasta la selección de actividades, nos
encargamos de todos los detalles para que disfrutes al máximo
cada momento de tu jornada.
</p>
</div>
</div>
y se ajusta el css para que la mejora sea completa con el siguiente codigo
/* --- DESPUÉS (AJUSTADO) --- */
/* 1. El contenedor (el
) mantiene los estilos de layout y fondo /
.banner__descripcion {
position: absolute; / (Ejemplo) */
bottom: 2rem;
left: 2rem;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.5);
max-width: 600px;) recibe sus propios estilos /
.banner__descripcion {
position: absolute; / (Ejemplo) */
bottom: 2rem;
left: 2rem;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.5);
max-width: 600px;
/* (¡Quitamos los estilos de texto de aquí!) */
/* color: white; <-- MOVIDO */
/* font-size: 1.1rem; <-- MOVIDO */
/* ...etc */
}
/* 2. El TÍTULO (el
) recibe sus propios estilos /
.banner__titulo {
color: white;
font-size: 1.8rem; / Lo hacemos más grande, ¡es un título! /
font-weight: 700; / Más grueso (bold) */
line-height: 1.3;
/* Reseteo: quitamos márgenes por defecto del h2 */
margin: 0 0 0.5rem 0; /* (Un pequeño margen solo abajo) */
/* Reseteo: quitamos márgenes por defecto del h2 */
margin: 0 0 0.5rem 0; /* (Un pequeño margen solo abajo) */
}
/* 3. El PÁRRAFO (el
) recibe los estilos del texto principal /
.banner__texto {
color: white;
font-size: 1.1rem; / El tamaño que tenías antes /
font-weight: 400; / Peso normal */
line-height: 1.6;
/* Reseteo: quitamos márgenes por defecto del p */
margin: 0;
}
