HTML5 (Hyper Text Markup Language, versión 5) es un término genérico que agrupa las tecnologías web más recientes, así como la actual versión de HTML . La recomendación HTML5 por W3C se lanzó el 28 de octubre de 2014.
html5 es la tecnología central lenguaje de marcado de internet usada para estructurar y presentar contenido para la World Wide Web. A partir del 28 Octubre 2014 se lanzó la versión final y completa de la quinta revisión del estándar HTML por el World Wide Web Consortium (W3C). La versión anterior HTML4 fue estandarizada en 1997. El 18 de enero de 2011, el W3C introdujo el logo para representar el uso o interés en HTML5. A diferencia de otros distintivos emitidos previamente por el W3C este no implica validez o conformidad con cierto estándar. Desde el 1 de abril este logo es oficial. La revisión más reciente de la especificación HTML es HTML5.2
Nota: "El término [tag: html5] es ampliamente usado como una palabra de moda para referirse a las tecnologías Web modernas, muchas de ellas (aunque no todas ni mucho menos) son desarrolladas en el WHATWG, en algunos casos en conjunto con el W3C y el IETF." (WHATWG Is this HTML5?)
Comparado con sus predecesores (HTML 4.1 y XHTML 1.0) HTML5 introduce nuevos elementos y algunas características JavaScript, incluyendo:
- <video> y <audio> elementos para la reproducción multimedia nativa.
- <canvas> elementos para la generación de gráficos.
- Nuevos tipos de
<input>
. - Nuevos elementos estructurales semánticos como <header>, <footer>, <nav>, <section> y <article>.
- Funcionalidad intrínseca para arrastrar y soltar.
- APIs de almacenamiento local.
- API para aplicaciones web offline.
- APIs para dispositivos como Camera API, Location API etc.
- 3D, gráficos y efectos.
- WAI-ARIA.
La definición de HTML5 ha sido declarada completa en diciembre de 2012 (junto con Canvas 2D Canvas 2D), y en la próxima ronda de estándares W3C, HTML está disponible como el proyecto HTML5.1.
HTML5 elemento<video>
El elemento <video>
especifica video, como un clip de una película o video en streaming.
Actualmente hay 3 formatos de video compatibles con el elemento <video>
: MP4, WebM, and Ogg:
El elemento <video>
es soportado por Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
Nota: Internet Explorer 8 y versiones anteriores no soportan el elemento <video>
.
HTML5 elemento <audio>
El elemento <audio>
define sonido como música u otros medios de transmisión de audio.
Actualmente hay 3 formatos de audio compatibles con el elemento <audio>
: MP3, WAV, and Ogg:
El elemento <audio>
es soportado por Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
Nota: Internet Explorer 8 y versiones anteriores no soportan el elemento ‘’.
HTML5 elemento <canvas>
El elemento <canvas>
es usado para dibujar gráficos sobre la marcha, vía scripting (normalmente JavaScript).
El elemento <canvas>
es solamente un contenedor para gráficos. Debes usar un script para dibujar los gráficos.
Canvas tienes varios métodos para dibujar trazados, cuadriláteros, círculos, textos y añadir imágenes.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari soportan el elemento <canvas>
.
Nota: Internet Explorer 8 y versiones anteriores no soportan el elemento ‘’.
HTML5 Nuevos elementos de formulario
HTML5 tiene los siguientes nuevos elementos de formulario:
<datalist>
<keygen>
<output>
Nota: No todos los navegadores soportan los nuevos elementos de formulario y aunque puedes empezar ya a usarlos, si no están soportados se comportaran como campos de texto regulares.
HTML5 elemento <datalist>
:
El elemento <datalist>
describe una lista predefinida de opciones para un elemento <input>
.
El elemento <datalist>
se usa para proveer de una función de “autocompletado” a elementos <input>
. Los usuarios podrán ver una lista desplegable de opciones predefinidas a medida que introducen datos.
Usa el atributo ‘list’ del elemento <input>
para unirlo a un elemento<datalist>
.
HTML5 elemento <keygen>
:
El propósito del elemento <keygen>
es proporcionar una manera segura de autentificar usuarios.
El elemento <keygen>
especifica un campo generador de claves dentro de un formulario.
Cuando el formulario es enviado se generan 2 claves, una privada y otra pública. La clave privada es guardada de manera local y la pública es enviada al servidor. La clave pública puede ser usada para generar un certificado en el cliente para autentificar al usuario en el futuro.
HTML5 elemento <output>
:
El elemento <output>
representa el resultado de un cálculo (como uno realizado por un script).
HTML5 nuevos atributos en formularios
HTML5 tiene multitud de nuevos atributos para <form>
e <input>
.
Nuevos atributos para <form>
:
- autocomplete
- novalidate
Nuevos atributos para <input>
:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
1. Atributo autocomplete
El atributo autocomplete
especifica cuándo un campo de un formulario o de entrada debe tener autocompletar activado o no (on/off).
Cuando autocompletar está activado, el navegador completa automáticamente el campo con valores basados en valores introducidos por el usuario previamente.
Consejo: Es posible tener autcomplete
"on" para el formulario y "off" para campos de entrada específicos, o al revés.
Nota: El atributo autocomplete
funciona con elemetos <form>
y los siguientes tipos de <input>
: text, search, url, tel, email, password, datepickers, range y color.
2. Atributo novalidate
El atributo novalidate
es de tipo booleano.
Cuando está presente, especifica que el dato de entrada no debería ser validado al enviarse.
3. Atributo autofocus
El atributo autofocus
es de tipo booleano.
Cuando está presente, especifica que un elemento <input>
debe tener el foco automáticamente cuando la pagina carga.
4. Atributo form
El atributo form
especifica a los formularios a los que el elemento <input>
pertenece.
Consejo: Para hacer referencia a más de un formulario, usa una lista de ids de formularios separadas por espacios.
5. Atributo formaction
El atributo formaction
especifica la URL de un archivo que procesa la información enviada por el formulario.
El atributo formaction
anula el atributo action
de los elementos <form>
.
Nota: El atributo formaction
puede ser usado con type="submit"
y type="image"
.
6. Atributo formenctype
El atributo formenctype
especifica cómo la información del formulario debe ser codificada al enviarse al servidor (solo formularios con method="post").
El atributo formenctype
anula el atributo enctype
de los elementos <form>
.
Nota: El atributo formenctype
puede ser usado con type="submit" y type="image".
7. Atributo formmethod
El atributo formmethod
nos permite variar el método de envio de información de formularios.
El atributo formmethod
anula el atributo method
de los elementos<form>
.
Nota: El atributo formmethod
puede ser usado con type="submit"
y type="image"
.
8. Atributo formnovalidate
El atributo formnovalidate
es de tipo booleano.
Cuando está presente especifica que los elementos <input>
no deben ser validados al enviarse.
El atributo formnovalidate
anula el atributo novalidate
de los elementos <form>
,
Nota: El atributo formnovalidate
puede ser usado con type="submit"
.
9. Atributo formtarget
EL atributo formtarget
especifica un nombre o palabra clave que indica dónde se muestra la respuesta recibida tras enviar el formulario.
El atributo formtarget
anula el atributo target
de los elementos <form>
.
Nota: El atributo formtarget
puede ser usado con type="submit"
y type="image"
.
10. Atributos height
y width
Los atributos height
y width
especifican el alto y ancho de un elemento <input>
.
Nota: los atributos height
y width
son solo usados con <input type="image">
.
**Consejo: ** Siempre especifica los atributos height
y width
para las imágenes.
Si estos atributos están especificados el espacio requerido para la imagen es reservado cuando la página es cargada. Sin embargo, sin estos atributos, el navegar no sabe el tamaño de la imagen y no puede reservar el espacio apropiado lo que hace que el diseño de la página vaya cambiando mientras carga (mientras las imágenes van cargando).
11. Atributo list
El atributo list
hace referencia a un elemento<datalist>
que contiene opciones predefinidas para un elemento <input>
.
12. Atributo min
y max
Los atributos min
y max
especifican el mínimo y máximo valor para un elemento <input>
.
Nota: Los atributos min
y max
funcionan con los siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time y week.
13. Atributo multiple
El atributo multiple
es de tipo booleano.
Cuando está presente especifica que el usuario tiene permitido escribir más de un valor en el elemento <input>
.
Nota: El atributo multiple
funciona con los siguientes tipos de entrada: email y file.
14. Atributo pattern
El atributo pattern
especifica una expresión regular que es comparada con el valor del elemento <input>
.
Nota: El atributo pattern
funciona con los siguiente tipo de entrada: text, search, url, tel, email y password.
15. Atributo placeholder
El atributo placeholder
especifica una pista corta que describe el valor esperado en el campo de entrada. (Ej. Un valor de ejemplo o una descripción corta del formato esperado).
La pista es mostrada en el campo de entrada cuando esta vacío y desaparece cuando el campo tiene el foco.
Nota: El atributo placeholder
funciona con los siguientes tipos de entrada: text, search, url, tel, email y password.
16. Atributo required
El atributo required
es de tipo booleano.
Cuando está presente, especifica que el campo de entrada debe ser rellenado antes de que el formulario sea enviado.
Nota: El atributo required
funciona con los siguientes tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio y file.
17. Atributo step
El atributo step
especifica los intervalos de números válidos para un elemento <input>
,
Ejemplo: Si step
tiene valor 3
, los números válidos podrían ser -3
, 0
, 3
, 6
, etc.
Consejo: El atributo step
puede ser usado junto con los atributos max
y min
para crear un rango de valores validos.
Nota: El atributo step
funciona con los siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time y week.
Hay multitud de páginas de introducción a HTML5 Dive into HTML5 o [HTML5 Rocks] (http://www.html5rocks.com).
Cada característica tiene diferentes niveles de soporte según el navegador. CanIUse.com y HTML5Test tienen mucha información sobra la compatibilidad entre navegadores. HTML5 incluye estándares anteriores, por lo tanto es compatible con los contenidos anterior aunque los elementos en desuso están clasificados como obsoletos. El [tag: W3c] ha sacado las especificaciones para HTML5 [aquí] (http://www.w3.org/TR/html5/).
Recursos
- Mozilla MDN
- html5rocks
- HTML5 Introduction
- HTML5 Tags Reference
- HTML5 Wikipedia Article
- W3C HTML5 Documentation
- HTML5 Logo FAQ