Nuevos elementos semánticos de HTML5

estructura-html5

 

 

 

 

 

 

 

 

 

 

Para añadir contenido y proporcionar una estructura básica, voy a detallar en este post los elementos de HTML5 para la construcción  del diseño global de nuestro sitio.

El elemento header

El elemento header representa “un grupo de ayudas de navegación”. Es decir que cualquiera que sea el contenido que estuviera acostumbrado a incluir dentro de <div id= “header”> ahora lo tiene que incluir en el nuevo elemento header.

Lo más novedoso de este elemento que podemos incorporar un header en cada sección del contenido, más concretamente cualquier bloque de contenido que pueda necesitar su propio encabezado.

Un elemento header se puede se situará frecuentemente al principio de una página o sección.

Un elemento header se puede utilizar para incluir contenido introductorio o ayudas de navegación que son específicas de cualquier sección de una página, o bien que se aplican a toda la página o ambas.

El elemento section

El elemento section describe como una representación de una sección genérica de un documento o aplicación. Una sección , en este contexto, es una agrupación temática de contenido, normalmente con un encabezado.

El contenido del elemento section debería ser temático, por lo que sería incorrecto emplearlo de forma genérica para agrupar piezas no relacionadas con el contenido.

Ejemplos de uso para elementos section:

  • Secciones individuales de una interfaz agrupada en pestañas
  • Segmentos de una página “sobre mi” “contactar”
  • Diferentes partes de una extensa página “términos de servicio”
  • Varias secciones de un sitio web de noticias: artículos, novedades, noticias internacionales, deportes…

Es posible anidar elementos section dentro de elementos section ya existentes. Ejemplo una web de noticias online, el section de noticias del mundo se podía dividir aún más en un sectión para cada región del mundo.

El elemento article

El elemento article representa una composición autónoma en un documento, página, aplicación o sitio y, en principio  se distribuye o reutiliza de forma independiente, por ejemplo en sindicación.

El elemento article es similar al elemento section pero la diferencia principal es mientras un section puede contener cualquier contenido que se pueda agrupar temáticamente, un article debe ser una solo pieza de contenido que pueda valerse por sí mismo por ejemplo si un contenido se puede volver a publicar en otro sitio sin ser modificado o enviado como una actualización ( RSS, twitter, facebook), tiene cualidades de un artículo.

Usos del elemento article:

  • Mensajes de foro
  • Artículos de revista o periódicos
  • Entradas de blog
  • Comentarios enviados por usuarios

Los elementos article también se pueden anidar. Otra opción disponible en anidar a una section dentro de un article y viceversa.

El elemento nav

El elemento nav representa un grupo de vínculos de navegación. Aunque el uso más común será el de englobar una lista no ordenada de vínculos. También se podría situar alrededor de un párrafo de texto que contenga los principales vínculos de navegación para una página o sección de la misma

No se recomienda que el elemento nav se utilice para una lista breve de vínculos en un pie de página. En cualquier caso , el elemento nav se debería reservar para la nevegación

El elemento aside

Este elemento aside representa una parte de la página que está relacionada con el contenido. Se podría utilizar para englobar una parte del contenido que es tangencial a:

  • Un contenido específico independiente (como un artículo o sección)
  • Toda una página o documento, como se acostumbra a hacer  cuando se añade una “barra lateral” a una página o sitio web.

El elemento aside nunca se debería emplear para englobar secciones de la página que forman parte del contenido principal.
Usos posibles:

  • Barra lateral
  • Lista secundaría de vínculos
  • Bloque de publicidad

El elemento Footer

El elemento footer representa un pie de página para la sección de contenido. Una página puede constar de varios footer en una misma página y debería usarlos para englobar la sección de su página que normalmente situaría dentro de

Usos más frecuentes:
  • Información de copyright
  • listas de vínculos relacionados
  • información del autor

Fuente:
HTML5 y CSS3 (Manuales Tecnicos (anaya)) [Tapa Blanda]
Alexis Goldstein (Autor), Louis Lazaris (Autor), Estelle Weyl (Autor): http://bit.ly/GRqRkw

Post: Diana Redondo

Anuncios
Esta entrada fue publicada en HTML5.

Un comentario el “Nuevos elementos semánticos de HTML5

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s