En HTML , el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web , <div>y <span> las etiquetas son elementos utilizados para definir partes de un documento , de modo que sean identificables cuando sea necesaria una clasificación única. Cuando otros elementos HTML como <p>(párrafo), <em>(énfasis), etc., representan con precisión la semántica del contenido, el uso adicional de las etiquetas <span>y <div>conduce a una mejor accesibilidad para los lectores y una capacidad de mantenimiento más sencilla para los autores. Cuando no es aplicable ningún elemento HTML existente, <span>y <div>puede representar valiosamente partes de un documento de modo que se puedan aplicar atributos HTML como class, id, lango . [1] [2]dir
<span>representa una parte en línea de un documento, por ejemplo, palabras dentro de una oración. <div>representa una parte a nivel de bloque de un documento, como algunos párrafos o una imagen con su título. <div>significa división. Los elementos permiten aplicar atributos semánticos (por ejemplo, lang="en-US"), estilos CSS (por ejemplo, color y tipografía) o secuencias de comandos del lado del cliente (por ejemplo, animación, ocultamiento y aumento). [1] [2]
<div>define una 'división' del documento, un elemento a nivel de bloque que es más distinto de los elementos superiores e inferiores que un espacio de material en línea. [3]
Por ejemplo, para poner en rojo una determinada parte del texto dentro de un párrafo, <span>se puede utilizar lo siguiente: [ aclaración necesaria (incluya también un <div>ejemplo) ]
El <span>elemento se introdujo en HTML en el segundo borrador html-i18n del grupo de trabajo de internacionalización en 1995. Sin embargo, no fue hasta HTML 4.01 que se convirtió en parte del lenguaje HTML, apareciendo en el Borrador de trabajo HTML 4 W3C en 1997. [4]
<span>Se introdujo para marcar cualquier extensión de texto en línea, porque "se necesita un contenedor genérico para llevar los atributos LANG y BIDI en los casos en que ningún otro elemento es apropiado". Todavía sirve para ese propósito general, aunque desde entonces se ha definido una gama mucho más rica de elementos semánticos y también hay muchos más atributos que pueden necesitar ser aplicados.
Existen múltiples diferencias entre <div>y <span>. La diferencia más notable es cómo se muestran los elementos. En HTML estándar, a <div>es un elemento de nivel de bloque mientras que a <span>es un elemento en línea . El <div>bloque aísla visualmente una sección de un documento en la página y puede contener otros componentes de nivel de bloque. El <span>elemento contiene una pieza de información en línea con el contenido circundante y solo puede contener otros componentes de nivel en línea. En la práctica, la visualización predeterminada de los elementos se puede cambiar mediante el uso de hojas de estilo en cascada (CSS), aunque no se pueden cambiar los contenidos permitidos de cada elemento. Por ejemplo, independientemente de CSS, un <span>elemento no puede contener elementos secundarios de nivel de bloque. [5]
<span>y <div>los elementos se utilizan puramente para implicar una agrupación lógica de elementos encerrados.
Hay tres razones principales para utilizar <span>etiquetas <div>con atributosclass o :id
Es común que los elementos <span>y <div>lleven atributos classo idjunto con CSS para aplicar atributos de diseño, tipográficos, de color y otros atributos de presentación a partes del contenido. CSS no solo se aplica al estilo visual: cuando se pronuncia en voz alta mediante un navegador de voz , el estilo CSS puede afectar la velocidad de habla, el énfasis, la riqueza e incluso la posición dentro de una imagen estereofónica .
Por estas razones, y en apoyo de una web más semántica, los atributos adjuntos a los elementos dentro de HTML deberían describir su propósito semántico, en lugar de simplemente sus propiedades de visualización previstas en un medio en particular. Por ejemplo, el HTML en es semánticamente débil, mientras que utiliza un elemento para indicar énfasis (apareciendo como texto en cursiva) e introduce un nombre de clase más apropiado. Con el uso correcto de CSS, tales "advertencias" pueden mostrarse en una fuente roja y en negrita en una pantalla, pero cuando se imprimen pueden omitirse, ya que para entonces es demasiado tarde para hacer algo al respecto. Tal vez cuando se pronuncian se les debería dar un énfasis adicional y una pequeña reducción en la velocidad del habla. El segundo ejemplo es un marcado semánticamente más rico, en lugar de meramente presentacional. <span class="red-bold">password too short</span><em class="warning">password too short</em><em>
Este tipo de agrupación y etiquetado de partes del contenido de una página puede introducirse simplemente para que la página tenga más significado semántico en términos generales. Es imposible predecir cómo evolucionará la World Wide Web en los próximos años y décadas. Las páginas web diseñadas hoy en día pueden seguir utilizándose cuando sistemas de información que aún no podemos imaginar estén rastreando, procesando y clasificando la web. Incluso los motores de búsqueda actuales, como Google y otros, utilizan algoritmos de procesamiento de información patentados de considerable complejidad.
Desde hace algunos años, el Consorcio World Wide Web (W3C) ha estado llevando a cabo un importante proyecto de Web Semántica diseñado para hacer que toda la web sea cada vez más útil y significativa para los sistemas de información actuales y del futuro.
El movimiento de los microformatos es un intento de construir una idea de los classelementos semánticos. Por ejemplo, un software que tenga en cuenta los microformatos podría encontrar automáticamente un elemento y permitir la marcación automática del número de teléfono.<span class="tel">123-456-7890</span>
Una vez que el código HTML o XHTML se entrega al navegador del cliente del visitante de una página, existe la posibilidad de que el código del lado del cliente necesite navegar por la estructura interna (o Document Object Model ) de la página web. La razón más común para esto es que la página se entrega con JavaScript del lado del cliente que producirá un comportamiento dinámico continuo después de que se renderice la página. Por ejemplo, si pasar el mouse sobre un enlace "Comprar ahora" tiene como objetivo hacer que se enfatice el precio, en otra parte de la página, el código JavaScript puede hacerlo, pero JavaScript necesita identificar el elemento de precio, donde sea que esté en el código. El siguiente código sería suficiente: . Otro ejemplo es la técnica de programación Ajax , donde, por ejemplo, hacer clic en un enlace de hipertexto puede hacer que el código JavaScript recupere el texto de una nueva cotización de precio para mostrar en lugar de la actual dentro de la página, sin volver a cargar toda la página. Cuando el nuevo texto regresa del servidor, el JavaScript debe identificar la región exacta en la página para reemplazar con la nueva información.<div class="price">$45.99</div>
Las herramientas de prueba automática también pueden necesitar navegar por el marcado de la página web utilizando elementos <span>y o atributos. En HTML generado dinámicamente , esto puede incluir el uso de herramientas de prueba de páginas como HttpUnit , un miembro de la familia xUnit , y herramientas de prueba de carga o estrés como Apache JMeter cuando se aplican a sitios web controlados por formularios .<div>classid
El uso sensato de <div>y <span>es una parte vital del marcado HTML y XHTML. Sin embargo, a veces se abusa de ellos.
Varias estructuras de listas disponibles en HTML pueden ser preferibles a una mezcla casera de elementos <div>y <span>. [6]
Por ejemplo, esto:
< ul class = "menu" > < li > Página principal </ li > < li > Contenidos </ li > < li > Ayuda </ li > </ ul >que produce
... suele ser preferible en lugar de esto:
< div class = "menu" > < span > Página principal </ span > < span > Contenidos </ span > < span > Ayuda </ span > </ div >que produce
Otros ejemplos del uso semántico de HTML en lugar de elementos <div>y <span>incluyen el uso de <fieldset>elementos para dividir un formulario web, el uso de <legend>elementos para identificar dichas divisiones y el uso de <label>para identificar <input>elementos de formulario en lugar de elementos <div>o <span>utilizados <table>para tales fines. [7]
HTML5 introdujo varios elementos nuevos; algunos ejemplos incluyen los elementos <header>, y . El uso de elementos semánticamente apropiados proporciona una mejor estructura a los documentos HTML que o . [8<footer> ]<nav><figure><span><div>
No existe una manera sencilla de encontrar todas las listas no identificadas en un sitio. [...] Se pueden marcar de docenas de formas diferentes: como párrafos,s ,
tablas, [etc.]. Una vez que haya encontrado una lista, marcar los elementos individuales es fácil. Simplemente use
,
, o
en lugar del elemento contenedor actual. [...] Por ejemplo, para eliminar las viñetas, agregue esta regla a la hoja de estilos CSS de la página: [...]
div<ul><ol><dl>
El
elemento permite a los autores agrupar controles y etiquetas relacionados temáticamente. La agrupación de controles facilita a los usuarios la comprensión de su propósito y, al mismo tiempo, facilita la navegación con pestañas para los agentes de usuario visuales y la navegación por voz para los agentes de usuario orientados al habla. El uso adecuado de este elemento hace que los documentos sean más accesibles.
FIELDSET