Nuevas tags HTML5

Continuamos con Sulamita, que nos enseña las nuevas tags de HTML5. Después de los ejemplos, ¡a aprender se ha dicho!

 

Introducción:

El nuevo estándar HTML5 define una serie de nuevas etiquetas (tags) que permiten enriquecer y simplificar las aplicaciones web. Estas tags pueden crear infinidad de posibilidades, así como la creación de mejores esquemas para su aplicación. Aquí está una lista y una pequeña descripción de las nuevas etiquetas presentadas por HTML5. A menos que se indique lo contrario, la mayoría de las etiquetas son compatibles con todos los principales navegadores.

 

Nuevos elementos para una mejor estructura:

<article>  - se crea una sección significativa de las historias, también es útil para la sindicación. Para más información y ejemplos en la etiqueta <article>, visita http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<aside> - sección considerada como ‘relacionados’, pero no son parte del contenido principal, al igual que las notas al margen o archivos. Para más información y ejemplos en la etiqueta <aside>, visita
http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<bdi> - significa aislamiento bi-direccional. La etiqueta <bdi> aísla una parte del texto para que pueda ser formateada en una dirección distinta de otro texto fuera de ella. Actualmente no está disponible con todos los navegadores más importantes.

<command> - define un comando (un botón de radio, una casilla de verificación o un botón de comando) que el usuario puede invocar. Actualmente solo está soportado por Internet Explorer.

<details> - especifica otros detalles, que el usuario puede mostrar u ocultar. Actualmente sólo es compatible con Chrome.

<summary> - define un título visible para el elemento <details>. El título se puede hacer clic para ver / ocultar los detalles. Actualmente sólo es compatible con Chrome.

<figure> - define los elementos gráficos contenidos en el documento. Para más información y ejemplos en la etiqueta <figure>, visita
http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<figcaption> -  define el texto del título para los elementos de la figura. Para más información y ejemplos en la etiqueta <figcaption>, visita
http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<footer> - representa un mensaje final, por lo general los derechos de autor o información de contacto. Para más información y ejemplos en la etiqueta <footer>, visita http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<header> - ayuda a crear el perfil del flujo de documentos dentro de la página. Para más información y ejemplos en la etiqueta <footer>, visita
http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<hgroup> - el título de una sección. El elemento se utiliza para agrupar un conjunto de elementos h1-h6, cuando el título tiene varios niveles, tales como subtítulos, títulos alternativos, o frases.

<mark> - piezas que destacan el texto.

<meter> - define una medida escalar dentro de un rango conocido, o un valor fraccionario.

<nav> - define el área donde están los enlaces de la página. Para más información y ejemplos en la etiqueta <nav>, visita http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<progress> - representa el progreso de una tarea. Actualmente compatible con Firefox, Opera y Chrome.

<ruby> - indica las anotaciones de rubí, que se utiliza para la tipografía de Asia oriental, para mostrar la pronunciación de los caracteres de Asia oriental. Para más información y ejemplos sobre <ruby>, visita http://appdeveloper.intel.com/en-us/article/html5-ruby-tag

<rt> - define una explicación o una pronunciación de caracteres (para la tipografía del este asiático) en una anotación de rubí.

<rp> - define lo que demuestra si un navegador es o no compatible con las anotaciones de rubí.

<section> - una sección genérica dentro del documento, con su propia estructura. Para más información y ejemplos en la etiqueta <section>, visita http://appdeveloper.intel.com/en-us/blog/2011/11/05/html5-section-tags

<time> - define un tiempo (24 horas), o una fecha, opcionalmente, con un tiempo de desplazamiento y una zona horaria. En la actualidad no es compatible con ninguno de los navegadores más importantes.

<wbr> - especifica el lugar en un texto en el que estaría mal agregar un salto de línea. Si una palabra es muy larga, esto indica que una separación de palabras sería posible en el navegador.

 

Nuevas etiquetas para elementos audiovisuales:

<audio> - define un flujo de sonido, la música o el audio.

<video> - define un recurso de vídeo.

<source> - se utiliza para especificar los recursos de medios múltiples para los elementos de audiovisuales, como <video> y <audio>. También permite especificar video alternativo / archivos de audio que el navegador puede elegir, en función de su tipo de medio o soporte de códec.

<embed> - define un área donde se incluye aplicaciones externas o contenido interactivo

<track> - especifica pistas de texto para los elementos audiovisuales. En la actualidad no es compatible con ninguno de los navegadores más importantes.

 

Nuevas etiquetas para hacer dibujos en una aplicación web:

<canvas> - define un área donde es posible sacar las cosas sobre la marcha a través de secuencias de comandos. Para más información sobre <canvas>, visitar
http://appdeveloper.intel.com/en-us/article/my-first-steps-towards-html5-trying-out-canvas

 

Nuevas etiquetas de formulario (form tags):

<datalist> - especifica una lista de opciones predefinidas para los controles de entrada. Se usa junto a <input>. Actualmente sólo es compatible con Firefox y Opera.

<keygen> - especifica un campo generador para claves con un formulario. Cuando se envía el formulario, la clave privada se almacena localmente, y la clave pública se envía al servidor.

<output> - representa el resultado de un cálculo, al igual que el realizado por una función.

 

Nuevos tipos de entrada de atributos:

Estos valores se añaden a los tipos existentes de la etiqueta <input>, que se utiliza para permitir al usuario introducir datos. Para más información, visita http://appdeveloper.intel.com/en-us/article/forms-encapsulator-support

tel - se utiliza para los números de teléfono

search - incluye un campo de texto utilizados para la búsqueda

url - indica un campo de texto para las direcciones URL

email  - se utiliza para introducir direcciones de correo electrónico

date - define un campo de fecha con selector

month - define un campo de fecha con el selector de fechas por meses

week - define un campo de fecha con el selector de fechas para la semana

time - define un campo de fecha con la hora, minutos, segundos y fracciones de segundos

datetime  - define un campo de fecha con selector de fecha y hora

datetime-local - define un campo de fecha con la fecha y el selector de tiempo, en la zona horaria local

number - define un campo de número con controlador

range - un rango de números con un control deslizante

color - un selector de color. Actualmente solo está soportado por Opera.

placeholder  - para ser utilizado con los elementos input y textarea. Representa una pista destinada a ayudar al usuario con la entrada de datos.

 

Más recursos:

1.    W3C HTML 5 Diff

2.    HTML5 New Elements

 

Artículo original disponible aquí.

如需更全面地了解编译器优化,请参阅优化注意事项