¡Hola Andres, espero que estés bien!
Gracias por compartir tu código. Vamos a mejorar la semántica del banner que has creado. La semántica en HTML es importante porque ayuda a que los navegadores y los motores de búsqueda comprendan mejor el contenido de tu página.
En tu código, ya estás utilizando algunas etiquetas semánticas, como <section>
y <figure>
, lo cual es genial. Sin embargo, podemos hacer algunos ajustes para mejorar aún más la semántica:
Encabezados: Si el texto dentro de <figcaption>
es un título o una introducción importante, podrías considerar usar un encabezado (como <h2>
o <h3>
) para darle más peso semántico.
Uso de <main>
: Si esta sección es una parte central del contenido de la página, podrías considerar envolverla en una etiqueta <main>
para indicar que es el contenido principal.
Aquí tienes una sugerencia de cómo podrías mejorar la semántica de tu código:
<main>
<section class="banner">
<div class="banner__wrapper">
<figure class="banner__figure">
<img class="banner__img" alt="Hombre en una canoa" src="./img/maldivas@2x.png" />
<figcaption class="banner__descripcion">
<h2>Somos una agencia apasionada por crear viajes inolvidables.</h2>
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.
</figcaption>
</figure>
</div>
</section>
</main>
Espero que estas sugerencias te sean útiles para mejorar la semántica de tu sitio.
¡Espero haber ayudado y buenos estudios!