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

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.

• divé um elemento de bloco
• spané um elemento embutido .

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?

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 .

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.

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

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

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

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>

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.

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.

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

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.

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.

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.

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.