[HTML5] Nuevos elementos semánticos en HTML5

En el anterior post sobre HTML5 se hizo una pequeña introducción a qué es HTML5, además mención algunas herramientas que uso generalmente (ver post), en este artículo quiero mostrar algunos de los nuevos elementos semánticos disponibles en HTML5.

Y los elementos son:

· section: Se utiliza para una sección genérica de una página, sirve para agrupar contenido de un mismo tema.

· header: Utilizado para servir de contenedor para la información de cabecera de la página, generalmente esa información es el logo, nombre, lema y vínculos de navegación.

· hgroup: Utilizado para agrupar un grupo de elementos de encabezado (h1 – h6), actúa como un subheader.

· footer: Utilizado como contenedor para la sección de información de la parte inferior de la página, generalmente datos de contacto.

· nav: Utilizado para servir de contenedor para links de navegación, un ejemplo puede ser el menú de navegación del sitio.

· article: Utilizado para servir como contenedor para el contenido, un ejemplo puede ser un post en un blog.

· aside: Utilizado como contenedor para el contenido relacionado, es decir se puede manejar como un sidebar.

Un ejemplo (y aclaro es solo una posible distribución) de cómo sería la estructura de una página en HTML5 es:

Imagen1

Espero les sea de utilidad, en el próximo post hablaré sobre los nuevos tipos de input.

You may also like...

3 Responses

  1. Maik says:

    Howdy! I know this is somewhat off topic but I was wondering if you knew where I could find a captcha
    plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one?
    Thanks a lot!

  1. February 22, 2012

    […] [HTML5] Nuevos elementos semánticos en HTML5 […]

  2. December 19, 2012

    […] [HTML5] Nuevos elementos semánticos en HTML5 […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: