22. Contenedores genéricos: los elementos div y span
Mark Norman Francis 26 de septiembre del 2008. Última modificación: 1 de agosto de 2017 (equipo docente del grado de Multimedia). Publicado en: div, span, agrupar, vínculos, semántico
En este apartado explicaremos cómo y cuándo utilizar los dos elementos de HTML que no se utilizan para describir el contenido. Los elementos span y div no confieren en realidad ningún significado al contenido que rodean; de hecho, son un mecanismo genérico que permite crear una estructura y unas agrupaciones personalizadas de elementos en los lugares en los que no hay ningún otro elemento del HTML que resulte realmente adecuado, a los que entonces se pueden aplicar estilos con CSS o manipular con JavaScript. A pesar de que los elementos div no añaden ningún significado semántico, se puede considerar que éstos representan una división estructural del etiquetado junto con la clase semántica o el nombre de ID adecuados.
Son "el último recurso" y sólo se deben utilizar cuando no hay ningún otro elemento del HTML que cumpla los requisitos necesarios, ya que no tienen ningún significado para las tecnologías de asistencia, los motores de búsqueda, etc.
Los contenidos de este apartado son los siguientes:
- 22.1. Semánticamente neutros
- 22.2. En línea y de bloque
- 22.3. Más explicaciones sobre la agrupación de contenido
- 22.4. Información adicional
- 22.5. Enlaces para JavaScript, y también CSS
- 22.6. "Div-itis"
- 22.7. Semántica inadecuada
- 22.7.1. Párrafos "genéricos"
- Resumen
- Preguntas de repaso
22.1. Semánticamente neutros
La mayoría de los elementos de HTML existen para describir el contenido, como por ejemplo las imágenes, las listas o los títulos, o para ayudar a componer el documento, como por ejemplo head, body, link, meta, etc. Sin embargo, hay dos elementos que no tienen ningún significado asignado: los elementos div y span, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos.
Estos dos elementos se pueden considerar como el andamio de HTML. Dan la posibilidad de agrupar el contenido y de añadir información adicional relativa al contenido y vínculos para incorporar estilos e interactividad. Pero no añaden ningún significado semántico nuevo al documento, ni en sí mismos ni de ellos mismos.
22.2. En línea y de bloque
Como ya habéis aprendido, los elementos de bloque son elementos que ayudan a informar sobre la estructura de un documento. El elemento div, que es la abreviatura de división, es el contenedor genérico de los bloques. Normalmente se utiliza para rodear otros elementos de bloque con el objetivo de agruparlos. También se puede utilizar para reunir un grupo de elementos insertados y/o texto que no encajan de manera lógica bajo ningún otro elemento de bloque, pero debería ser el último recurso.
Ved también
Podéis ver el subapartado siguiente, donde encontraréis una explicación más detallada sobre la agrupación del contenido.
El elemento span es el contenedor genérico para los elementos en línea. También ayuda a informar sobre la estructura del documento, pero se utiliza para agrupar o rodear otros elementos insertados y/o texto más que elementos de bloque.
En un primer momento, la línea de separación entre estos dos tipos diferentes podría parecer arbitraria. La diferencia que hay que tener en cuenta es el tipo de contenido y el modo como debería aparecer al escribirlo sin ningún estilo. Un elemento div se pone alrededor de un grupo de elementos de bloque; por ejemplo, para rodear un título y una lista de enlaces para crear un menú de navegación. Un elemento span rodea un grupo de elementos en línea o (la mayoría de las veces) texto plano. La palabra clave es grupo; si un elemento div rodea sólo un elemento de bloque, o un elemento span sólo un elemento en línea, entonces su uso es innecesario.
Por ejemplo, observad el uso que se hace de los elementos div y span en el siguiente etiquetado, que es muy simple:
<body>
<div id="mainContent">
<h1>Título de la página</h1>
<p>Éste es el primer párrafo de contenido de mi página de ejemplo.</p>
<img src="example.gif" alt="Esta imagen es sólo un ejemplo, no tiene nada de
especial">
<p>Éste es el segundo párrafo de contenido de mi página de ejemplo. Es muy
parecido al primero, pero aquí hay una <span id="specialAlert">alerta
especial que queremos colorear y cuyo tamaño de texto queremos aumentar
mediante CSS</span>. No se trata de un énfasis estándar, sino más bien un
estilo, de manera que <em> i <strong> no son del todo adecuados.</p>
</div>
</body>Ahora podéis seleccionar el contenido del interior de los elementos div y span utilizando sus atributos id y aplicarles estilos y posicionamientos especiales con el CSS.
22.3. Más explicaciones sobre la agrupación de contenido
Si observamos el código fuente de muchas páginas de Internet, veremos muchos elementos div anidados que incluyen algunas metáforas habituales en las class y/o id de los elementos; por ejemplo, header, footer, content, sidebar, etc.
Vuestros nombres de class e id deben ser siempre semánticos, lo cual quiere decir que deberían remitir al significado/papel del contenido y no limitarse a hacer referencia a su aspecto visual. Así pues, por ejemplo, barraLateral y mensajeAlerta son buenos nombres de class, mientras que columnaIzquierdaRoja y textoAzulIntermitente no. ¿Qué sucedería si después quisierais cambiar el color de la barra lateral de rojo a azul, o su posición en el sitio web de la izquierda a la derecha? ¿Y si quisierais cambiar vuestros mensajes de alerta de azules intermitentes a verde sin intermitencia?
Estas divisiones aportan predictibilidad a la hora de crear estructuras de página y, seguramente mucho más importante, cuando se vuelve a revisar el HTML más adelante ofrecen pistas sobre la parte de la página en la que os encontráis. Una página bien dividida se documenta prácticamente en sí misma con respecto a sus intenciones y a su contenido.
Con la buena intención de dejarlo todo un poco más claro, ahora veremos una estructura de div de un sitio web real, concretamente la página de inicio de dev.opera.com. Tened en cuenta que este ejemplo de código no incluye ningún contenido, si dejamos de lado algunos otros elementos que hemos puesto porque son importantes para la estructura del sitio. Básicamente, lo que queremos es únicamente reproducir la estructura real del sitio tal como está definida con los elementos div. En el código siguiente, leed con atención los comentarios HTML; los hemos puesto para explicar la estructura del sitio. Mientras vais revisando este código, abrid la página principal de dev.opera.com en una nueva pestaña o ventana del navegador para poder ver el aspecto del sitio mientras exploráis su estructura.
<body>
<!-- En primer lugar tenemos un elemento div "wrap", que rodea toda la página y
permite un control más preciso de todo él en general -->
<div id="wrap">
<!-- Esta lista desordenada contiene la lista de enlaces de todos los sitios
diferentes de Opera, que podéis ver en la parte superior de la página -->
<ul id="sitenav" class="hidemobile">
...
</ul>
...
<!-- Éste es el formulario de búsqueda - el cuadro de búsqueda que podéis
ver en la parte superior derecha de la página -->
<form action="/search/" method="get" id="search">
<div>
...
</div>
</form>
<!-- Esta lista desordenada contiene el menú de navegación principal del
sitio - el menú horizontal de pestañas que hay justo debajo del gráfico del
título principal -->
<ul id="menu">
...
</ul>
<!-- Este elemento div anidado forma la estructura del cuadro de inicio de
sesión, en el que introduciréis el nombre de usuario y la contraseña para
acceder al sitio. Sólo lo veréis si aún no habéis iniciado ninguna
sesión. -->
<div id="loginbox">
<div id="login">
...
</div>
</div>
<!-- Esta serie de elementos div anidados es donde está el contenido
principal de la página - todos los resúmenes de los artículos que forman
el grueso del contenido de la página -->
<div id="content2">
<div id="main">
...
<div class="major">
...
</div>
<div class="major">
...
</div>
...
</div>
</div>
<!-- Este elemento div contiene la barra lateral de la página - las
categorías de artículos, los últimos comentarios, etc -->
<div id="side">
...
</div>
<!-- Este elemento div contiene el pie de página, que es donde veréis el
mensaje de copyright y varios enlaces en la parte inferior de la
página. -->
<div id="footer">
...
</div>
<!-- El final de la página - es la etiqueta de cierre para el elemento div
"wrap" -->
</div>
</body>22.4. Información adicional
Algunos contenidos tienen información adicional, que es de utilidad para los agentes de usuario y para otros analizadores, y ésta se debe comunicar por medio de un atributo. Los elementos span son a menudo una buena manera de adjuntar esta información al contenido de una página web, tal como veréis a continuación.
Un buen ejemplo de esto es un idioma diferente que aparece en un documento. Por ejemplo:
<p><q>Plus ça change, plus c'est la même chose</q> she said.</p>Aunque el idioma del documento principal es el inglés, la cita es en francés. Esto se indicaría mediante el uso del atributo lang, de la siguiente manera:
<p><q lang='fr'>Plus ça change, plus c'est la même chose</q> she said.</p>En este ejemplo era muy fácil indicar este cambio de idioma, ya que aparecía sólo en una cita, con lo cual el elemento q era perfecto para rodear el contenido. Hay algunos casos, sin embargo, en los que no existe ningún elemento semántico adecuado fácilmente disponible, con lo cual deberíais recurrir a span o div. Por ejemplo:
<p>A screen reader will read the French word chat (cat) as chat (to talk
informally) unless it is properly marked up.</p>En este ejemplo, la primera aparición de la palabra chat, que es una palabra en francés en un documento en inglés, debería tener esta diferencia indicada a fin de que no se pudiera interpretar como la palabra inglesa chat. En este caso, la manera correcta de hacerlo es con un elemento span en torno a la palabra chat, ya que no hay ningún otro elemento HTML adecuado para rodear la palabra francesa (no queremos añadir ningún énfasis a la palabra, no es una cita, no es un código, etc.). Como es una única palabra dentro de una frase, estaremos trabajando con un elemento insertado. Por lo tanto, este ejemplo se debería escribir de la manera siguiente:
<p> A screen reader will read the French word <span lang='fr'>chat</span> (cat) as
chat (to talk informally) unless it is properly marked up.</p>Ésta es la misma técnica que la utilizada en los microformatos para etiquetar formatos de datos comunes en páginas web. Podéis encontrar mucha más información sobre los microformatos en algunos de los apartados más avanzados sobre HTML en developer.mozilla.org.
22.5. Enlaces para JavaScript, y también CSS
Antes ya hemos hablado de cómo se pueden utilizar div y span junto con los atributos id y class para ofrecer enganches con los que aplicar estilos y posicionamiento CSS en ciertas partes de vuestro contenido. Lo mismo también se puede hacer para aplicar JavaScript a vuestro documento.
Si el JavaScript debe encontrar y manipular un elemento concreto, lo más habitual es aplicarle un id y entonces utilizar la función getElementById para encontrarlo. En la última parte de este curso aprenderéis muchas más cosas sobre JavaScript.
22.6. "Div-itis"
Una de las cosas que hay que tener en cuenta es un efecto que, entre la comunidad de desarrolladores de webs, se conoce normalmente como "div-itis".
Es muy fácil añadir estilos mediante muchos elementos div o span anidados, pero es una tentación en la que deberíamos evitar caer siempre que sea posible. En la mayoría de los casos, se pueden añadir estilos o funciones JavaScript a los elementos ya existentes del documento. El uso de un contenedor genérico debería ser el último recurso; es mejor intentar escribir páginas web empezando sólo con los elementos semánticos y añadir contenedores sólo cuando sea necesario.
22.7. Semántica inadecuada
En esta sección exploraremos algunos de los errores más habituales que se deben tener en cuenta a la hora de etiquetar el contenido con HTML y que se deben evitar siempre que sea posible.
22.7.1. Párrafos "genéricos"
Algunas veces es muy tentador utilizar un elemento p (párrafo) en torno a cualquier bloque de texto, pero eso no es demasiado correcto. Tal como ya hemos explicado en el apartado anterior sobre el etiquetado del contenido:
"Si son sólo unas cuantas palabras y no una frase propiamente dicha, entonces quizá sería mejor no etiquetarlo como un párrafo."
Los elementos correctos para rodear contenido textual inconexo que no tiene ninguna otra relación semántica cubierta por otros elementos del HTML son div o span (según la posición exacta).
Resumen
Aquí acaban nuestras explicaciones sobre los elementos span y div; ahora ya deberíais entender mucho mejor cuál es su finalidad y ser capaces de utilizarlos con toda confianza. Los apartados del módulo "Conceptos básicos de CSS" se detendrán mucho más en su uso para crear maquetaciones de página y para otras finalidades.
Preguntas de repaso
¿Cuál es la diferencia entre
divyspan?Decid dos de los usos principales de estos elementos en las páginas web.
Observad el código fuente de una de las páginas de vuestro sitio web preferido. Mirad qué estructura tiene. ¿Utiliza muchos elementos
divyspan? ¿Podéis ver algo malo o inadecuado en la manera de utilizarlos? ¿Cómo se podría mejorar?
