Elementos HTML5 básicos para seccionar documentos web

Html5 introdujo varios elementos que podemos utilizar para seccionar nuestros sitios web, para marcar y diferenciar secciones de la misma, cuando utilizamos estos elementos de HTML5 estamos enriqueciendo nuestro proyecto ya que estamos dando un significado semántico de alto valor que los navegadores modernos sabrán interpretar rápidamente el contenido y también sabrá como esta estructurado el sitio web. En esta entrada vamos a ver como y cuando debemos utilizar estos elementos para seccionar nuestra pagina web basada en HTML5.

Elemento <main>

Este nuevo elemento de HTML5 define el contenido principal o mas importante en el documento. Este elemento es único y solo debe haber uno por pagina, tampoco debe ser descendiente de elementos como <article>, <aside>, <footer>, <header>, o <nav> ya que su papel es de elemento principal como su nombre lo indica, después de body por ejemplo.

Ejemplo de uso:

Uso del elemento main de HTML5

Especificaciones elemento <main>

WHATWG HTML Living StandardHTML5.1 (draft)HTML5

Soporte en los navegadores web

https://developer.mozilla.org/es/docs/HTML/Elemento/main#Browser_compatibility

 

Elemento <article>

el elemento <article> debe contener un fragmento de contenido autónomo que se puede distribuir fuera del contexto de la pagina. Aquí podemos incluir cosas como los artículos, noticias, entradas de blog o comentarios de los usuarios. En otras palabras el elemento article representa una composición autónoma en el documento que esta destinada a ser independiente y reutilizable Ejemplo: en el home de un blog, cada entrada podría ser dentro de etiquetas articles, o el comentario de un usuario a un post, un widget interactivo o cualquier otro elemento independiente del contenido.

Ejemplo de uso:

Uso del Elemento article HTML5

Especificaciones elemento <article>

WHATWG HTML Living StandardHTML5

Soporte en los navegadores web

https://developer.mozilla.org/es/docs/HTML/Elemento/article#Browser_compatibility

 

Elemento <section>

El elemento <section> representa una sección genérica de un documento, una agrupación temática de contenido, también con el elemento section agrupamos contenidos relacionado por lo general con su respectivo titulo en una etiqueta de encabezado de HTML.
Utilizamos section para dividir contenido relacionado dentro de un articulo Ejemplo: marcar capítulos, especificar secciones en pestañas, citar noticias etc.

Ejemplo de uso:

Uso de elemento section HTML5

Especificaciones elemento <section>

WHATWG HTML Living StandardHTML5

Soporte en los navegadores web

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section#Browser_compatibility

 

Elemento <aside>

Este elemento aside lo utilizamos para representar contenido que es tangencialmente relacionado con el contenido alrededor de ella. Ejemplo, las barras laterales de las paginas web que a menudo contienen explicaciones o contenido secundarios, anuncios informativos del sitio, biografías de autores o enlaces relacionados.
Ahora, este elemento aside lo podemos incluir dentro de una sección, articulo u otra parte de nuestro sitio web.

Ejemplo de uso:

Uso Elemento aside de HTML5

Especificaciones elemento <aside>

WHATWG HTML Living StandardHTML5

Soporte en los navegadores web

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside#Browser_compatibility

 

Elemento <header>

El elemento header lo utilizamos para representar un contenido de introducción de una pagina web o una sección de la pagina por ejemplo un articulo. El elemento header suele tener su propio encabezado y a veces algunos metadatos relevantes y de acuerdo al contenido el cual hace parte. Básicamente dentro de este elemento es donde colocamos el logotipo, los títulos de encabezados, el buscador etc.
El elemento header por lo general lo asociaremos con la sección o contenido cercano aunque su uso general se da como padre directo en la estructura de la pagina web.

Uso elemento header de html5

Especificaciones elemento <header>

WHATWG HTML Living StandardHTML5

Soporte en los navegadores web

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header#Browser_compatibility

 

Elemento <nav>

Utilizamos el elemento nav para marcar una colección de enlaces a paginas internas o externas, este elemento nav se utiliza principalmente para la navegación principal del sito pero también es una buena opción utilizar este elemento para otros conjunto de enlaces como por Ejemplo: un blogroll.

Uso elemento nav html5

Especificaciones elemento <nav>

WHATWG HTML Living StandardHTML5

Soporte en los navegadores web

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#Browser_compatibility

 

Elemento <footer>

Utilizamos el elemento footer para representar la información sobre una sección tal como autor, información de copyright o enlaces de sitios web relacionados. Generalmente utilizamos este elemento para el pie de pagina general del sitio, pero también se puede utilizar para pie de artículos o secciones del sitio web.

Elemento footer de html5

Especificaciones elemento <footer>

WHATWG HTML Living Standard HTML5

Soporte en los navegadores web

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer#Browser_compatibility

Los anteriores elemento main, article, section, aside, header, nav y footer son los que utilizamos básicamente para dividir partes de una pagina web, los buenos navegadores leeran estas secciones y  sabrán que significara cada parte y le dará su debida importancia o relevancia, esto potenciara la semántica base de la pagina.

Link de importancias para este tema:

www.w3schools.com
www.w3.org
www.developer.mozilla.org

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. marzo 21, 2014

    […] Nuevo Pingback […]