4
respostas

Lista de exercícios - Layout e tags semanticas- Projeto portfolio

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon" />
    <link
      href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <title>Portfolio On_line Anderson Chaves</title>
  </head>
  <body>
    <main class="container">
      <div class="descriptions">
        <div class="box-descriptions">
          <h1 id="title">
            Eleve seu negócio digital a outro nível
            <strong id="title-complement"
              >com um Front-end de qualidade!</strong
            >
          </h1>
          <p id="description">
            Olá! Sou Anderson Chaves, desenvolvedor Front-end com especialidades
            em React, HTML e CSS. Ajudo pequenos negócios e designers a
            colocarem em prática boas ideias. Vamos conversar!
          </p>
        </div>
        <div class="container-button">
          <a
            id="btn-linkedin"
            href="https://www.linkedin.com/in/developer-anderson-chaves/"
            target="_blank"
          >
            <img src="./img/linkedin-ico.png" alt="icone-linkedin" />Linkedin
          </a>
          <a
            id="btn-github"
            href="https://github.com/AndersonChavesS"
            target="_blank"
          >
            <img src="./img/gitHub-ico.png" alt="" /> GitHub
          </a>
        </div>
      </div>
      <img id="img-profile" src="./img/image-profile.jpg" alt="imagem perfil" />
    </main>
  </body>
</html>
4 respostas

Boa tarde,

Tornar o HTML semântico é uma boa prática e é essencial.

Aproveito para deixar algumas sugestões

  1. A <div class="descriptions"> poderia ser uma tag <section>

  2. A <div class="box-descriptions"> poderia ser uma tag <header>

  3. A <div class="container-button"> poderia ser uma <ul> de tal forma que:

    <ul>
        <li>
            <a>
                <img />
            </a>
        </li>
        <li>
            <a>
                <img />
            </a>
        </li>
        <!-- ....Demais redes -->
    </ul>
    
  4. A <img id="img-profile"....> poderia ser

<figure>
  <img />
  <figcaption />
</figure>

Para as imagens é importante definir além de alt, as propriedades width e height também. Isso vai de encontro com boas práticas de SEO.

Segue link com a explicação do uso e exemplos de cada um https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics#elementos_sem%C3%A2nticos

Segue link sobre SEO técnico https://www.conversion.com.br/blog/guia-seo-tecnico/

Obrigado.

Se achou interessante, marque como resolvida, por favor.

Felipe D.R

O indicativo te ajudou Anderson?

opa, irmao, top, valeu pela dica!

Imagina,

Se quiser marcar como resolvido para não ficar em aberto

Até mais.