Estructura de una web

Versión para impresión
Estructura de una web en 3D vista en Firefox

Estructura básica

Una web suele tener una estructura típica:

  • Cabecera, con el título y logo (header)
  • Menú principal (nav)
  • Contenidos (un article con varias section y a veces algún aside y algún que otro menú secundario en un nav)
  • Pie de página (footer)

Cabecera, menú principal y pie de página suelen ser comunes a todas las páginas del sitio web, y por razones de usabilidad web, suelen estar en el mismo lugar y tener el mismo aspecto en todas las páginas. Los contenidos variarán en cada página.

Estructura tradicional mediante etiquetas DIV

Tradicionalmente, esta estructura se delimitaba por una serie de etiquetas contenedoras llamadas <div>, cuyo único fin es el de maquetar la web. Cada div suele tener un id o unas clases que los identifica en la hoja de estilos. Por ejemplo una estructura tradicional sería:

HTML4  

Nota: el sidebar, article y section, en este caso podrían ir dentro de otro div llamado por ejemplo content (aunque no es neceario).

Estructrura semántica con etiquetas de HTML 5

En relación a la estructura de una web, el lenguaje HTML5 utiliza unas etiquetas que le aportan semántica. El lenguaje es capaz de diferenciar, por ejemplo, entre el encabeza del documento y el pie. Google y otros buscadores son capaces de detectar dicha estructura.

HTML5

Para más información ver el artículo Estructura semántica de HTML5

Dando forma a la estructura mediante CSS

No hay que mezclar contenido y maquetación en una web. El contenido se insertará en la estructura creada, y el diseño o maquetación se definirá en hojas de estilo CSS. Así, para un mismo contenido, podremos tener la posibilidad de cambiar de diseño fácilmente.

Conviene evitar prácticas como las de maquetar con atributos HTML (como align, bgcolor, etc.), mala praxis que se suele utilizar, por ejemplo, cuando maquetamos tablas. 

Posición relativa vs absoluta

Podemos posicionar casi cualquier elemento de una web (etiquetas) mediante la propiedad de CSS position. Se utiliza bastante para posicionar los DIV. Esta propiedad puede tener los siguientes varlores:

  • static: se posicionan según el orden en que aparecen en el documento. Es el valor por defecto.
  • relative: la posición de cada DIV es relativa a la posición de los DIV relativos o estáticos que tiene a su alrededor (como static). Este valor influye en la posición absolute de los hijos (los hijos con valor absolute se posicionarían respecto a su padre, no respecto al navegador).
  • absolute: la posición depende de unas coordenadas, que son relativas respecto a su padre (el contenedor).
  • fixed: posición fija desde el navegador. En el caso que de que alguna de las coordenadas de posición se omita, cogería la de su padre (por ejemplo, left o top).

Ver ejemplo

Así, respecto a su posición, los DIV (o cualquier otro elemento HTML de una página web) los podemos clasificar en:

  • de posición relativa y estática
  • elementos PA (de posicón absoluta)
  • de posición fija.
Categorías: