Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafio: Aumentando la semántica

Correción de la tarjeta de ofertas de San Andreas

<article class="ofertas__cards--elemento  ofertas__cards--san-andreas">
    <div class="ofertas__card">
        <div class="ofertas__card--contenido">
            <header class="ofertas__card--destino">
                <p class="ofertas__card--destino-tipo">HOTEL+AÉREO</p>
                <h3 class="ofertas__card--destino-nombre">San Andreas</h3>
            </header>
            <div class="ofertas__card--precio">$ 3000</div>
            <a href="#" class="ofertas__card--boton" aria-label="Ver detalles del paquete a San Andreas">
                <span class="ofertas__card--boton-texto">Ver detalles</span>
            </a>
        </div>
    </div>
</article>
1 respuesta

¡Hola Carlos!

Para aumentar la semántica de tu tarjeta de ofertas de San Andreas, podrías considerar utilizar etiquetas semánticas HTML5 apropiadas para cada sección de tu artículo. Por ejemplo, podrías usar las etiquetas <header>, <main>, <footer> y <section> para estructurar mejor tu contenido. Además, podrías utilizar etiquetas como <h1>, <h2>, <p>, <a>, entre otras, para mejorar la accesibilidad y la comprensión del contenido por parte de los motores de búsqueda y lectores de pantalla.

Aquí te muestro un ejemplo de cómo podrías reestructurar tu código para aumentar la semántica:

<article class="ofertas__cards--elemento  ofertas__cards--san-andreas">
    <header>
        <h1>Oferta de San Andreas</h1>
    </header>
    <section>
        <div class="ofertas__card--contenido">
            <header>
                <p>Tipo de oferta: HOTEL+AÉREO</p>
                <h2>Destino: San Andreas</h2>
            </header>
            <div class="ofertas__card--precio">$ 3000</div>
            <a href="#" aria-label="Ver detalles del paquete a San Andreas">
                <span>Ver detalles</span>
            </a>
        </div>
    </section>
</article>

Al reestructurar el código de esta manera, estás utilizando etiquetas semánticas HTML5 para expresar claramente la estructura y el significado de cada parte de tu tarjeta de ofertas.

Espero que esta sugerencia te sea útil para aumentar la semántica de tu código. ¡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!