Qual é a diferença entre as tags HTML <div> e <span>?

543

Eu gostaria de pedir alguns exemplos simples mostrando os usos de <div>e <span>. Já vi os dois usados ​​para marcar uma seção de uma página com um idou class, mas estou interessado em saber se há momentos em que um é preferido em relação ao outro.

JSchaefer
fonte

Respostas:

582

Isso significa que, para usá-los semântica, divs deve ser usado para quebrar seções de um documento, enquanto que extensões devem ser usadas para quebrar pequenas porções de texto, imagens etc.

Por exemplo:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Observe que é ilegal colocar um elemento no nível do bloco dentro de um elemento embutido, portanto:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... é ilegal.


EDIT: No HTML5, alguns elementos de bloco podem ser colocados dentro de alguns elementos embutidos. Veja a referência MDN aqui para uma lista bastante clara. O acima exposto ainda é ilegal, pois <span>só aceita conteúdo de frases e <div>é conteúdo de fluxo.


Você pediu alguns exemplos concretos, assim como um do meu site de boliche, o BowlSK :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, o que está havendo?

No topo da minha página, tenho uma seção lógica, o "cabeçalho". Como esta é uma seção, eu uso uma div (com um ID apropriado). Dentro disso, tenho algumas seções: a barra do usuário e o título da página real. O título usa a tag apropriada h1,. A barra de usuário, sendo uma seção, está envolvida em um div. Dentro disso, o nome de usuário está envolto em a span, para que eu possa alterar o estilo. Como você pode ver, também envolvi spanduas letras no título - isso permite que eu mude a cor delas na minha folha de estilo.

Observe também que o HTML5 inclui um novo conjunto amplo de elementos que definem estruturas comuns de página, como artigo, seção, navegação etc.

A Seção 4.4 do rascunho de trabalho do HTML 5 os lista e fornece dicas sobre seu uso. O HTML5 ainda é uma especificação funcional, portanto nada é "final" ainda, mas é altamente duvidoso que algum desses elementos esteja indo a lugar algum. Existe um truque de javascript que você precisará usar se quiser estilizar esses elementos em uma versão mais antiga do IE - Você precisa criar um de cada elemento usando document.createElementantes que qualquer um desses elementos seja especificado em sua fonte. Há várias bibliotecas que cuidam disso para você - uma rápida pesquisa no Google apareceu html5shiv .

Chris Marasti-Georg
fonte
5
Chris, há um erro no seu texto: mesmo que você defina o estilo do período como "block", ainda é ilegal envolvê-lo em torno de um elemento no nível do bloco!
9287 Konrad Rudolph
7
Você não pode usar dive spansemanticamente, pois eles não têm nenhum significado associado a eles. divé um elemento genérico sem sentido no nível de bloco, enquanto spané um elemento inline genérico sem sentido.
apnerve 17/10/11
9
@apnerve Eles ainda têm semântica nesse bloco vs. elementos inline significam coisas diferentes para documentar o fluxo, tanto de uma perspectiva de análise quanto de uma perspectiva de "ler esta fonte para descobrir o que está acontecendo".
Chris Marasti-Georg
20
"Semântica (do grego sēmantiká, plural neutro de sēmantikós) [1] [2] é o estudo do significado. Ele se concentra na relação entre significantes, como palavras, frases, sinais e símbolos, e o que eles representam, seus denotados. . " Os significantes "div" e "span" certamente representam alguma coisa. A especificação HTML tem uma boa descrição do que os elementos block e inline representam. w3.org/TR/html401/struct/global.html#h-7.5.3 . O rascunho do HTML5 os coloca em grupos separados - Agrupando conteúdo e Semântica no nível do texto. dev.w3.org/html5/spec/Overview.html
Chris Marasti-Georg
16
Você teve-me em "div é um elemento de bloco, extensão está em linha." :)
Matical
390

Apenas por uma questão de perfeição, convido você a pensar assim:

  • Existem muitos elementos de bloco (quebras de linha antes e depois) definidos em HTML e muitas tags embutidas (sem quebras de linha).
  • Mas, no HTML moderno, todos os elementos devem ter significados : a <p>é um parágrafo, um <li>item de lista, etc., e devemos usar a tag certa para a finalidade correta - não como nos velhos tempos em que recuado usando <blockquote>se o conteúdo foi uma citação ou não.
  • Então, o que você faz quando não está nenhum significado para a coisa que você está tentando fazer? Não há sentido em uma coluna de 400 pixels, existe? Você só quer que sua coluna de texto tenha 400 px de largura, porque isso se adequa ao seu design.
  • Por esse motivo, eles adicionaram mais dois elementos ao HTML: os elementos genéricos ou sem sentido <div>e <span>, porque, caso contrário, as pessoas voltariam a abusar dos elementos que possuem significados.
AmbroseChapel
fonte
20
Esta é uma explicação adequada. Eu me pergunto por que isso não foi aceito como resposta.
apnerve
16
porque sua muito longe para baixo a página
Jason Sebring
12
Só porque uma boa resposta não foi aceita, não significa que você não pode votar. +1 por ser um esclarecimento útil.
24512 CyberFonic
8
É bom saber, mas ele não responde à pergunta original, pois não explica as diferenças entre os elementos div e span.
tehvan
216

Já existem respostas boas e detalhadas aqui, mas nenhum exemplo visual, então aqui está uma rápida ilustração:

diferença entre div e span

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>é uma tag de bloco, enquanto <span>é uma tag embutida.

Brian
fonte
16
Eles têm um efeito diferente no layout, mesmo sem CSS! Esta é a primeira vez que eu vejo isso mostrado!
GreenAsJade
2
Obrigado, eu upvote esta resposta, porque muito rapidamente responde que div tem uma linha seguinte
Script Kitty
4
obrigado por explicar novatos como eu visualmente :-)
Aritra Chatterjee
73

<div>é um elemento no nível do bloco e <span>é um elemento embutido.

Se você quiser fazer algo com algum texto embutido, <span>é o caminho a seguir, pois ele não apresentará quebras de linha <div>.


Como observado por outros, existem algumas semânticas implícitas em cada uma delas, mais significativamente o fato de que a <div>implica uma divisão lógica no documento, semelhante a talvez uma seção de um documento ou algo assim:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>
Jason Bunting
fonte
1
divs podem ser feitos inline (display: inline;) e vice-versa para span, mas esta é a melhor explicação. São tags de wrapper, o span geralmente é usado para frases ou texto de destaque, div para seções.
Ross
3
Estou ciente do fato de que você pode modificar isso com CSS, mas isso introduz outra tecnologia. O HTML pode se sustentar por si próprio e, quando isso ocorre, uma div não está embutida e não se destina a ser assim em sua forma pura.
23880 Jason Bunting
Existe um bom livro explicando como usar adequadamente os elementos html em diferentes situações.
Mk5
@ko - Eu não sei, para ser honesto. Experiência é o melhor professor. Por fim, não há uma resposta "certa", por si só, há simplesmente o que funciona para sua situação e seus propósitos. ;)
Jason Bunting
30

A diferença realmente importante já é mencionada na resposta de Chris. No entanto, as implicações não serão óbvias para todos.

Como um elemento embutido, <span>pode conter apenas outros elementos embutidos. O código a seguir está, portanto, errado:

<span><p>This is a paragraph</p></span>

O código acima não é válido. Para quebrar os elementos no nível do bloco, outro elemento no nível do bloco deve ser usado (como <div>). Por outro lado, <div>só pode ser usado em locais onde os elementos em nível de bloco são legais.

Além disso, essas regras são fixadas em (X) HTML e eles estão não alteradas pela presença de regras CSS! Portanto, os seguintes códigos também estão errados!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Konrad Rudolph
fonte
7
@Faizan Como isso é relevante? Também está errado: nem todo navegador produzirá resultados consistentes para essa marcação. Dependendo do tipo de documento que você usa (e, novamente, do navegador), isso pode nem ser executado e levar a um erro de validação.
Konrad Rudolph
Vejo que alguns navegadores são eficientes o suficiente para executar código inválido. é por isso que funcionou. Você pode me recomendar um bom validador para HTML.?
Faizan
6
"Seja conservador no que faz e liberal no que aceita" pt.wikipedia.org/wiki/Robustness_principle
jldupont
5
Bem-vindo à cantina da sopa. Navegadores que comem HTML inválido é o motivo pelo qual são altamente otimizados, mas analisadores exigentes de HTML não são a norma. Todo navegador que se preze (ou seja, compatível com o 'HTML' existente) usa uma biblioteca (interna) do tipo 'sopa' de algum tipo para torná-lo palatável.
Ack
8

O significado de "elemento de bloco" está implícito, mas nunca é declarado explicitamente. Se ignorarmos toda a teoria (teoria é boa), a seguir é apresentada uma comparação pragmática. Os seguintes:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

produz:

This paragraph has a span.

This paragraph

has
a div.

Isso mostra que não apenas um div não deve ser usado em linha, como também não produz o efeito desejado.

user34660
fonte
6

Conforme mencionado em outras respostas, por padrão div, será renderizado como um elemento de bloco, enquanto spanserá renderizado inline dentro de seu contexto. Mas nenhum deles tem nenhum valor semântico; eles existem para permitir que você aplique estilo e uma identidade a qualquer bit de conteúdo. Usando estilos, você pode divagir como um spane vice-versa.

Um dos estilos úteis para divéinline-block

Exemplos:

  1. http://dustwell.com/div-span-inline-block.html

  2. Exibição CSS: inline vs inline-block

Eu me acostumei inline-blocka um grande sucesso em projetos de jogos na web.

Eric R. Rath
fonte
3
Se eles não tivessem valor semântico, haveria apenas um deles. Um deles é destinado a ser uma divisão de nível de bloco - o outro, uma extensão de linha
Chris Marasti-Georg
3

Div é um elemento de bloco e span é um elemento em linha e sua largura depende do conteúdo de si mesmo, onde div não

Jagannath Samanta
fonte
3

Eu diria que se você conhece um pouco de espanhol, consulte esta página , onde é explicado corretamente.

No entanto, uma definição rápida seria divdividir seções e spanaplicar algum tipo de estilo a um elemento dentro de outro elemento de bloco como div.

Pablo Herrero
fonte
Não é necessário saber espanhol, a versão em inglês é <span> - HTML | MDN .
user34660
3

Só queria adicionar algum contexto histórico de como surgiu spanvsdiv

História de span:

Em 3 de julho de 1995, Benjamin CW Sittler propõe uma tag de contêiner de texto genérico para aplicar estilos a determinados blocos de texto. A renderização é neutra, exceto se usada em conjunto com uma folha de estilo. Há um debate em torno de versus sobre legibilidade, significado. Bert Bos está mencionando a natureza da extensibilidade do elemento por meio do atributo class (com valores como cidade, pessoa, data etc.). Paul Prescod está preocupado que ambos os elementos sejam abusados. Ele se opõe ao texto mencionando que "qualquer novo elemento deve estar em um antigo" e acrescentando "Se criarmos uma tag sem semântica, ela poderá ser usada em qualquer lugar sem nunca estar errada.Devemos forçar os autores a marcar corretamente a semântica de seus documentos. Precisamos forçar os fornecedores de editores a tornarem essa escolha explícita em suas interfaces ".

- Fonte (w3 wiki)

A partir do rascunho da RFC que introduz span:

Primeiro, é necessário um recipiente genérico para transportar os atributos LANG e BIDI nos casos em que nenhum outro elemento é apropriado; o elemento SPAN é introduzido para esse fim.

- Fonte (Rascunho da IETF)

História de div:

Os elementos DIV podem ser usados ​​para estruturar documentos HTML como uma hierarquia de divisões.

...

O CENTER foi introduzido pelo Netscape antes de adicionar suporte ao elemento HTML 3.0 DIV. Ele é mantido no HTML 3.2 por conta de sua ampla implantação.

Especificação do HTML 3.2

Em poucas palavras, ambos os elementos surgiram da necessidade de um contêiner semanticamente mais genérico. O Span foi proposto como uma substituição mais genérica para um <text>elemento para estilizar o texto. O Div foi proposto como uma maneira genérica de dividir as páginas e teve o benefício adicional de substituir a <center>tag pelo conteúdo de alinhamento centralizado. Div sempre foi um elemento de bloco devido ao seu histórico como divisor de página. Span sempre foi um elemento embutido porque seu objetivo original era o estilo de texto e hoje div e span chegaram a ser elementos genéricos com propriedades de exibição padrão de bloco e embutido respectivamente.

Alex W
fonte
2

No HTML, existem tags que adicionam estrutura ou semântica ao conteúdo. Por exemplo, a <p>tag é usada para identificar um parágrafo. Outro exemplo é a <ol>tag para uma lista ordenada.

Quando não há uma tag adequada disponível em HTML, como mostrado acima, as tags <div>e <span>geralmente são utilizadas.

A <div>tag é usada para identificar uma seção / divisão em nível de bloco de um documento que possui uma quebra de linha antes e depois dela.

Exemplos de onde as tags div podem ser usadas são cabeçalhos, rodapés, navegações etc. No entanto, no HTML 5, essas tags já foram fornecidas.

A <span>tag é usada para identificar uma seção / divisão embutida de um documento.

Por exemplo, uma tag span pode ser usada para adicionar imagens gráficas a um elemento.

Robert Rocha
fonte
2

Lembre-se, basicamente, e eles mesmos também não desempenham nenhuma função. Eles não são específicos sobre a funcionalidade apenas por suas tags .

Eles só podem ser personalizados com a ajuda do CSS.

Agora isso vem à sua pergunta:

A tag SPAN, juntamente com algum estilo, será útil em manter uma linha, digamos em um parágrafo, no html. Esse é o tipo de nível de linha ou instrução em HTML.

Exemplo:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

A funcionalidade da tag DIV, como foi dito, só pode ser visível com o estilo, pode conter grandes pedaços de código HTML.

DIV é nível de bloco

Exemplo:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Ambos têm seu tempo e caso em que devem ser usados, com base em suas necessidades.

A esperança é clara com a resposta. Obrigado.

yatheendra kv
fonte
A resposta ideal que eu tenho procurado.
precisa saber é o seguinte