Entrar Ainda não tem acesso?
2
respostas

[Projeto] Desafio 1 - HTML

Referente ao curso IA generativa no Front-end: trabalhando com acessibilidade, semântica e HTML, no capítulo Técnicas de revisão de código e atividade Desafio: princípios da semântica HTML - Navegação

por Mary Rodrigues
| 29.8k xp | 10 posts
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  href="style.css">
    <title>Desafio 1</title>
</head>
<body>
<div class="cabecalho__container">
    <div class="cabecalho">
        <a href="" class="cabecalho__logo">
            <img class="cabecalho__logo--icone" alt="Icone do logo" src="./img/logoprovisriabranca-1@2x.png" />
            <img class="cabecalho__logo--icone" alt="Logo da Jornada" src="./img/logoprovisriabranca-1@2x.png" />
        </a>
        <div class="cabecalho__navegacao">
            <a class="cabecalho__navegacao--item" href="">Blog</a>
            <a class="cabecalho__navegacao--item" href="">Pacotes de viagem</a>
            <a class="cabecalho__navegacao--item" href="">Contato</a>
        </div>
        <nav class="cabecalho__navegacao" role="navigation" aria-label="Navegação principal">
            <ul class="cabecalho__navegacao--lista">
                <li class="cabecalho__navegacao--item">
                    <a href="">Blog</a>
                </li>
                <li class="cabecalho__navegacao--item">
                    <a href="">Pacotes de viagem</a>
                </li>
                <li class="cabecalho__navegacao--item">
                    <a href="">Contato</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>
2 respostas
por Mary Rodrigues
| 29.8k xp | 10 posts

CSS :

body{
    background-color: aqua;
}


.cabecalho__navegacao--item {
    color: var(--branco);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
por Mike de Sousa
| 684.1k xp | 1022 posts
Alura Scuba Team Suporte Educacional

Olá, Mary, como vai?

Parabéns pela refatoração do código! A sua mudança de <div> para <nav> foi uma excelente escolha, pois melhora a semântica e a acessibilidade do site. O uso do elemento <ul> para organizar os links em uma lista também é uma prática recomendada, pois facilita a navegação para todos os usuários, incluindo aqueles que utilizam leitores de tela.

Além disso, o uso de aria-label para descrever a navegação principal é uma boa adição que ajuda a tornar a experiência mais clara. Continue assim, aplicando os princípios de acessibilidade e semântica em seus projetos!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)