Quando estamos fazendo uma página Html sempre (sempre mesmo), bate uma dúvida, nem que seja por 2 segundos: “Usar uma div ou uma tag aqui?”

A gente sabe que o HTML é a base de qualquer página na web e entre os elementos mais usados estão as famosas <div> . Elas servem para agrupar diferentes partes do código. Só que nem só de <div> sobrevive uma página HTML. Por isso, é importante perceber em qual momento usar divs (genéricas) ou tags (semânticas).

Uma recomendação: Sempre utilize as tags semânticas, mas agora, se ficar em dúvida entre usar uma tag ou uma div e não tiver tempo para dar uma pesquisada, é bom optar pela div para não adicionar uma tag que não deveria estar ali (repassando isso que ouvi de um professor certa vez).

Mas antes, abaixo tem uma listinha de tags HTML semânticas que tem em praticamente todas as páginas.

• <main>: É usada para definir o conteúdo principal da página. É importante não abusar do main e utilizar apenas um por página. O main é a tag que deve “guardar” todo o conteúdo principal.
• <section> é usada para agrupar conteúdo relacionado e com um propósito comum. Por exemplo, você pode ter várias seções em uma página de um e-commerce, cada uma contendo produtos de uma categoria diferente.
• <h1>, <h2>, <h3>, etc.: São usadas para definir títulos e subtítulos em seu conteúdo. Lembre-se que deve existir apenas um <h1> em cada página já que ele representa o título principal e sobre o que ela se trata.
• <img>: É utilizado para inserir imagens no contúdo. É importante definir o atributo alt para descrever a imagem.
• <article>: É usada para agrupar conteúdo autônomo, como uma postagem de blog ou notícia. Cada <article> deve ter seu próprio cabeçalho e conteúdo relacionado.
• <aside>: É usada para conteúdo relacionado que está fora do fluxo principal de conteúdo. Por exemplo, uma barra lateral de navegação ou uma seção de anúncios.
• <footer>: É usada para o rodapé de uma página ou seção. Normalmente tem informações como informações de contato, direitos autorais e links para redes sociais.

Agora sim! Nessa publicação vou comentar um pouco sobre momentos que devemos podemos trocar as <div> por outras tags HTML.

Não utilize SEMPRE a tag button

As vezes quando recebemos um design do Figma, por exemplo, ele já vem com todo o estilo de um botão, o que acaba nos levando a criar direto o elemento como um <button>. Porém, esse não é sempre o caso. Quando o "botão" é na verdade um link para outra página, devemos usar a tag <a> e então no style css estilizar para que fique como um botão.

Ficaria como no exemplo abaixo. Adicionamos apenas a classe "botao" à tag <a> e estilizamos no css.

<a href="#" class="botao">Clique aqui</a>

Mas então, quando usar o button? É recomendado para alguma ação, por exemplo:

• Enviar formulário
• Deletar
• Fechar
• Publicar
• Editar
• E outros...

Listas li ou divs?

É muito comum ficar em dúvida nessa, mas uma prática boa é pensar: Isso pode ser visto como uma lista? Se sim, utilize <li>.

Aqui vai um exemplo de listas:

• lista de comentários,
• lista de imagens,
• lista de feedbacks,
• lista de planos para compra…

Se a gente começar a ver elas como realmente são (listas) fica mais fácil. Porque olha, se pensarmos que temos uma área de feedbacks, vamos encher de divs com a imagem do usuário e o texto do comentário, mas se enxergamos ela como realmente é, uma área com uma LISTA DE FEEDBACKS, usaremos o li.

Usar a tag img ou background-image?

Quando se trata de imagens, temos basicamente duas opções:

• 1. utilizar <img>
• 2. estilizar um elemento com a propriedade CSS background-image.

A tag <img> deve ser utilizada quando a imagem faz parte do conteúdo, quando ela é importante para aquele contexto e sem ela, o texto não faria muito sentido. Por exemplo, uma foto de um artista se estivermos falando sobre ele.

Já a propriedade background-image deve ser utilizada quando a imagem é usada apenas para fins visuais, como em um fundo de seção, um ícone que tem apenas “valor visual” e etc.

Exemplo de uso de background-image:

Títulos e subtítulos

Os títulos e subtítulos são essenciais para estruturar o conteúdo da página e facilitar a leitura do usuário. No entanto, é importante lembrar que deve existir APENAS um <h1> na página e que os outros títulos devem ser utilizados como subtítulos, em ordem hierárquica. Por exemplo:

<h1>Título da página</h1>

<section>
    <h2>Seção 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

Na hora de criar um menu: troque o div por nav

Uma substituição comum é, ao invés de utilizar uma div para criar o seu menu, utilize um <nav>.

Além disso, ao invés de apenas usar o <a> para os links do menu, utilize uma lista (como já mencionado). A utilização de uma lista <li> para os links do menu deixa o código mais organizado e legível, além de possibilitar uma estilização fácil e consistente. E o mais importante: utilizar o <li> melhora a acessibilidade porque permite que os leitores de tela anunciem a lista de links e forneçam uma navegação mais clara.

Tag header para o cabeçalho

Outra substituição comum é a troca de uma <div> de cabeçalho por <header>.

O <header> é usado para representar a seção de cabeçalho, dentro dela podem ficar elementos como títulos, logos, menus, entre outros elementos que compõem a seção de cabeçalho.

Ao utilizar tags semânticas no HTML, além de deixar o código mais limpo, organizado e fácil de entender para outros desenvolvedores, eles ficam legível e mais “bem lidos” pelos “robôs” dos mecanismos de busca. E simmm, a maior: acessibilidade! E essas prática podem ajudar a melhorar a acessibilidade para pessoas com deficiências visuais, por exemplo, já que os leitores de tela conseguem entender melhor a estrutura do conteúdo.

Gostaria de contribuir ou melhorar alguma coisa que foi citada? Deixe nos comentários <3