Boa parte dessa resposta é baseada em boas práticas, UX, acessibilidade e minha própria opinião.
O que é a <div>
The div element has no special meaning at all. It represents its children. It can be used with the class
, lang
, and title attributes
to mark up semantics common to a group of consecutive elements.
Tradução: "O elemento div
não tem nenhum significado especial. Representa seus filhos. Ele pode ser usado com os atributos class
, lang
e title
para marcar a semântica comum a um grupo de elementos consecutivos."
Fonte da documentação oficial W3C https://www.w3.org/TR/2011/WD-html5-author-20110809/the-div-element.html
div = divisor serve para dividir o layout em blocos. E logicamente pode receber estilos CSS e receber comportamentos dos mais diversos.
Mas por que usam tanto a <div>
?
Acredito que vemos tantas div no HTML por que muitas vezes elas são usadas de forma errada, por exemplo para construir tabelas, menus, e até formulários... Não vou generalizar, mas se você ver no HTML um elemento que por default é do tipo block, e está com o display
setado paradisplay:inline
, provavelmente ele está sendo usado de forma errada, estruturalmente falando.
Acredito que nos próximos anos você vai ver cada vez menos div
, sabe por quê? Porque agora o HTML 5 é semântico. Agora podemos dividir nosso layout por <sections>
, <articles>
, <footers>
, <headers>
, <nav>
etc. Com o display:flex
não precisamos mais usar display:inline-block
nem float:left
nas div
para alinhar uma ao lado da outra e ainda ter que fazer a "gambiarra" do clearfix pra não deixar o layout quebrar.
Layout semântico sem precisar de div
:

Outro motivo para vermos tantas div
é por causa desses frameworks
que entregam componentes prontos. Você vai colocando um componente dentro do outro, e com isso cria um monte de divs
desnecessárias... Qualquer site em wordpress por exemplo costuma ter um número imenso de divs
por serem na maioria um template cheio de componentes e plugins.
Exemplo div na construção de componente Bootstrap:

Resumindo, <table>
é para fazer tabela, <form>
é para fazer formulário, se quer uma div
ao lado da outra não use float
, float
não é para isso. E use as tags semântica do HTML5 <nav>
para menus, <footers>
para rodapé etc. E se precisar use uma div ou outra dentro desses elementos para dividir os elementos em blocos se preciso.
div
s e dizer "não entendo para que exatamente serve ou o porque colocam div dentro de outra div" ao meu ver entra um pouco em conflito com o que vc diz aqui "Div é umas das tags que mais vejo no HTML e que é usado do início ao fim no body"... ao mesmo tempo que parece não ter nenhum conhecimento de HTML, parece que tem sim conhecimento, mencionando "tags", "body" com propriedade... :D... inclusive escreveu "HTML" em caixa alta... 🤔