1
resposta

Desafio 02

Gostaria de uma revisão do meu código e tirar uma dúvida: Existe algum tipo de "boas práticas" pra descrição do alt da img?

Segue:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfólio de Drielle Morodes</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>
            <a href="">Início</a>
          </li>
          <li><a href="">Contato</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h1>
          Eleve seu negócio digital a outro nível
          <strong>com um Front-end de qualidade</strong>!
        </h1>
        <p>
          Sou Drielle Morodes, desenvolvedora Front-end com especialidade em
          React, HTML e CSS e conhecimento em Design. Ajudo pequenos negócios a
          colocarem em prática boas ideias. Vamos conversar?
        </p>
        <a href="https://www.instagram.com/driellemorodes" target="_blank"
          >Instagram</a
        >
        <a href="https://github.com/driellemorodes" target="_blank">Github</a>
      </section>
      <section>
        <img
          src="assets/imagem.png"
          alt="Imagem decorativa de uma tag HTML e código binário"
        />
      </section>
    </main>
    <footer>
      <p>
        Ligue para
        <a href="tel:5531989704360">(31) 98970-4360</a>
      </p>
      <p>
        Mande uma mensagem para
        <a href="mailto:driellemorodes@gmail.com?subject=Vamos conversar!"
          >driellemorodes@gmail.com</a
        >
      </p>
    </footer>
  </body>
</html>
1 resposta

Oi Drielle, tudo bem? 😊

Seu código está muito bom! 👍

A estrutura está bem organizada e as tags semânticas foram utilizadas corretamente.

Sobre sua dúvida sobre as "boas práticas" para o alt da imagem, sim, existem algumas recomendações:

  1. Seja Descritivo: O texto alternativo deve descrever a imagem da forma mais precisa possível.
  2. Se a Imagem é Decorativa: Se a imagem não agrega valor ao conteúdo, o alt deve estar vazio (alt="").
  3. Imagens com Texto: Se a imagem contém texto, o alt deve conter o mesmo texto.
  4. Contexto: Leve em consideração o contexto da imagem na página.
  5. Evite Repetição: Não repita informações que já estão no texto ao redor da imagem.

No seu caso, a descrição "Imagem decorativa de uma tag HTML e código binário" está adequada, já que a imagem parece ter um propósito mais estético.

Continue praticando e explorando as possibilidades do HTML e CSS! 🤗

🎓 Para saber mais:

tux matrixCaso este post o tenha ajudado,marque-o como solucionado ☑️.Bons Estudos! 🤓