(HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. El desarrollo de este código es regulado por el Consorcio W3C.
- Nuevos elementos:
HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejoras en el elemento <canvas>
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web.
- Diferencias con HTML 5 y XHTML:
Nuevos elementos: article, dialog
Nuevos atributos: media, ping, autofocus, inputmode, min, max, pattern
Elementos eliminados: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u
Atributos eliminados:
• rev y charset en <link /> y <a />
• target en <link />
• nohref en <area />
• profile en <head />
• version en <html />
• name en <map />
• scheme en <meta />
• archive, classid, codetype, declare y standby en <object />
• valuetype en <param />
• charset en <script />
• summary
• header, axis y abbr en <td /> y <th />
- Ejemplos de códigos HTML 5
Código HTML 5 para reproducir audio y video sin flash, quicktime ni silverlight:
<htm>
<head>
<title>fuente de múltiples elementos</title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
</audio>
<video id="video" width="640" height="480" volume=".7" controls autoplay>
<source src="video.ogg" type="video/ogg"> </source>
</video>
</body>
</html>
Varias grandes empresas tecnológicas también han manifestado ya su apoyo a HTML5, como Google, Microsoft o Apple, estos últimos de los que más y muestra de ello es que han decidido darle ahora otro nuevo empujón de la mejor manera posible: mostrándolo en acción.
Concretamente siete ejemplos que demuestran la potencia de HTML5 y CSS3 han lanzado en un nuevo apartado de la web oficial de la empresa entre los que encontramos de todo: un visor de vídeos que nos permite “jugar” con él, un editor de fuentes, una galería de imágenes y ejemplos de las posibilidades respecto a transiciones de imágenes, vistas de 360 grados y audio.
Por supuesto todo esto sin necesidad alguna de instalar complementos adicionales y con unos consumos más que aceptables.
- Nueva estructura:
Tomando en cuenta la utilización que damos a algunos elementos div con identificadores muy comunes, los desarrolladores crearon una nueva estructura de elementos que cambiarán la manera de elaborar el contenido (sobre todo de blogs) y la manera en que los buscadores lo analizan.
Se trata de las etiquetas:
- article: Una entrada independiente en un blog, sitio o revista.
- footer: El final de la página, donde se incluyen los modos de contacto, etc.
- header: No el elemento head, sino la cabecera de una determinada página.
- nav: Una colección de vínculos a otros sitios o páginas.
- section: Una sección determinada que incluye su propio encabezamiento.
- Mark, Aside y Time
Mark se utilizará para indicar importancia a un determinado texto.
<p>La <mark> etiqueta mark </mark> es utilizada para llamar la atención.</p>
Quizás no hayan reinventado la rueda con esta etiqueta, pero con <aside> podremos definir un bloque semántico que representa una nota o explicación, relacionado con alguna otra parte del contenido.
Por otro lado, han creado una etiqueta que mejora el manejo de fechas y horas (esto se hacía en HTML4 mediante la etiqueta abbr):
<time datetime="2010-03-29">Marzo</time>.
<time>09:00</time>
- Mejoras en <input type…>
Se han añadido varios nuevos tipos de ingreso de texto, pudiendo especificar si se trata de una url o un email, un entero, una fecha, etc. Algunos ejemplos:
<input type="email">
<input type="url">
<input list="title-list">
<datalist id="title-list">
<option value="…">
</datalist>
Además, la validación de los datos ingresados también será más sencilla gracias a otras nuevas etiquetas.
- Cuadro de diálogo:
Con la etiqueta <dialog> podemos incluir, valga la redundancia, cualquier tipo de diálogo.
<dialog>
<dt> Usuario 1:
<dd> Hola!
<dt> Usuario 2:
<dd> Hola! :)
</dialog>
Finalmente, la etiqueta <device> permitirá al cliente acceder a varios dispositivos, como puede ser una webcam, en tanto con <embed> podemos determinar contenido embebido, como por ejemplo un plug-in. Estos no son sólo más que algunos de los cambios más importantes que trae la quinta versión del lenguaje de marcado HTML, los que quieran continuar profundizando pueden visitar el sitio oficial del W3C.
si deseas ver una demostracion de todo el potencial grafico y funcional que ofrecera HTML5 te invito a que visites esta Galeria de sitios hechos totalmente utilizando este lenguaje de marcado.
