Tutorial HTML5: Cómo estructurar el contenido de la página
Ya hemos hablado en este tutorial sobre HTML5 de las etiquetas estructurales y de cómo se supone que funcionan pero ¿Cómo las utilizamos para estructurar el contenido de nuestro sitio web?
Antes de nada tendremos que entender cómo es un sitio web y más aún cómo queremos que sea nuestra página.
Lógicamente no es lo mismo un portfolio que un blog, ni una revista digital que una web corporativa. Entonces, ¿por dónde empezamos?
La estructura básica que todo sitio web debería tener
Miremos el sitio web que miremos todos comparten ciertos patrones que se utilizan desde hace años por una sencilla razón, funcionan bien.
Por ejemplo, ¿quién no ha visto un logotipo en la parte superior de la página? o ¿quién no ha encontrado miles de veces el copyright abajo de la página?.
Estos patrones funcionan y se rigen por una estructura básica que todo sitio web debería tener (bajo mi punto de vista).
Veamos esta estructura con una imagen:
¿Todavía no sabes a qué me refiero? Vayamos por partes:
- Cabecera: Generalmente contiene los datos característicos del sitio web; Logotipo, slogan, barra de navegación (menú) e incluso el buscador o botones sociales.
- Sidebar: Utilizo este término porque es el más conocido, también llamado barra lateral. Generalmente es donde se muestran contenidos relacionados, menúes alternativos, categorías (en los blogs)…
- Contenido: Es el contenido de la página propiamente dicho. En un blog las entradas, en un periódico las noticias, etc.
- Pié de página: Aunque hay muchas páginas web que obvian esta parte de la página web, para mí es algo imprescindible donde mostrar contenidos poco relevantes pero de obligada presentación; enlace al texto legal, copyright o licencias…
Como ejercicio te recomiendo que analices unas cuantas páginas web detenidamente y notarás estas secciones fácilmente. Bien es cierto que algunos de los elementos pueden cambiar de posición (contenido y sidebar entre sí) pero generalmente estarán dispuestos de la forma te indicaba.
¿Cómo hago la estructura en HTML?
Siempre recomiendo pensar al igual que leemos; de arriba hacia abajo y de izquierda a derecha.
Pensando de esta forma, sacaremos la estructura HTML5, por ejemplo de un blog, de una forma muy sencilla:
<header><!-- Logotipo, barra de navegación, buscador... --></header><section id="container"><!-- Entradas del blog --></section><aside><!-- Categorías, nube de etiquetas… --></aside><footer><!-- Copyright, aviso legal... --></footer> |
Pero…¿Y el contenido?
Sí, sé que te has dado cuenta que no hemos utilizado más que algunas de las etiquetas estructurales de las que disponemos, pero es que no hemos insertado apenas contenido.
A continuación os dejo el HTML del cuerpo de un blog:
<header> <h1>Blog de Katharsix</h1> <h2>Mira mamá, ¡Aprendo HTML5!</h2> </header><section id="container"><article class="post"><header> <h1>Aprender HTML5 de forma fácil</h1> <time datetime="2012-05-31">31.05.2012</time></header>Suspendisse accumsan dapibus molestie. Nulla et nibh turpis. Quisque sit amet lectus sapien, quis auctor odio. Donec faucibus neque nulla. Pellentesque feugiat gravida augue vitae tristique. Praesent adipiscing pellentesque iaculis. Quisque fermentum auctor lorem, nec pharetra nulla sagittis vitae. Nulla luctus vehicula tincidunt. <footer>Etiquetas: <a href="#"">Etiqueta 1</a>, <a href="#">Etiqueta 2</a> Categorías: <a href="#"">Categoría 1</a>, <a href="#">Categoría 2</a> <a href="#">6 comentarios</a></footer></article><article class="post"><header> <h1>Aprender HTML5 de forma fácil</h1> <time datetime="2012-05-31">31.05.2012</time></header>Suspendisse accumsan dapibus molestie. Nulla et nibh turpis. Quisque sit amet lectus sapien, quis auctor odio. Donec faucibus neque nulla. Pellentesque feugiat gravida augue vitae tristique. Praesent adipiscing pellentesque iaculis. Quisque fermentum auctor lorem, nec pharetra nulla sagittis vitae. Nulla luctus vehicula tincidunt. <footer>Etiquetas: <a href="#"">Etiqueta 1</a>, <a href="#">Etiqueta 2</a> Categorías: <a href="#"">Categoría 1</a>, <a href="#">Categoría 2</a> <a href="#">6 comentarios</a></footer></article></section><aside><nav id="categorias"> <ul> <li><a href="#">Categoría</a></li> <li><a href="#">Categoría</a></li> <li><a href="#">Categoría</a></li> <li><a href="#">Categoría</a></li> <li><a href="#">Categoría</a></li> </ul> </nav></aside><footer>Creado por <a title="Blog de diseño gráfico, desarrollo web, Android y fotografía" href="https://www.dariobf.com">Katharsix</a> </footer> |
Aquí deberás notar que en la cabecera mostramos el título del sitio web así como un slogan; en el contenido estamos mostrando dos entradas y que cada una de ella tiene su propia estructura interna (header, contenido y footer); que en el sidebar estamos mostrando sólo las categorías y en el pié de página o footer mostramos quién ha realizado el proyecto.
Si tienes cualquier duda no te lo pienses y déjanos un comentario, estaremos encantados de ayudarte.
