Como escolherQual tag HTML usar

Ao usar diferentes tags em um arquivo HTML qualquer, e verificarmos como as tags ficam representadas no navegador, podemos ter a ideia errada que usar uma tag ou outra tem relação com sua aparência por conta do visual padrão que os navegadores exibem.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML</title>
  </head>
  <body>
    <h1>Tag h1</h1>
    <h2>Tag h2</h2>
    <h3>Tag h3</h3>
    <h4>Tag h4</h4>
    <h5>Tag h5</h5>
    <h6>Tag h6</h6>
    <strong>Tag strong</strong>
    <div>Tag div</div>
    <p>
      Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag
      p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p,
      Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p,
    </p>
    <p>
      Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag
      p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p,
      Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p, Tag p,
    </p>
    <a href="#">Tag a</a>
  </body>
</html>

O visual padrão das tags HTML está relacionado ao contexto histórico da época que o HTML foi criado. O objetivo principal do HTML era estruturar documentos e criar links entre eles (hipertexto), e não estilizar o conteúdo. Como o CSS só foi introduzido em 1996, bem depois da criação do HTML em 1991, os navegadores aplicavam estilos padrões para que os elementos HTML fossem exibidos de maneira consistente e compreensível.

Atualmente a escolha das tags não tem mais relação com o visual, mas sim com o propósito da informação que são envolvidas por elas. Por conta disso, centenas de tags foram adicionadas para a versão 5 do HTML, afim de representar melhor os tipos de conteúdo possíveis.

Isso tudo dito, entendemos que podemos usar o CSS para mudar a aparência de qualquer tag para a forma visual que desejamos, e que a escolha das tags tem relação com seu propósito. Então, é muito comum criarmos um site inicialmente usando tags mais genéricas, tags não-semânticas, afim apenas de montar a proposta visual primeiro, e depois nos preocuparmos em trocar algumas dessas tags para tags mais representativas, tags semânticas.

Exemplo de estrutura não-semântica:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exemplo de Tags Não Semânticas</title>
  </head>
  <body>
    <div>
      <div>
        <h1>Notícias do Dia</h1>
      </div>
      <div>
        <p>Publicado em: 29 de agosto de 2024</p>
        <p>Autor: João Silva</p>
      </div>
      <div>
        <p>Endereço: Rua das Flores, 123, Cidade Exemplo</p>
      </div>
      <div>
        <p>
          Este é o conteúdo do artigo que fala sobre o desenvolvimento da web e
          suas tecnologias emergentes.
        </p>
      </div>
    </div>
  </body>
</html>

Exemplo de mesma estrutura com tags semânticas:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exemplo de Tags Semânticas</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Notícias do Dia</h1>
        <time datetime="2024-08-29">Publicado em: 29 de agosto de 2024</time>
        <address>Autor: João Silva</address>
      </header>

      <section>
        <p>Endereço: Rua das Flores, 123, Cidade Exemplo</p>
      </section>

      <section>
        <p>
          Este é o conteúdo do artigo que fala sobre o desenvolvimento da web e
          suas tecnologias emergentes.
        </p>
      </section>
    </article>
  </body>
</html>

Lembre-se que, mesmo que o resultado visual das duas propostas acima possa ser um pouco diferentes, no final, quem vai estilizar a página será o CSS, e nele sempre limpamos o estilo visual padrão.

Está pronto para falar sobre suas metas e objetivos?Estou disponível para responder suas perguntas

Se precisar de mais informações ou quiser agendar sua aula experimental gratuita, entre em contato comigo pelo WhatsApp! Estou aqui para esclarecer suas dúvidas e mostrar como posso ajudar no seu aprendizado.

Ainda precisa daquela motivação extra?Leia algumas das histórias de sucesso dos alunos

Muitos de meus alunos conseguiram posições desejadas em grandes empresas de tecnologia, aumentaram seus salários e avançaram rapidamente em suas carreiras graças à mentoria personalizada e prática oferecida.

Andrey, 19 anos

Finalizou o ensino médio e estava um tanto quanto perdido sobre o que fazer do futuro. Conquistou seu primeiro emprego da vida em uma Software House ganhando 4 mil reais.

Kaique, 27 anos

Estudante de nutrição, trabalhando a vida toda em diferentes empregos para se sustentar. Conquistou seu primeiro emprego na área em uma empresa de escala nacional ganhando 10 mil reais.

Lucas, 22 anos

Iniciou algumas faculdades, mas sem sucesso, estava procurando formas de ganhar a vida como músico. Conquistou seu primeiro emprego da vida em uma Software House ganhando 6 mil reais.