Elementos estructurales de una página HTML5

Estos son los elementos que definen una estructura dentro de una página:

SECTION

La nueva etiqueta <section> tiene como cometido el agrupar elementos relacionados entre sí de forma temática. La regla para saber cuándo usar el nuevo elemento section es sencilla, tan solo debemos preguntarnos: “¿está todo el contenido que va a albergar relacionado entre sí?”.

 

Por ejemplo si quisiéramos desarrollar la página principal de YouTube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios.

ARTICLE

Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos.

 

ASIDE

Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En la página principal de un diario la encuesta del día o una publicidad podría ser un aside.

 

ADDRESS

La etiqueta <address> la podemos utilizar para indicar información de contacto de un documento, tales como los nombres de los autores y los enlace a sus correspondientes páginas y e-mail de contacto. Por ejemplo en HTML5 cada sección <article> podrá tener su elemento address particular, ofreciendo información de cada artículo por separado.

 

HEADER

Una página web debe definir un header principal donde normalmente irá el logo o el nombre del sitio y seguramente un menú de navegación. También podría utilizarse dentro de una etiqueta <section>.

Así, el elemento header suele aparecer por regla general al principio de un documento o section, pero realmente no tiene por qué. Se define por su contenido más que por su posición.

 

FOOTER

Igual que ocurre con el elemento header, el elemento footer suena como si describiera su posición, pero al igual que con header lo que define es su contenido. El elemento footer debe contener información sobre su elemento contenedor: quien lo ha escrito, información de propiedad intelectual, enlaces, etc.

 

NAV

El elemento nav contiene información sobre la navegación por el sitio web, usualmente una lista de enlaces.

 

DIV

HTML todavía posee la vieja etiqueta div que se usa para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico.

Por lo tanto nuestro deber es usarla como ayuda a la creación de la estructura de página: como base para crear el layout de nuestras páginas, siempre y cuando no exista otra etiqueta de conjunto que represente mejor este papel.

 

En el sitio de desarrolladores de la fundación Mozilla se encuentra una lista con todas las etiquetas que pueden utilizarse en una página HTML5:

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos