Quando eu devo utilizar o elemento DIV e quando devo utilizer o elemento SPAN no HTML ?

Question

Pelo que eu entendi, eles servem para a mesma coisa. Quando eu devo utilizar um e quando eu devo utilizar o outro ?

---

Att. Guilherme Costa

Answer 1

Olá Guilherme,

Os elementos <div> e <span> tem a mesma funcionalidade, que é para agrupar elementos, porém eles possuem características diferentes que vai depender da pretenção de sua página, pois o <span> não dá significado a sua página porque ele é um elemento neutro, então por exemplo se sua página tiver que ser lida por um leitor de tela eletrônico, com a tag <span> voce não poderá dizer claramento que aquele agrupamento é "alguma coisa na página".

A tag <div> com os atributos de "id" voce poderá inserir uma semântica em sua página HTML, e essa é uma das principais mudanças no HTML 5 que faz nossas páginas serem compreendidas por humanos e máquinas.

Espero ter ajudado.

Veja esse link: http://pt-br.html.net/tutorials/css/lesson8.php acho que aqui voce pode sanar sua duvida.

Abraços

Alex Kondera
MVP Internet Explorer

---

Kondera

Answer 2

Na verdade as tags DIV e SPAN não servem para a mesma coisa.

O DIV serve para dividir o layout. Ele é um elemento em nível de bloco, que basicamente significa que ele gera uma quebra de linha no fluxo da apresentação. É utilizado normalmente para definir as sessões da página, como cabeçalho, conteúdo, rodapé, barra latera, etc...

O SPAN é usado para agrupar elementos inline. Ele não quebra linha na apresentação, o que significa que ele pode ser utilizado no meio de textos. Ao contrário das tags STRONG e EM, a SPAN não possui nenhum estilo automático e nem função semântica para leitores de tela.

Já que foi citado pelo Alex o HTML5, as mudanças que ele traz é a substituição do uso de DIVs para as sessões mais básicas de um layout, como o cabeçalho, rodapé e outros. Neste caso a W3C notou que quase todo site possuia DIVs com IDs ou classes do tipo "header", "footer", "nav", "article" e outros e decidiu criar tags para cada um desses elementos, tornando o HTML mais semântico.