Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

Ultima revisión 20/08/2012

¿ Qué es HTML5 ?

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» 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).1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas.

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.

El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.

HTML5 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>, capaz de renderizar en los navegadores más importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D.

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 entre HTML5 y HTML4/XHTML

Etiqueta Atributos Comentarios
<!-- --> Estándar o ninguno
<!DOCTYPE> Estándar o ninguno
<a> href | target | rel | hreflang | media | type Atributo Añadido: media
Atributo cambiado: Target
<abbr> Estándar o ninguno
<acronym> Etiqueta Eliminada
<address> Estándar o ninguno
<applet> Etiqueta eliminada
<area> Estándar o ninguno
<article> Atributos globales Nueva etiqueta
<aside> Atributos globales Nueva etiqueta
<audio> autobuffer | autoplay | controls | loop | src Nueva etiqueta
<b> Atributos globales Etiqueta cambiada
<base> Estándar o ninguno
<basefont> Etiqueta eliminada
<bb> Estándar o ninguno
<bdo> Estándar o ninguno
<big> Etiqueta eliminada
<blockquote> Estándar o ninguno
<body> Estándar o ninguno
<br> Estándar o ninguno
<button> Estándar o ninguno
<canvas> height | width Nueva etiqueta
<caption> Estándar o ninguno
<center> Etiqueta eliminada
<cite> Atributos globales Etiqueta cambiada
<code> Estándar o ninguno
<col> Estándar o ninguno
<colgroup> Estándar o ninguno
<command> checked | default | disabled | hidden | icon | label | radiogroup | type Nueva etiqueta
<datagrid> Estándar o ninguno
<datalist> Atributos globales Nueva etiqueta
<dd> Estándar o ninguno
<del> Estándar o ninguno
<details> open Nueva etiqueta
<dialog> Atributos globales Nueva etiqueta
<dir> Etiqueta eliminada
<div> Estándar o ninguno
<dfn> Estándar o ninguno
<dl> Estándar o ninguno
<dt> Estándar o ninguno
<em> Estándar o ninguno
<embed> height | src | type | width Nueva etiqueta
<fieldset> Estándar o ninguno
<figure> Atributos globales Nueva etiqueta
<font> Etiqueta eliminada
<footer> Atributos globales Nueva etiqueta
<form> Estándar o ninguno
<frame> Etiqueta eliminada
<frameset> Etiqueta eliminada
<h1> ... <h6> Estándar o ninguno
<head> Estándar o ninguno
<header> Atributos globales Nueva etiqueta
<hgroup> Atributos globales Nueva etiqueta
<hr> Ninguno Etiqueta cambiada
<html> Estándar o ninguno
<i> Ninguno Etiqueta cambiada
<iframe> Estándar o ninguno
<img> Estándar o ninguno
<input> accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern1 placeholder | readonly | required | size | src | step | type | value | width Etiqueta cambiada: Añadidos 13 elementos a type
<ins> Estándar o ninguno
<isindex> Etiqueta eliminada
<kbd> Estándar o ninguno
<label> Estándar o ninguno
<legend> Estándar o ninguno
<li> Estándar o ninguno
<link> Estándar o ninguno
<mark> Atributos globales Nueva etiqueta
<map> Estándar o ninguno
<menu> Estándar o ninguno
<meta> Estándar o ninguno
<meter> high | low | max | min | optimum | value Nueva etiqueta
<nav> Atributos globales Nueva etiqueta
<noframes> Etiqueta eliminada
<noscript> Estándar o ninguno
<object> Estándar o ninguno
<ol> Estándar o ninguno
<optgroup> Estándar o ninguno
<option> Estándar o ninguno
<output> form Nueva etiqueta
<p> Estándar o ninguno
<param> Estándar o ninguno
<pre> Estándar o ninguno
<progress> max | value Nueva etiqueta
<q>
<ruby> cite Nueva etiqueta
<rp> Atributos globales Nueva etiqueta
<rt> Atributos globales Nueva etiqueta
<s> Etiqueta eliminada
<samp> Estándar o ninguno
<script> Estándar o ninguno
<section> cite Nueva etiqueta
<select> Estándar o ninguno
<small> Atributos globales Etiqueta Cambiada
<source> media | src | type Nueva etiqueta
<span> Estándar o ninguno
<strike> Etiqueta eliminada
<strong> Estándar o ninguno
<style> Estándar o ninguno
<sub> Estándar o ninguno
<sup> Estándar o ninguno
<table> Estándar o ninguno
<tbody> Estándar o ninguno
<td> Estándar o ninguno
<textarea> Estándar o ninguno
<tfoot> Estándar o ninguno
<th> Estándar o ninguno
<thead> Estándar o ninguno
<time> datetime | pubdate Nueva etiqueta
<title> Estándar o ninguno
<tr> Estándar o ninguno
<tt> Etiqueta eliminada
<u> Define texto que debe tener un estilo diferente del texto normal
<ul> Estándar o ninguno
<var> Estándar o ninguno
<video> src | poster | autobuffer | autoplay | loop | controls | width | height Nueva etiqueta
<xmp> Etiqueta eliminada

Novedades

  • Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC).
  • Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.
  • Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.
  • Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.
  • Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Web Semántica

  • Añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time( fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).
  • Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se orientan a buscadores.
  • Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.
  • Permite incorporar a las páginas ficheros RDF / OWL (con meta información) para describir relaciones entre los términos utilizados.

Nuevas APIs y Javascript

  • API para hacer Drag & Drop. Mediante eventos.
  • API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API de Geoposicionamiento para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
  • WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
  • WebWorkers. Hilos de ejecución en paralelo.
  • ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cámaras, micrófonos … muy interesante pero con numerosas salvedades de seguridad.

Fuente http://es.wikipedia.org/

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.