La única función que poseen los contenedores es la de agrupar elementos. Ya sean de línea o bloque. Visualmente no otorgan ninguna característica particular a los elementos que contienen. Al menos, no por defecto. Su verdadera utilidad está en su uso combinado con las hojas de estilo, que nos permitirá aplicar reglas particulares a los grupos en cuestión.
Los contenedores son los siguentes:
| Elemento | Etiqueta | Es de tipo: |
|---|---|---|
| Contenedor de bloque | <div> | bloque |
| Contenedor de línea | <span> | línea |
No poseen atributos exclusivos.
Su utilidad como herramientas para la maquetación se abordará en los bloques y secciones de CSS de este Curso.
Las agrupaciones que nos otorgan estos elementos son geniales y muy útiles. Son los prototipos de elementos en bloque y elementos en línea, respectivamente. Con la suficiente habilidad y conocimiento, se podría crear una web entera utilizando sólo estos dos elementos y las CSS. Sin embargo, no es recomendable hacerlo así, ya que perderíamos el componente estructural que los otros elementos otorgan.
Cuando utilizamos los <div> y los
<span> para aplicar estilos a un conjunto de
elementos, usualmente asignaremos un valor al atributo
class de cada uno de ellos. Es conveniente utilizar
un nombre que esté relacionado con su contenido. Por ejemplo, si
nuestro elemento <div> contendrá el
menú de navegación y algunos enlaces, tal vez
sea conveniente llamarlo navegacion. Si colocamos el
título de nuestra página, tal vez sea conveniente
llamarlo cabecera. No es recomendable usar nombres
que definan su apariencia visual (salvo muy contadas
excepciones), como podría ser
centrado, itálica, etc. Tal vez en ese momento dicho contenido se
encuentre en efecto centrado. Pero si en el futuro decidimos
cambiar el estilo y apariencia de nuestro sitio, es posible que
el elemento que antes se encontraba centrado después se
muestre a la izquierda, lo que nos conduciría a una
incongruencia en la nomenclatura. O peor: elementos que
tenían en común estar centrados perteneciendo a la
clase centrado no compartan su tipo de
alineación después. Lo que nos obligaría a
editar el código HTML de todas las
páginas involucradas. Además, ese tipo de
prácticas nos hace proclives a cometer errores en la
estructuración de nuestras páginas. Es mucho mejor
denominar a las clases de acuerdo con su contenido y no con su
apariencia visual.