Hispanopedia Wiki
Articulo de referencia

div y span

div and span ","function":"displaytitle"},"params":{},"i":0}}]}"> En HTML , el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web , la...

Hispanopedia WikiContenido en espanolLectura gratuita

En HTML , el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web , las etiquetas y son elementos que se utilizan para definir partes de un documento , de modo que sean identificables cuando se requiere una clasificación única. Cuando otros elementos HTML como (párrafo), (énfasis), etc., representan con precisión la semántica del contenido, el uso adicional de las etiquetas y conduce a una mejor accesibilidad para los lectores y una mayor facilidad de mantenimiento para los autores. Cuando ningún elemento HTML existente es aplicable, y pueden representar valiosamente partes de un documento para que se puedan aplicar atributos HTML como , , , o . [ 1 ] [ 2 ]<div><span><p><em><span><div><div><span>classidlangdir

<span>representa una parte en línea de un documento, por ejemplo, palabras dentro de una oración. representa una parte de nivel de bloque de un documento, como algunos párrafos o una imagen con su pie de foto. significa división. Los elementos permiten aplicar atributos semánticos (por ejemplo, ), estilos CSS (por ejemplo, color y tipografía) o scripts del lado del cliente (por ejemplo, animación, ocultación y aumento). [ 1 ] [ 2 ]<div><div>lang="en-US"

<div>define una "división" del documento, un elemento a nivel de bloque que es más distinto de los elementos que están encima y debajo de él que un segmento de material en línea. [ 3 ]

Ejemplos

Por ejemplo, para poner en rojo una parte determinada del texto dentro de un párrafo, se puede usar de la siguiente manera [ i ] :<span>

Historia

El 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 del W3C en 1997. [ 4 ]<span>

<span>Se introdujo para marcar cualquier fragmento de texto en línea, porque "se necesita un contenedor genérico para los atributos LANG y BIDI cuando ningún otro elemento es apropiado". Todavía cumple esa función general, aunque desde entonces se ha definido una gama mucho más amplia de elementos semánticos y también hay muchos más atributos que pueden necesitar aplicarse.

Diferencias y comportamiento predeterminado

Existen múltiples diferencias entre <p> y <p> . La diferencia más notable radica en cómo se muestran los elementos. En HTML estándar, <p> es un elemento de nivel de bloque, mientras que <p> es un elemento en línea . El bloque aísla visualmente una sección de un documento en la página y puede contener otros componentes de nivel de bloque. El elemento <p> contiene información en línea con el contenido circundante y solo puede contener otros componentes en línea. En la práctica, la visualización predeterminada de los elementos <p> se puede modificar mediante el uso de hojas de estilo en cascada (CSS), aunque el contenido permitido de cada elemento no se puede cambiar. Por ejemplo, independientemente de CSS, un elemento <p> no puede contener elementos secundarios de nivel de bloque. [ 5 ]<div><span><div><span><div><span><span>

Uso práctico

<span>y los elementos se utilizan simplemente para implicar una agrupación lógica de elementos encerrados.<div>

Existen tres razones principales para usar etiquetas y atributos con o :<span><div>classid

Estilizar con CSS

Es común que los elementos y lleven atributos o junto con CSS para aplicar atributos de diseño, tipográficos, de color y de presentación a partes del contenido. CSS no solo se aplica al estilo visual: cuando un navegador de voz lo lee en voz alta , el estilo CSS puede afectar la velocidad del habla, el acento, la riqueza e incluso la posición dentro de una imagen estereofónica .<span><div>classid

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 particular. Por ejemplo, el HTML en es semánticamente débil, mientras que usa un elemento para significar énfasis (apareciendo como texto en cursiva), e introduce un nombre de clase más apropiado. Mediante 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 oralmente deberían enfatizarse más y reducirse ligeramente la velocidad del habla. El segundo ejemplo es un marcado semánticamente más rico, en lugar de meramente presentacional.<spanclass="red-bold">password too short</span><emclass="warning">password too short</em><em>

Claridad semántica

Esta agrupación y etiquetado de partes del contenido de la página podría introducirse para que la página tenga un significado semántico más amplio en términos generales.

Desde hace algunos años, el Consorcio World Wide Web (W3C) lleva a cabo un importante proyecto de Web Semántica diseñado para que toda la web sea cada vez más útil y significativa para los sistemas de información actuales y futuros.

El movimiento de microformatos es un intento de construir una idea de semántica class. Por ejemplo, un software compatible con microformatos podría encontrar automáticamente un elemento como y permitir la marcación automática del número de teléfono.<spanclass="tel">123-456-7890</span>

Acceso mediante código

Una vez que el marcado HTML o XHTML se entrega al navegador del visitante, es posible que el código del lado del cliente necesite navegar por la estructura interna (o Modelo de Objetos del Documento ) de la página web. La razón más común es que la página se entrega con JavaScript del lado del cliente que producirá un comportamiento dinámico continuo después de que la página se renderice. Por ejemplo, si al pasar el ratón sobre un enlace "Comprar ahora" se pretende resaltar el precio, en otra parte de la página, el código JavaScript puede hacerlo, pero JavaScript necesita identificar el elemento del precio, dondequiera que se encuentre en el marcado. El siguiente marcado sería suficiente: . Otro ejemplo es la técnica de programación Ajax , donde, por ejemplo, al hacer clic en un enlace de hipertexto, el código JavaScript puede recuperar el texto de una nueva cotización de precio para mostrarla en lugar de la actual dentro de la página, sin recargar toda la página. Cuando el nuevo texto llega de vuelta del servidor, JavaScript debe identificar la región exacta de la página que debe reemplazar con la nueva información.<divclass="price">$45.99</div>

Las herramientas de prueba automáticas también pueden necesitar navegar por el marcado de páginas web utilizando elementos o atributos . En HTML generado dinámicamente , esto puede incluir el uso de herramientas de prueba de página 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 basados ​​en formularios .<span><div>classid

Uso excesivo

El uso juicioso de y es una parte vital del marcado HTML y XHTML. Sin embargo, a veces se abusa de ellos.<div><span>

Varias estructuras de lista disponibles en HTML pueden ser preferibles a una mezcla casera de elementos y . [ 6 ]<div><span>

Por ejemplo, esto:

< ul class = " menu " > <li> Página principal </li> <li> Contenido </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 los elementos 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 propósitos. [ 7 ]<div><span><fieldset><legend><label><input><div><span><table>

HTML5 introdujo varios elementos nuevos; algunos ejemplos incluyen los elementos , , y . El uso de elementos semánticamente apropiados proporciona una mejor estructura a los documentos HTML que o . [ 8 ]<header><footer><nav><figure><span><div>

Véase también

Notas

  1. ↑ Comono está permitido dentro<div><p>

Referencias

  1. 1 2 "HTML5: Un vocabulario y API asociadas para HTML y XHTML" . W3C. 4.4 Agrupación de contenido . Recuperado el 16 de septiembre de 2014 .
  2. 1 2 "HTML5: Un vocabulario y API asociadas para HTML y XHTML" . W3C. 4.5 Semántica a nivel de texto. Archivado del original el 1 de agosto de 2015. Recuperado el 16 de septiembre de 2014 .
  3. ↑ "Etiqueta HTML <div>" . W3Schools . Consultado el 22 de marzo de 2018 .
  4. ↑ "HTML/Elements/span - Web Education Community Group" . 13 de junio de 2013. Archivado del original el 26 de febrero de 2014. Consultado el 14 de noviembre de 2013 .
  5. ↑ "HTML 5.1: 4. Los elementos de HTML" . W3C . Consultado el 3 de agosto de 2017 .
  6. ↑ Harold, Elliotte Rusty (2008). Refactoring HTML . Addison Wesley. p. 184. ISBN  978-0-321-50363-3No existe una forma sencilla de encontrar todas las listas no identificadas en un sitio. [...] Se pueden marcar de docenas de maneras diferentes: como párrafos, divetiquetas, tablas, etc. Una vez que haya encontrado una lista, marcar los elementos individuales es fácil. Simplemente use <p> , <div> o <div> 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: [...]<ul><ol><dl>
  7. ↑ Raggett, Dave ; Arnaud Le Hors; Ian Jacobs (1999). "Adding structure to forms: the FIELDSET and LEGEND elements" . HTML 4.01 Specification . W3C . Retrieve 12 July 2010. El elemento permite a los autores agrupar controles y etiquetas temáticamente relacionados. Agrupar controles facilita a los usuarios la comprensión de su propósito, al tiempo que facilita la navegación por tabulación 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
  8. ^ van Kesteren, Anne (2010). "Diferencias HTML5 de HTML4" . W3C . Consultado el 30 de junio de 2010 .
  • Agrupación de elementos: los elementos DIV y SPAN
  • Crea un div diagonal o inclinado usando CSS.