¿Cuál es la diferencia entre los elementos HTML div y span?
Me gustaría solicitar algunos ejemplos sencillos que muestren los usos de <div>y <span>. He visto que ambos se usan para marcar una sección de una página con un ido class, pero me interesa saber si hay ocasiones en las que se prefiere uno sobre el otro.
dives un elemento de bloquespanes 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 spans 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 a 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 con frases y <div>es contenido fluido.
Usted pidió algunos ejemplos concretos, y también hay 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>Bien, ¿qué está pasando?
En la parte superior de mi página tengo una sección lógica, el "encabezado". Como se trata de una sección, utilizo un div (con una identificación adecuada). Dentro de eso, tengo un par de secciones: la barra de usuario y el título de la página real. El título utiliza la etiqueta apropiada,h1. La barra de usuario, al ser una sección, está envuelta en un archivo div. Dentro de eso, el nombre de usuario está envuelto en un span, para que pueda cambiar el estilo. Como puede ver, también he incluido spanalrededor de 2 letras en el título; esto me permite cambiar su color en mi hoja de estilo.
También tenga en cuenta que HTML5 incluye un nuevo y amplio conjunto 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 brinda sugerencias sobre su uso. HTML5 todavía es 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 deberá usar si desea diseñar estos elementos en alguna versión anterior de IE. Debe crear uno de cada elemento document.createElementantes de que cualquiera de esos elementos se especifique 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 .
Para completar, los invito a pensar en ello de esta manera:
- 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 el HTML moderno se supone que todos los elementos tienen significados : a
<p>es un párrafo, an<li>es un elemento de lista, etc., y se supone que debemos usar la etiqueta correcta para el propósito correcto, no como en los viejos tiempos cuando sangría indicando<blockquote>si el contenido era una cita o no. - Entonces, ¿qué haces cuando lo que intentas hacer no tiene sentido? No tiene significado una columna de 400px de ancho, ¿verdad? Solo desea que su columna de texto tenga 400 píxeles de ancho porque se adapta a su diseño.
- Por eso añadieron dos elementos más al HTML: los genéricos, o elementos sin sentido ,
<div>y<span>, porque de lo contrario la gente volvería a abusar de los elementos que sí tienen significado.
Ya hay respuestas buenas y detalladas aquí, 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.
