Para facilitar la aplicación de estilos CSS, HTML5 introduce una serie de secciones identificadoras, que no hacen nada por si mismas y solo son para agrupar etiquetas por secciones. En principio son etiquetas DIV con ID.
La mayoría de páginas HTML disponen de estructuras complejas formadas por varias columnas de contenidos y otro tipo de divisiones. Usando exclusivamente HTML no es posible crear estas estructuras complejas, ya que es imprescindible emplear las hojas de estilos CSS. No obstante, CSS necesitan la ayuda de HTML para crear los diseños más avanzados. En concreto, las etiquetas HTML se encarga de agrupar los elementos de la página en diferentes divisiones en función de su finalidad: cabecera, contenidos, pie, navegación, etc.
| <header> |
| <nav> |
| <section>
<aside>
<article 1>
<article 2>
|
| <footer> |
Contiene todos los elementos invariable en la parte superio de cada pagina como son: logotipo, banners, busqueda, etc
<!DOCTYPE html>
<HTML lang="es">
<HEAD>
...
</HEAD>
<BODY>
<Header>
...
</Header>
<Nav>
...
</Nav>
<Section>
<Aside>
...
</Aside>
...
<Article>
...
</Article>
<Hgroup>
...
</Hgroup>
...
</Section>
<Footer>
...
</Forter>
</BODY>
</HTML>
Representa una sección de una página con enlaces a otras páginas o a partes dentro de la página: una sección con enlaces 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 de la navegación son apropiadas para ser utilizadas co el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>.
Se usa 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.
Contiene 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>.
Contiene un grupo de artículos introductorios o de navegación.
Contiene 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 usarse 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.
Contiene todos los elementos invariable en la parte inferior de cada pagina como son: Copyright, política privacidad, términos de uso, etc