Unidad 14. Capas (I)

Vamos a ver algunas de las características básicas de elementos HTML5 que permiten definir la estructura de una página web. A estos elementos podemos después añadirles algún comportamiento.

14.1. Introducción

Hasta hace muy poco tiempo, las páginas web organizaban su contenido utilizando etiquetas <div></div>, también conocidas como capas. Estas etiquetas permiten crear contenedores de la información. Después podemos definir sus propiedades de ancho, alto, fondo, ubicación, etcétera a través de propiedades CSS que se asignan creando reglas de estilo con selectores de clase, de ID, de etiqueta o selectores compuestos. De ese modo, podemos crear un contenedor <div> para el área del encabezado, otro más para poner el menú, luego crear otra etiqueta <div> con el contenido principal de la página, tal vez usemos otro contenedor del mismo tipo para una barra lateral y, finalmente, otro para el pie de la página. De este modo, una sucesión de capas <div> crea la estructura de la página, al tiempo que las propiedades CSS le dan forma y ubicación. Finalmente, en cada capa podemos insertar encabezados, párrafos, imágenes, formularios, etcétera, tal y como ya estudiamos.

Con HTML5 las cosas han cambiando. Ahora se han introducido nuevas etiquetas que también sirven de contenedores para la información de una página web, pero el nombre de estas etiquetas indica de modo claro la posición de la página donde deben utilizarse. Así, tenemos una etiqueta llamada <header></header> que debe utilizarse preferentemente como encabezado de la página y en la cual ubicaremos el título. Tenemos otra más llamada <nav></nav> que funciona como recuadro contenedor del menú, etcétera. A este tipo de etiquetas se les llama semánticas, ya que su uso da una explicación lógica de la manera en que se estructura la información dentro de la página web. El tamaño, posición y otras características que deben tener estos nuevos contenedores también está dado por propiedades CSS, igual que en el caso de las etiquetas <div>. La diferencia y ventaja de utilizar etiquetas semánticas, reside en el hecho de que los buscadores de Internet pueden indexar mejor el contenido. Algunos programas de accesibilidad, como los lectores de páginas para invidentes, pueden identificar claramente el título de una página si éste se encuentra en un contenedor <header>, cosa que no puede distinguirse si se trata de uno tipo <div> y ubican mejor contenido relevante si está en, por ejemplo, una etiqueta <article>. En general, es mucho más comprensible la estructura de la página y, por tanto, la organización de su contenido.

Las capas o etiquetas <div></div> se siguen utilizando ampliamente, por supuesto. Su uso no se descarta. Podemos incluso utilizarlas dentro de algunas etiquetas semánticas, como ya mencionamos.

El panel Insertar de la versión CC de Dreamweaver tiene una categoría llamada Estructura, con la cual podemos crear las diferentes secciones de una página web. Como sabemos, no necesitamos preocuparnos por el código, ya que el programa crea las etiquetas correspondientes. Veamos algunos de los elementos estructurales de este panel y luego vamos a crear una secuencia semántica de los mismos y, finalmente, les daremos forma a través de algunas propiedades CSS básicas.