HTML: Quando substituir divs genéricas por tags semânticas?
Tags: html, css, tutorial, webdev
Published: 2023-02-15 16:08:28

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?” 

![Pensando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfwqeqi1kvy54s3zwy3z.jpg)



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. 


![Rindo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84jdm0z1d2vvtwb7ado3.jpg)




---



## 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqwlprftt91fd0wqknpt.png)



---

## 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