¿Cuál es la diferencia entre las etiquetas HTML < div > y < span > ;?
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Me gustaría pedir algunos ejemplos simples que muestren los usos de < div > y < span > . Los he visto a ambos utilizados para marcar una sección de una página con un id o class , pero estoy interesado en saber si hay momentos en los que se prefiere uno sobre el otro.
Solución
div es un elemento de bloque, span está en línea.
Esto significa que para usarlos semánticamente, los divs deben usarse para ajustar 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 solicitó 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="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Ok, ¿qué está pasando? En la parte superior de mi página, tengo una sección lógica, el encabezado " ;. Como esta es una sección, uso un div (con una identificación apropiada). Dentro de eso, tengo un par de secciones: la barra de usuario y el título real de la página. El título usa la etiqueta apropiada, h1 . La barra de usuario, al ser una sección, está envuelta en un 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 un span alrededor de 2 letras en el título, lo que me permite cambiar su color en mi hoja de estilo.
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. Sección 4.4 de Borrador de trabajo 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: básicamente necesita crear uno de cada elemento usando document.createElement antes de cualquiera de esos elementos están especificados en su fuente. Hay un montón de bibliotecas que se encargarán de esto: una búsqueda rápida en Google apareció html5shiv .
Otros consejos
Solo por razones de integridad, 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 : un
< p >es un párrafo, un< 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 sangramos usando< blockquote >si el contenido era un cita o no. - Entonces, ¿qué haces cuando no tiene sentido para lo que estás tratando de hacer? No hay significado en 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 >, porque de lo contrario, las personas volver a abusar de los elementos que tienen significados.
Ya hay respuestas buenas y detalladas aquí, pero no hay ejemplos visuales, así que aquí hay una ilustración rápida:
< div > es una etiqueta de bloque, mientras que < span > es una etiqueta en línea.
< div > es un elemento de nivel de bloque y < span > es un elemento en línea.
Si desea hacer algo con texto en línea, < span > es el camino a seguir, ya que no introducirá saltos de línea que un < div > lo haría.
Como han señalado otros, hay algunas semánticas implicadas con cada una de ellas, lo más importante es el hecho de que un < 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 diferencia realmente 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 utilizar 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.
¡Además, estas reglas están fijadas en (X) HTML y están no alteradas por la presencia de reglas CSS! ¡Entonces los siguientes códigos son también incorrectos!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
La importancia de " elemento de bloque " está implícito pero nunca se dice explícitamente. Si ignoramos toda la teoría (la teoría es buena), la siguiente es una comparación pragmática. Lo siguiente:
<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 muestra que no solo debería usar un div no en línea, sino que simplemente no producirá el efecto deseado.
Como se menciona en otras respuestas, por defecto div se representará como un elemento de bloque, mientras que span 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, puede hacer que un div actúe como un span y viceversa.
Uno de los estilos útiles para div es inline-block
Ejemplos:
He utilizado inline-block con gran é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 lo hace
Diría que si sabes un poco de español para mirar esto página , donde se explica correctamente.
Sin embargo, una definición rápida sería que div es para dividir secciones y span es para aplicar 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ó span vs div
Historial de span :
El 3 de julio de 1995, Benjamin C. W. Sittler propone un texto genérico contenedor para aplicar estilos a ciertos bloques de texto. La representación es neutral, excepto si se usa junto con un hoja de estilo Hay un debate sobre versus 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 será abusado Se opone al texto que menciona que "cualquier novedad el elemento debe estar en uno antiguo '' y agregando " Si creamos una etiqueta con sin semántica, se puede usar en cualquier lugar sin estar equivocado. Nosotros debe obligar a los autores a etiquetar adecuadamente la semántica de su documento. Nosotros debe obligar a los vendedores del editor a hacer esa elección explícita en su interfaces. "
Del borrador de RFC que introduce span :
Primero, un concepto genérico Tainer es necesario para llevar los atributos LANG y BIDI en casos donde ningún otro elemento es apropiado; el elemento SPAN se presenta para tal fin.
Historial de div :
Los elementos DIV se pueden usar para estructurar documentos HTML como una jerarquía de divisiones.
...
CENTER fue presentado por Netscape antes de agregar soporte para el Elemento HTML 3.0 DIV. Se conserva en HTML 3.2 debido a su despliegue generalizado.
En pocas palabras, ambos elementos surgieron de la necesidad de un contenedor semánticamente más genérico. Span fue propuesto como un reemplazo más genérico para un elemento < text > 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 etiqueta < center > para el 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 etiqueta < p > se usa para identificar un párrafo. Otro ejemplo es la etiqueta < ol > 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 etiqueta < div > 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 etiqueta < span > 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. no son específicos sobre la funcionalidad solo por sus etiquetas .
Solo se pueden personalizar con la ayuda de CSS.
Ahora que viene a su pregunta:
La etiqueta SPAN junto con algunos estilos 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 porciones 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.
< div > es un elemento de bloque.
Como todos los párrafos o cualquier contenido escrito dentro de un div, podemos aplicar css a todos los elementos en el div. Simplemente dando estilo solo en div.
< span > es un elemento en línea.
Lo que se hacen todos los cambios de CSS que se reflejan solo en ese elemento.
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
