Tutorial HTML5: Cómo estructurar el contenido de la página

Tutorial HTML5

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:
estructura pagina web

¿Todavía no sabes a qué me refiero? Vayamos por partes:

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="#&quot;">Etiqueta 1</a>, <a href="#">Etiqueta 2</a>
 
Categorías: <a href="#&quot;">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="#&quot;">Etiqueta 1</a>, <a href="#">Etiqueta 2</a>
 
Categorías: <a href="#&quot;">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.

Seguir con el tutorial

Volver al índice
Anterior: Etiquetas más comunes

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información