En HTML , el lenguaje de marcado estándar para documentos diseñados para mostrarse 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 <span>etiquetas <div>conduce a una mejor accesibilidad para los lectores y un mantenimiento más fácil para los autores. Donde ningún elemento HTML existente es aplicable <span>y <div>puede representar de manera valiosa partes de un documento para 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 unos pocos párrafos o una imagen con su título. <div>significa división. Los elementos permiten aplicar atributos semánticos (p. ej. lang="en-US"), estilo CSS (p. ej., color y tipografía) o secuencias de comandos del lado del cliente (p. ej., animación, ocultación 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 tramo de material en línea. [3]
Por ejemplo, para hacer que una determinada parte del texto dentro de un párrafo sea roja, <span>se puede utilizar la siguiente manera: [ se necesita aclaración (también incluya 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 pasó a formar parte del lenguaje HTML, apareciendo en el borrador de trabajo HTML 4 W3C en 1997. [4]
<span>se introdujo para marcar cualquier tramo 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 sea apropiado". Todavía cumple 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 a 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 a nivel de bloque. El <span>elemento contiene 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 puede cambiar el contenido permitido de cada elemento. Por ejemplo, independientemente del CSS, un <span>elemento no puede contener elementos secundarios a nivel de bloque. [5]
<span>y <div>los elementos se utilizan únicamente para implicar una agrupación lógica de elementos incluidos.
Hay tres razones principales para usar <span>etiquetas <div>con atributosclass o :id
Es común que los <span>elementos <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 del habla, el estrés, 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 deben 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 (que aparece como texto en cursiva) e introduce un nombre de clase más apropiado. Mediante el uso correcto de CSS, tales 'advertencias' pueden aparecer en una fuente roja y en negrita en una pantalla, pero cuando se imprimen pueden omitirse, ya que para entonces ya será demasiado tarde para hacer algo al respecto. Quizás cuando se les habla se les debería dar más énfasis 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 la página podría introducirse únicamente para hacer que la página tenga más significado semántico en términos generales. Es imposible decir cómo se desarrollará la World Wide Web en los próximos años y décadas. Las páginas web diseñadas hoy en día todavía pueden estar en uso cuando sistemas de información que aún no podemos imaginar rastrean, procesan y clasifican la web. Incluso los motores de búsqueda actuales, como Google y otros, utilizan algoritmos propietarios de procesamiento de información de considerable complejidad.
Desde hace algunos años, el Consorcio World Wide Web (W3C) ha estado ejecutando 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 futuros.
El movimiento de los microformatos es un intento de construir una idea de semántica class. Por ejemplo, el software compatible con microformatos podría encontrar automáticamente un elemento similar y permitir la marcación automática del número de teléfono.<span class="tel">123-456-7890</span>
Una vez que el marcado HTML o XHTML se entrega al navegador del cliente del visitante de la página, existe la posibilidad de que el código del lado del cliente necesite navegar por la estructura interna (o Modelo de objetos de documento ) 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 represente la página. Por ejemplo, si pasar el mouse sobre un enlace "Comprar ahora" tiene como objetivo resaltar el precio en otra parte de la página, el código JavaScript puede hacer esto, pero JavaScript necesita identificar el elemento de precio, dondequiera que esté en el marcado. . El siguiente marcado 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 para mostrar una nueva cotización de precio en lugar de la actual dentro de la página, sin volver a cargar toda la página. Cuando el nuevo texto llega del servidor, JavaScript debe identificar la región exacta de la página para reemplazarla con la nueva información.<div class="price">$45.99</div>
Es posible que también sea necesario utilizar herramientas de prueba automáticas para navegar por el marcado de la página web utilizando elementos <span>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 aplica a sitios web basados en formularios .<div>classid
El uso sensato de <div>y <span>es una parte vital del marcado HTML y XHTML. Sin embargo, a veces se abusan 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 > Contenido </ span > < span > Ayuda </ span > </ div >que produce
Otros ejemplos del uso semántico de HTML en lugar de elementos <div>y incluyen el uso de elementos para dividir un formulario web, el uso de elementos para identificar dichas divisiones y el uso de para identificar elementos de formulario en lugar de , o elementos utilizados para tales fines. [7]<span><fieldset><legend><label><input><div><span><table>
HTML5 introdujo varios elementos nuevos; Algunos ejemplos incluyen los elementos <header>, y <footer>. El uso de elementos semánticamente apropiados proporciona una mejor estructura a los documentos HTML que o . [8]<nav><figure><span><div>
No existe una forma sencilla de encontrar todas las listas no identificadas en un sitio. [...] Se pueden marcar de decenas de formas diferentes: como párrafos,divs, tablas, [etc]. Una vez que haya encontrado una lista, marcar los elementos individuales es fácil. Simplemente use<ul>,<ol>o<dl>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: [...]
El
elemento permite a los autores agrupar controles y etiquetas relacionados temáticamente. Los controles de agrupación facilitan que los usuarios comprendan su propósito y al mismo tiempo facilitan la navegación con pestañas para agentes de usuario visuales y la navegación por voz para agentes de usuario orientados al habla. El uso adecuado de este elemento hace que los documentos sean más accesibles.
FIELDSET