Curso HTML 5: Nuevos elementos semánticos

En la anterior entrada aprendimos qué es HTML 5 y algunas de las novedades que trae consigo. Comprendimos la nueva estructura de la que se van a componer las páginas y su significado semántico para el posicionamiento web. Pero aún hay más...

A continuación puedes observar un listado con los nuevos elementos HTML 5 y su soporte en diferentes navegadores:

Nuevos elementos semánticos/estructurales

article: Contendrá texto distribuido independientemente de la web. Es decir, está pensado para albergar noticias, comentarios, entradas...

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

aside: Similar a a un sidebar, donde debe haber contenido relacionado al contenido de la web.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

bdi: Aísla una parte de texto que puede ser formateado en una dirección distinta de otro texto fuera de ella.

  Chrome 16.0   Internet Explorer   Firefox 10.0   Safari   Opera

details: Especifica detalles adicionales que el usuario puede mostrar u ocultar.

  Chrome 12.0   Internet Explorer   Firefox   Safari 6.0   Opera 15.0

dialog: Define un cuadro de diálogo.

  Chrome Canary   Internet Explorer   Firefox   Safari 6.0   Opera

figcaption: Es el encargado de darle un título descriptivo a la etiqueta figure.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

figure: Representa un contenido independiente.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

footer: Píe de página.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

header: Cabecera de la página.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

main: El contenido principal de un documento.

  Chrome 6.0   Internet Explorer   Firefox 4.0   Safari 5.0   Opera 11.1

mark: Resalta el texto deseado.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

menuitem: Crea un menú contextual (pulsando botón derecho del ratón sobre el elemento) en el que podemos incluir varias opciones.

  Chrome   Internet Explorer   Firefox 8.0   Safari   Opera

meter: Representa una escala de valores con un resultado conocido.

  Chrome 8.0   Internet Explorer   Firefox 6.0   Safari 6.0   Opera 11.0

nav: Dentro de esta etiqueta incluiremos los enlaces para que el usuario navegue entre nuestras diferentes secciones.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

progress: Representa una barra de progreso.

  Chrome 8.0   Internet Explorer 10.0   Firefox 16.0   Safari 6.0   Opera 11.0

rp: Consiste en mostrar una aclaración del contenido si el navegador no soporta anotaciones en Ruby.

  Chrome 5.0   Internet Explorer 5.5   Firefox   Safari 5.0   Opera 15.0

rt: Define una explicación sobre la pronunciación de los caracteres en tipografías como la asiática.

  Chrome 5.0   Internet Explorer 5.5   Firefox   Safari 5.0   Opera 15.0

ruby: Las anotaciones Ruby son utilizadas para tipografías asiáticas, para mostrar la pronunciación de los caracteres.

  Chrome 5.0   Internet Explorer 5.5   Firefox   Safari 5.0   Opera 15.0

section: Una sección es la agrupación de contenido sobre una temática, convenientemente con un encabezado.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

summary: Crea una cabecera para la etiqueta <details>.

  Chrome 12.0   Internet Explorer   Firefox   Safari 6.0   Opera 15.0

time: Su funcionamiento básicamente es para interacciones producir mejores resultados en los motores de búsqueda.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

wbr: Si la palabra o frase que introducimos es demasiado larga y el ancho total es menor, con esta etiqueta crearemos un salto de línea cuando sea necesario.

  Chrome 1.0   Internet Explorer   Firefox 3.0   Safari 4.0   Opera 11.7