Divisiones del documento web

Además de los elementos o etiquetas propias de xhtml, también podemos dividir el documento en unidades mayores como fragmentos de bloque y fragmentos de línea, mediante “div”, y “span” respectivamente.

Fragmento de bloque <div>

Mediante la etiqueta “div” delimitamos un fragmento de documento que puede contener en su interior cualquier elemento, y también cualquier tipo de fragmento, ya sean de línea o bloque, incluso puede haber varios “div” anidados.

En la práctica veremos que una de las mejores aplicaciones de “div” es para dividir nuestra web en sus partes principales, como cabecera de documento, columnas, cuerpo central, pie de documento, etc.

Esquema mostrando una web dividida en sus partes principales

Fragmento de línea <span>

Span nos permite marcar como elemento de línea un fragmento del contenido que no puede ser etiquetado con un elemento de línea más apropiado. Una vez se han etiquetado mediante “span” ya pueden coexistir varios fragmentos de contenido en la misma línea. Estos fragmentos a su vez pueden contener elementos también de línea.

Un ejemplo del uso de span es para diferenciar parte del contenido de una línea, por ejemplo asignándole las reglas de estilo de un selector de clase

Ejemplo:

<p> Se debe <span class="textoazul">comentar 
  en el foro </span>cada error encontrado. </p>

Resultado: Se debe comentar en el foro cada error encontrado

Documento conforme W3C XHTML 1.0|CSS 2.0|WAI AA