Html Manual

Mejor estructura

Actualmente es abusivo el uso de elementos DIV para estructurar una

web en bloques. El HTML5 nos brinda varios elementos que perfeccionan

esta estructuración estableciendo qué es cada sección, eliminando así DIV

innecesarios. Este cambio en la semántica hace que la estructura de la

web sea más coherente y fácil de entender por otras personas y los

navegadores podrán darle más importancia a según qué secciones de la

web facilitándole además la tarea a los buscadores, así como cualquier

otra aplicación que interprete sitios web. Las webs se dividirán en los

siguientes elementos:

• <section></section>- Se utiliza para representar una sección

“general” dentro de un documento o aplicación, como un capítulo

de un libro. Puede contener subsecciones y si lo acompañamos de

h1-h6 podemos estructurar mejor toda la página creando

jerarquías del contenido, algo mu favorable para el buen

posicionamiento web.

<article></article>- El elemento de artículo representa un

componente de una página que consiste en una composición

autónoma en un documento, página, aplicación, o sitio web con la

intención de que pueda ser reutilizado y repetido. Podría utilizarse

en los artículos de los foros, una revista o el artículo de periódico,

una entrada de un blog, un comentario escrito por un usuario, un

widget interactivo o gadget, o cualquier otro artículo

independiente de contenido.

Cuando los elementos de <article> son anidados, los elementos

de <article> interiores representan los artículos que en principio

son relacionados con el contenido del artículo externo. Por

ejemplo, un artículo de un blog que permite comentarios de

usuario, dichos comentarios se podrían representar con <article>.

• <aside></aside>- Representa una sección de la página que

abarca un contenido tangencialmente relacionado con el

contenido que lo rodea, por lo que se le puede considerar un

contenido independiente. Este elemento puede utilizarse para

efectos tipográficos, barras laterales, elementos publicitarios, para

grupos de elementos de la navegación, u otro contenido que se

considere separado del contenido principal de la página.

• <header></header>- Elemento <header> representa un grupo

de artículos introductorios o de navegación.

• <nav></nav>- El elemento <nav> representa una sección de

una página que es un link a otras páginas o a partes dentro de la

página: una sección con links de navegación.

No todos los grupos de enlaces en una página tienen que estar en

un elemento <nav>, sólo las secciones que consisten en bloques

principales

...