 es diferente de la etiqueta ya que no tiene ningún efecto sobre la estructura o pausas de tu documento HTML. En cambio, la etiqueta se utiliza exclusivamente para el formato y los efectos sobre el texto que se muestra en el documento.html span){kind=link}
html span:
Esto significa que para usarlos semánticamente, los divs se deben usar para envolver secciones de un documento, mientras que los tramos se deben usar para envolver pequeñas porciones de texto, imágenes, etc.
Por ejemplo:
<div> ¡Esta es una gran división principal, con <span> un poco </ span> de texto distribuido! </ 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> Algunos <span> textos que <div> quiero </ div> marcar </ span> arriba </ 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, así que uno de mi sitio web de bolos, BowlSK:
<div id = “encabezado”>
<div id = “barra de usuario”>
Hola, <span class = “username”> Chris Marasti-Georg </ span> |
<a href=”/edit-profile.html”> Perfil </a> |
<a href=”http://www.bowlsk.com/_ah/logout?…”> Cerrar sesión </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, utilizo un div (con un id. Apropiado). Dentro de eso, tengo un par de secciones: la barra de usuario y el título de la página real. 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 lapso, por lo que puedo cambiar el estilo. Como puede ver, también he envuelto un lapso 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 amplio conjunto nuevo 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 de trabajo, por lo que todavía no hay nada “definitivo”, pero es muy dudoso que alguno de estos elementos vaya a ninguna parte. Hay un truco de javascript que deberá usar si desea aplicar un estilo a estos elementos en alguna versión anterior de IE; básicamente, necesita crear uno de cada elemento utilizando document.createElement antes de que se especifique cualquiera de esos elementos en su fuente. Hay muchas bibliotecas que se encargarán de esto: una búsqueda rápida en Google mostró html5shiv.
Solo para completar, los invito a pensar 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 HTML moderno todos los elementos tienen significados: un <p> es un párrafo, un <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 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 sentido para una columna de 400 píxeles de ancho, ¿verdad? Solo quiere que su columna de texto tenga 400 píxeles 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, la gente volvería a abusar de los elementos que sí tienen significado.
Descripción
La etiqueta HTML <span> se usa para agrupar y aplicar estilos a elementos en línea.
Hay una diferencia entre la etiqueta span y la etiqueta div. La etiqueta span se usa con elementos en línea mientras que la etiqueta div se usa con contenido de nivel de bloque.
Ejemplo
<! DOCTYPE html>
<html>
<head>
<title> HTML span Tag </ title>
</ head>
<cuerpo>
<p> Este es un párrafo <span style = “color: # FF0000;”>
Este es un párrafo </ span> Este es un párrafo </ p>
<p> <span style = “color: # 8866ff;”>
Este es otro párrafo </ span> </ p>
</ body>
</ html>
Esto producirá el siguiente resultado:
Palabras claves relacionadas:html span