Ediciones ENI Editorial | líder en informática
Los contenedores de estructura
Objetivos
Este capítulo aborda el uso de contenedores. Estos elementos HTML permiten estructurar páginas web para obtener una visualización lógica y precisa. Los contenedores se denominan «semánticos», lo que significa que el contenido que albergan no debe ser de cualquier tipo. HTML ofrece contenedores «especializados» para mostrar, por ejemplo, una barra de navegación, una cabecera, un pie de página, etc.
Pero puede ocurrir que una página web utilice contenedores no semánticos, más genéricos. En este caso, HTML ofrece otros dos contenedores para estos usos.
El elemento <main>
El elemento <main> incluye el contenido principal de la página. Este contenido debe ser único y no debe repetirse dentro de la misma página. Además, la especificación HTML indica con precisión su contexto de uso, el elemento <main> no debe usarse como un elemento incluido en los otros elementos de la estructura, no debe anidarse en los elementos <article>, <aside>, <footer>, <header> o <nav>.
El elemento <header>
El elemento <header> permite insertar un área de visualización para las cabeceras. Estas cabeceras pueden usarse en varios lugares:
-
A nivel de la página, es la típica cabecera general, a menudo colocada en la parte superior de la pantalla, con un logotipo, un eslogan, una barra de navegación principal, etc.
-
A nivel de contenidos, permite tener una introducción al contenido que sigue, como la cabecera de un artículo, por ejemplo.
-
El elemento <header> también puede estar incluido en un pie de página (<footer>) o incluso en otro elemento <header>.
El elemento <header> puede contener cualquier tipo de elemento: títulos, párrafos, enlaces, imágenes, etc.
El elemento <footer>
El elemento <footer> permite insertar una zona para los pies de página. Su función semántica es la misma que para los encabezados. Estos pies de página se pueden configurar para toda la página o para una sección concreta, como un artículo. Cabe señalar que el uso de un <footer> no implica necesariamente el uso de un <header> y viceversa.
El elemento <aside>
El elemento <aside> permite mostrar contenido relacionado con un contenido principal al que acompaña. A menudo corresponde a las clásicas barras laterales (sidebar en inglés), áreas con componentes de interfaz (widgets), complementos de artículos o cualquier otro contenido textual.
Es habitual encontrar el contenido principal en la parte central de la página, y a la derecha, el contenido asociado visualizado mediante el elemento <aside>.
El elemento <nav>
El elemento <nav>, como su nombre indica, está dedicado a mostrar una barra de navegación con hipervínculos. Pero cuidado, no es obligatorio tener solo un área de navegación por página. Es perfectamente válido utilizar tantos elementos <nav> como sistemas de navegación diferentes haya en las páginas, siempre y cuando cada uno de ellos esté bien identificado.
Es posible incluir una navegación principal <nav> en un encabezado <header> y una navegación secundaria en un pie de página <footer>, por ejemplo.
El elemento <section>
El elemento <section> permite agrupar elementos que comparten una misma temática. De este modo, es posible reunir dentro de un solo contenedor un contenido estructurado, con su propio encabezado y su pie. El uso de varios elementos <section> distinguirá, por ejemplo, varias partes, varias secciones dentro de la misma página, con otros elementos estructurales anidados.
El elemento <article>
El elemento <article> le permite insertar un contenido autónomo. Se considera autónomo porque puede reutilizarse en otras partes del sitio sin que su comprensión se vea afectada. El uso más habitual corresponde al propio nombre del elemento: la creación de artículos de blog o de noticias.
El elemento <search>
El elemento <search> permite agrupar todos los elementos relacionados con una búsqueda textual dentro del sitio. Este elemento puede contener secciones, títulos, párrafos, el formulario de búsqueda y los resultados obtenidos. No está pensado para contener únicamente los resultados, sino todo lo relacionado con la funcionalidad de búsqueda
El elemento <div>
El elemento <div> es uno de los contenedores más antiguos de HTML. Permite crear una división estructural en la página. En estas divisiones, se puede insertar cualquier contenido e incluso otras divisiones <div>. También se pueden anidar otros elementos HTML, como párrafos, listas, imágenes... Estas divisiones se utilizan para maquetar contenidos mediante contenedores «neutros», es decir, sin contenido semántico definido.
El elemento <span>
El elemento <span> se usa a menudo, por ejemplo, para establecer una división dentro de un párrafo de texto. Es muy útil para aplicar un estilo particular a una parte del texto que, por lo general, tiene otro formato.
He aquí un ejemplo concreto en el que se desea aplicar un fondo gris y un borde fino a una parte del texto dentro de un párrafo.
Este es el selector de CSS:
.fondo-gris {
background-color: #eee;
padding: 0 5px;
border: 1px solid #333;
} Y esta es su aplicación en el código HTML:
<p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus,
<span class="fondo-gris">porta ac consectetur ac vestibulum</span>
at eros. Donec sed odio...</p> Una estructura semántica simple
He aquí una estructura semántica muy simple para un primer ejemplo:
Estos son los elementos HTML utilizados:
-
Un encabezado <header> en la parte superior, con un logotipo y un eslogan, por ejemplo.
-
Una barra de navegación <nav> en el lado izquierdo de la página.
-
Todas las noticias del sitio se pueden colocar en elementos <article>.
-
Por último, el pie de página <footer> puede contener avisos legales, enlaces de contacto, etc.