significado - span html para que sirve
¿Cuál es la diferencia entre las etiquetas HTML<div> y<span>? (12)
Como se mencionó en otras respuestas, el div predeterminado se representará como un elemento de bloque, mientras que el span se representará en línea dentro de su contexto. Pero ninguno tiene valor semántico; existen para permitirle aplicar un estilo y una identidad a cualquier parte del contenido. Usando estilos, puedes 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 en inline-block para un gran éxito, en proyectos web de juegos.
Me gustaría pedir algunos ejemplos simples que muestran los usos de <div> y <span> . Los he visto a los dos para marcar una sección de una página con un id o class , pero me interesa saber si hay momentos en que una es preferida sobre la otra.
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
El significado de "elemento de bloque" está implícito pero nunca se establece explícitamente. Si ignoramos toda la teoría (la teoría es buena), lo 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 solo un div no debe usarse en línea, simplemente no produce el efecto deseado.
En HTML hay etiquetas que agregan estructura o semántica al contenido. Por ejemplo, la etiqueta <p> se utiliza 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 un nivel de bloque de un documento que tiene un salto de línea antes y después.
Ejemplos de dónde se pueden usar las 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 utiliza 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.
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. El siguiente código es por lo tanto incorrecto:
<span><p>This is a paragraph</p></span>
El código anterior no es válido. Para envolver elementos de nivel de bloque, se debe usar otro elemento de nivel de bloque (como <div> ). Por otro lado, <div> solo se puede usar en lugares donde los elementos de nivel de bloque son legales.
Además, estas reglas se corrigen en (X) HTML y no se modifican por la presencia de reglas CSS. Así que los siguientes códigos también son incorrectos!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Solo por el bien de la integridad, te invito a que lo pienses así:
- Hay muchos elementos de bloque (linebreaks antes y después) definidos en HTML, y muchas etiquetas en línea (sin linebreaks).
- Pero en el 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 una cita o no. - Entonces, ¿qué haces cuando no hay ningún significado para lo que estás tratando de hacer? No hay significado para una columna de 400px de ancho, ¿verdad? Solo desea que la columna de texto tenga un ancho de 400 px 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ían a abusar de los elementos que sí tienen significados.
Solo quería agregar un contexto histórico a la forma en que llegó a haber span vs div
Historia del 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. La representación es neutral, excepto si se usa junto con una hoja de estilo. Hay un debate alrededor de sobre legibilidad, significado. Bert Bos está mencionando la naturaleza de extensibilidad del elemento a través del atributo de clase (con valores como ciudad, persona, fecha, etc.). A Paul Prescod le preocupa que ambos elementos sean abusados. Se opone a que el texto mencione que "cualquier elemento nuevo debería estar en uno antiguo" y que agrega "Si creamos una etiqueta sin semántica, se puede usar en cualquier lugar sin estar equivocados. Debemos obligar a los autores a etiquetar correctamente la semántica de su documento. Debemos obligar a los proveedores de editor a hacer que esa elección sea explícita en sus interfaces ".
A partir del borrador de RFC que introduce span :
Primero, se necesita un contenedor genérico para llevar los atributos LANG y BIDI en los casos en que ningún otro elemento sea apropiado; El elemento SPAN se introduce para ese propósito.
Historia de div :
Los elementos DIV se pueden usar para estructurar documentos HTML como una jerarquía de divisiones.
...
CENTRE fue introducido por Netscape antes de que agregaran soporte para el elemento HTML 3.0 DIV. Se conserva en HTML 3.2 debido a su implementación generalizada.
En pocas palabras, ambos elementos surgieron de la necesidad de un contenedor más semánticamente genérico. El intervalo se propuso como un reemplazo más genérico para un elemento <text> al estilo del texto. Div se propuso como una forma genérica de dividir páginas y tuvo el beneficio adicional de reemplazar la etiqueta <center> por el contenido de alineación central. Div siempre ha sido un elemento de bloque debido a su historial como separador de páginas. Span siempre ha sido un elemento en línea porque su propósito original era el estilo del texto y hoy en día div y span han llegado a ser elementos genéricos con propiedades de visualización en línea de bloque y en línea predeterminadas respectivamente.
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.
Yo diría que si sabes un poco de español para ver esta página , dónde se explica correctamente.
Sin embargo, una definición rápida sería que div es para dividir secciones y span para aplicar algún tipo de estilo a un elemento dentro de otro elemento de bloque como div .
<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. Solo dando estilo en div solo.
<span> es un elemento en línea.
Lo que se hacen todos los cambios de CSS que se refleja 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>
<div> es un elemento de nivel de bloque y <span> es un elemento en línea.
Si desea hacer algo con algún texto en línea, <span> es el camino a seguir ya que no introducirá saltos de línea como lo haría un <div> .
Como han señalado otros, hay algunas semánticas implicadas con cada uno de estos, más significativamente el hecho de que un <div> implica una división lógica en el documento, similar a una sección de un documento o algo así, 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>
div es un elemento de bloque, span está en línea.
Esto significa que para usarlos semánticamente, los divs deben usarse para envolver secciones de un documento, mientras que los espacios 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 que:
<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. Vea la referencia de MDN here para una lista bastante clara. Lo anterior sigue siendo ilegal, ya que <span> solo acepta contenido de frases, y <div> es contenido de flujo.
Pidiste algunos ejemplos concretos, así que es uno 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, que esta pasando? En la parte superior de mi página, tengo una sección lógica, el "encabezado". Ya que 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 aproximadamente 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 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 las enumera, y brinda sugerencias sobre su uso. HTML5 sigue siendo una especificación de trabajo, así que nada es "final" todavía, pero es muy dudoso que alguno de estos elementos vaya a alguna parte. Hay un hackeo de javascript que deberá usar si desea aplicar un estilo a estos elementos en una versión anterior de IE. Básicamente, debe crear uno de cada elemento utilizando document.createElement antes 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 resultó html5shiv .