Ir al contenido principal

Curso HTML 5: Nuevos elementos semánticos

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
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Efecto destello CSS3

En estas fechas tan señaladas a todos nos invade el espíritu navideño, y con él las ganas de decorar nuestra casa, nuestra habitación y por qué no, nuestra web. Por este motivo se me ocurrió crear un efecto destello de luz mediante CSS3 e imágenes para dar la calidez necesaria que nuestra web se merece. El efecto es sencillo, consiste en dos imágenes (una de fondo y otra que realizará el efecto) y una animación mediante CSS3. El resultado sería el siguiente: Podemos duplicar cuantas veces queramos la estrella y posicionarla donde mejor nos venga. A continuación os dejo el fragmento de código HTML y CSS para que lo probéis y hagáis las modificaciones que sean necesarias. HTML <div class="efectos"> <img src="directorio/imagen-01.jpg" alt="Navidad" class="background-navidad"> <img src="directorio/imagen-02.jpg" class="destello destello-01"> <img src="directorio/imagen-03.jpg" class=
Publicar un comentario
Leer más

Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder? Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input> , cuando introduzcamos un valor se sustituirá automáticamente. Sintaxis HTML Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo. <input type="text" name="example" placeholder="Ejemplo de Placeholder"> Debajo podemos ver un ejemplo del código anterior. Soporte en navegadores A continuación podemos ver una lista con el soporte en los principales navegadores :   Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+ Sintaxis CSS Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie. ::-webkit-input-placeholder { color: #2c3e50; } ::-moz-placeholder { /* Firefox 19+ */ color:
Publicar un comentario
Leer más

Curso HTML 5: Introducción

¿Qué es HTML5? HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar. El número 5 hace referencia a la quinta versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores. Una de las mejoras más significativas son las nuevas etiquetas que aportan un significado semántico , y por lo tanto tendrán un valor añadido en cuanto al posicionamiento web . Hay que tener presente que aún está en una fase experimental. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades. En la siguiente imagen podemos observar las diferencias entre HTML5 y HTML4/XHTML : De un vistazo podemos percatarnos como con HTML5 obtenemos una estructura más limpia y estandarizada, mediante que con HTML4/XHTML debíamos aplicarles identificadores o clases a todas las cajas y careciamos de un signifi
Publicar un comentario
Leer más