Divide tu página en secciones

En los artículos anteriores de esta serie aprendimos cómo crear una página web básica, desde el texto original que queríamos publicar a una página web entera con un gráfico, un enlace y algo de información resaltada. Ahora describiré cómo hacerla más profesional.

Secciones para quienes usan HTML y XHTML

Para comenzar, necesitas saber que los diseñadores web profesionales dividen su trabajo en cinco grandes secciones: encabezado, navegación, contenido, barra lateral y pie de página. Hace algunos años esto se hacía utilizando secciones de una tabla. Hoy se hace utilizando marcadores <div>.

Los marcadores <div> le dicen al navegador que lo que está dentro de ellos es información que va junta, cual si estuviese en una caja. Utilizan, además, un identificador id="" para especificar un nombre para cada sección y separarlas como corresponde.

<div id="encabezado"></div>
<div id="navegacion"></div>
<div id="contenido"></div>
<div id="barra-lateral"></div>
<div id="pie"></div>

Al insertar estas cinco en el <body> de una página web, tendrás cinco secciones claramente establecidas para luego completarlas con sus respectivos contenidos. Si estás usando HTML o XHTML, puedes seguir este formato tranquilamente para que tu página luzca más completa.

Las secciones para los usuarios de HTML 5

Quienes usan HTML 5 tienen una sorpresa. El marcador <div> todavía existe, pero ahora se tienen marcadores específicos para las secciones de tu página:

+ <header></header>, para el encabezado de tu página, por lo general, incluyendo el logotipo
+ <nav></nav>, para los enlaces de navegación
+ <section></section>, para tus artículos
+ <article></article>, para referencias y citas largas de otros artículos dentro de una sección de tu documento web
+ <aside></aside>, para las barras laterales y otro contenido relacionado solo tangencialmente con el de tu página
+ <footer></footer>, para tu información de contacto, nota de derechos de autor y similares

Es la misma teoría, solo que modificada. Eventualmente, ayudará a los navegadores a entender mejor cómo está organizado tu sitio.

Ten en cuenta, de todos modos, que los marcadores de HTML 5 no son compatibles aún con los navegadores antiguos sin un script que los faculte. Cubriremos eso en otro artículo.


Aprende + Computadores e Internet + Desarrollo web