¿Cuál es la diferencia entre las etiquetas HTML <div> y <span>?

Me gustaría pedir algunos ejemplos simples que muestran los usos de <div>y <span>. Los he visto a ambos marcar una sección de una página con un ido class, pero estoy interesado en saber si hay momentos en que uno es preferido sobre el otro.

• dives un elemento de bloque
• spanEs un elemento en línea .

Esto significa que para usarlos semánticamente, los divs deben usarse para envolver secciones de un documento, mientras que los tramos deben usarse para envolver pequeñas porciones de texto, imágenes, etc.

Por ejemplo:

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

Tenga en cuenta que es ilegal colocar un elemento de nivel de bloque dentro de un elemento en línea, por lo tanto:

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

...es ilegal.

EDITAR: a partir de HTML5, algunos elementos de bloque se pueden colocar dentro de algunos elementos en línea. Consulte la referencia de MDN aquí para obtener una lista bastante clara. Lo anterior sigue siendo ilegal, ya que <span>solo acepta contenido de fraseo y <div>es contenido de flujo.

Usted pidió algunos ejemplos concretos, por lo que es uno tomado de mi sitio web de bolos, 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, que esta pasando?

También tenga en cuenta que HTML5 incluye un nuevo conjunto amplio de elementos que definen estructuras de página comunes, como artículo, sección, navegación, etc.

La Sección 4.4 del borrador de trabajo de HTML 5 los enumera y da pistas sobre su uso. HTML5 sigue siendo una especificación funcional, por lo que nada es "final" todavía, pero es muy dudoso que alguno de estos elementos vaya a alguna parte. Hay un truco de JavaScript que necesitará usar si desea diseñar estos elementos en alguna versión anterior de IE: debe crear uno de cada elemento document.createElementantes de especificar cualquiera de esos elementos en su fuente. Hay un montón de bibliotecas que se encargarán de esto por usted: una búsqueda rápida en Google mostró html5shiv .

Solo por completo, los invito a pensarlo así:

• Hay muchos elementos de bloque (saltos de línea antes y después) definidos en HTML, y muchas etiquetas en línea (sin saltos de línea).
• Pero en HTML moderno se supone que todos los elementos tienen significados : a <p>es un párrafo, an <li>es un elemento de la lista, etc., y se supone que debemos usar la etiqueta correcta para el propósito correcto, no como en los viejos tiempos cuando sangrado usando <blockquote>si el contenido era una cita o no.
• Entonces, ¿qué haces cuando no tiene sentido lo que estás tratando de hacer? No tiene sentido una columna de 400 px de ancho, ¿verdad? Solo desea que su columna de texto tenga 400px de ancho porque se adapta a su diseño.
• Por esta razón, agregaron dos elementos más a HTML: los elementos genéricos o sin sentido <div>y <span>, de lo contrario, las personas volverían a abusar de los elementos que tienen significados.

Aquí ya hay buenas respuestas detalladas, pero no hay ejemplos visuales, así que aquí hay una ilustración rápida:

<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>es una etiqueta de bloque, mientras que <span>es una etiqueta en línea.

<div>es un elemento a nivel de bloque y <span>es un elemento en línea.

Si desea hacer algo con un texto en línea, este <span>es el camino a seguir, ya que no introducirá saltos de línea como lo <div>haría.

Como han señalado otros, hay una semántica implícita con cada uno de estos, más significativamente el hecho de que a <div>implica una división lógica en el documento, similar a quizás una sección de un documento o algo, a la:

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

La verdadera diferencia importante ya se menciona en la respuesta de Chris. Sin embargo, las implicaciones no serán obvias para todos.

Como elemento en línea, <span>solo puede contener otros elementos en línea. Por lo tanto, el siguiente código es incorrecto:

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

El código anterior no es válido. Para ajustar elementos a nivel de bloque, se debe usar otro elemento a nivel de bloque (como <div>). Por otro lado, <div>solo se puede usar en lugares donde los elementos a nivel de bloque son legales.

Por otra parte, estas reglas se fijan en (X) HTML y que están no alterados por la presencia de reglas CSS! ¡Entonces los siguientes códigos también están mal!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

La importancia del "elemento de bloque" está implícita pero nunca se declara explícitamente. Si ignoramos toda la teoría (la teoría es buena), la siguiente es una comparación pragmática. El seguimiento:

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

produce:

This paragraph has a span.

This paragraph

has
a div.

Eso demuestra que no sólo debe un div no ser usado en línea, simplemente no producirán el efecto deseado.

Como se menciona en otras respuestas, por defecto divse representará como un elemento de bloque, mientras spanque se representará en línea dentro de su contexto. Pero tampoco tiene ningún valor semántico; existen para permitirle aplicar un estilo y una identidad a cualquier parte del contenido. Usando estilos, puedes hacer un divacto como spanay viceversa.

Uno de los estilos útiles para divesinline-block

Ejemplos:

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

2. Pantalla CSS: bloque en línea vs bloque en línea

He tenido inline-blockmucho éxito en proyectos web de juegos.

Div es un elemento de bloque y span es un elemento en línea y su ancho depende del contenido de sí mismo donde div no

Yo diría que si sabes un poco de español para mirar esta página , donde se explica correctamente.

Sin embargo, una definición rápida sería divdividir secciones y spanaplicar algún tipo de estilo a un elemento dentro de otro elemento de bloque como div.

Solo quería agregar un contexto histórico a cómo surgió spanvsdiv

Historia de span:

El 3 de julio de 1995, Benjamin CW Sittler propone una etiqueta de contenedor de texto genérico para aplicar estilos a ciertos bloques de texto. El renderizado es neutral, excepto si se usa junto con una hoja de estilo. Existe un debate en torno a versus sobre legibilidad, significado. Bert Bos menciona la naturaleza de extensibilidad del elemento a través del atributo de clase (con valores como ciudad, persona, fecha, etc.). Paul Prescod está preocupado de que ambos elementos sean abusados. Se opone al texto que menciona que "cualquier elemento nuevo debe estar en uno antiguo" y agrega "Si creamos una etiqueta sin semántica, puede usarse en cualquier lugar sin estar equivocado.Debemos obligar a los autores a etiquetar adecuadamente la semántica de su documento. Debemos obligar a los vendedores de editores a hacer esa elección explícita en sus interfaces ".

- Fuente (w3 wiki)

Del borrador de RFC que introduce span:

Primero, se necesita un contenedor genérico para transportar los atributos LANG y BIDI en los casos en que ningún otro elemento sea apropiado; Se introduce el elemento SPAN para tal fin.

- Fuente (borrador de IETF)

Historia de div:

Los elementos DIV se pueden usar para estructurar documentos HTML como una jerarquía de divisiones.

...

Netscape introdujo CENTER antes de que agregaran soporte para el elemento HTML 3.0 DIV. Se conserva en HTML 3.2 debido a su implementación generalizada.

Especificación HTML 3.2

En pocas palabras, ambos elementos surgieron de la necesidad de un contenedor más semánticamente genérico. Span fue propuesto como un reemplazo más genérico para un <text>elemento para dar estilo al texto. Div se propuso como una forma genérica de dividir páginas y tuvo el beneficio adicional de reemplazar la <center>etiqueta por contenido de alineación central. Div siempre ha sido un elemento de bloque debido a su historial como divisor de página. Span siempre ha sido un elemento en línea porque su propósito original era el estilo de texto y hoy div y span han llegado a ser elementos genéricos con propiedades predeterminadas de bloque y visualización en línea respectivamente.

En HTML hay etiquetas que agregan estructura o semántica al contenido. Por ejemplo, la <p>etiqueta se usa para identificar un párrafo. Otro ejemplo es la <ol>etiqueta para una lista ordenada.

Cuando no hay una etiqueta adecuada disponible en HTML como se muestra arriba, generalmente se recurre a las etiquetas <div>y <span>.

La <div>etiqueta se usa para identificar una sección / división de nivel de bloque de un documento que tiene un salto de línea tanto antes como después.

Ejemplos de dónde se pueden usar etiquetas div son encabezados, pies de página, navegaciones, etc. Sin embargo, en HTML 5 estas etiquetas ya se han proporcionado.

La <span>etiqueta se usa para identificar una sección / división en línea de un documento.

Por ejemplo, se puede usar una etiqueta span para agregar pictografías en línea a un elemento.

Recuerde, básicamente, y ellos mismos tampoco realizan ninguna función. Son no específica acerca de la funcionalidad con solo sus etiquetas .

Solo se pueden personalizar con la ayuda de CSS.

Ahora que viene a tu pregunta:

La etiqueta SPAN junto con un poco de estilo será útil para mantenerla dentro de una línea, digamos en un párrafo, en el html. Este es un tipo de nivel de línea o nivel de instrucción en HTML.

Ejemplo:

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

La funcionalidad de la etiqueta DIV, como se dijo anteriormente, solo se puede ver respaldada con estilo, puede tener grandes fragmentos de código HTML.

DIV es nivel de bloque

Ejemplo:

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

Ambos tienen su tiempo y su caso cuando deben usarse, según su requisito.

Espero estar claro con la respuesta. Gracias.