HTML5

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>.

Notas: En amarillo aquellas etiquetas introducidas en esta nueva versión (en rojo aquellas que fueron eliminadas de la especificación HTML5), en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta versión. Si bien en la práctica los navegadores no lo están teniendo en cuenta para evitar perder cuota de mercado.

• Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privativos (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.

• 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 cuál 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.
• Además, ofrece versatilidad en el manejo y animación de objetos simples, imágenes etc.

• API para hacer Drag & Drop mediante eventos.
• API para trabajar sin conexión. Permite descargar todos los contenidos necesarios y trabajar en local.
• API de Geolocalización 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.

Código HTML5 para reproducir audio sin la necesidad de plugins

Para video es algo similar.

<!DOCTYPE HTML>
<html LANG="es">
  <head>
    <meta charset="UTF-8">
    <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">
      no audio for you
    </audio>
  </body>
</html>

Ejemplo de WebWorker (Hilo de ejecución en paralelo)
Es necesario el uso de javascript.

Para el archivo Prueba.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

Para el archivo worker.js (fichero con la tarea del nuevo hilo de ejecución infinito)

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}

Ejemplo de Canvas 2D utilizando el API de dibujo

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas example</title>
    <script>
      function drawPicture(){

        // Primero se recupera el objeto canvas a modificar
        var canvas = document.getElementById('example');

        // Luego se le indica la forma de trabajar 2D o 3D
        var context = canvas.getContext('2d');

        // Se comienza a dibujar en el lienzo utilizando objetos
        // gráficos

        context.fillStyle = "rgb(0,255,0)";
        context.fillRect (25, 25, 100, 100);

        context.fillStyle = "rgba(255,0,0, 0.6)";
        context.beginPath();
        context.arc(125,100,50,0,Math.PI*2,true);
        context.fill();

        context.fillStyle = "rgba(0,0,255,0.6)";
        context.beginPath();
        context.moveTo(125,100);
        context.lineTo(175,50);
        context.lineTo(225,150);
        context.fill();

      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="drawPicture();">

    <canvas id="example" width="260" height="200">
    There is supposed to be an example drawing here, but it's not important.
    </canvas>

  </body>
</html>

Ejemplo de un formulario con nuevos tipos de datos

Elimina muchas validaciones en Javascript. (La clave está en el atributo Type).

<!DOCTYPE HTML>
<html>
  <body>
  <form>

    <input name="form_number" id="form_number" type="number" min="1" max="10" >
    <input name="form_date" id="form_date" type="date">
    <input name="form_month" id="form_month" type="month">
    <input name="form_week" id="form_week" type="week">
    <input name="form_time" id="form_time" type="time">
    <input name="form_url" id="form_url" type="url" list="url_list">
    <datalist id="url_list">
        <option value="http://www.google.com" label="Google">
        <option value="http://net.tutsplus.com" label="NetTuts+">
    </datalist>
    <input name="form_email" id="form_email" type="email" list="email_list" multiple>
    <datalist id="email_list">
       <option value="jane.doe@test.com" label="Jane Doe">
       <option value="john.doe@test.com" label="John Doe">
    </datalist>
    <input name="form_telephone" id="form_telephone" type="tel">
    <input name="form_color" id="form_color" type="color">
    <label>
        Attachments:
        <input type="file" multiple name="att">
    </label>
    <input name="x" type="range" min="100" max="700" step="9.09090909" value="509.090909">

  </form>
  </body>
</html>

Ejemplo de geoposicionamiento

<!DOCTYPE HTML>
<html>
<head>
<title> Geo  Localizations </title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>

1. W3C (6 de octubre de 2009). Ian Hickson y David Hyatt, ed. «HTML5» (en inglés). Consultado el 6 de octubre de 2009.
2. Jorge Franganillo (6 de septiembre de 2010). «HTML 5: el nuevo estándar básico del web».
3. «HTML 5 Finalized». OSNews. 29 de octubre de 2014. Consultado el 29 de octubre de 2014.
4. W3C (13 de junio de 2014). «HTML/Elements/hgroup» (en inglés).
5. W3C (2007). «Referencia de etiquetas HTML 5 del Consorcio W3C» (en inglés). Archivado desde el original el 2 de agosto de 2012.

• HTML
• WHATWG, comunidad que decide el futuro de HTML.
• Canvas (HTML)
• HTML5 Video
• H.264/MPEG-4 AVC
• Theora
• WebM
• Web semántica
• Web 3.0
• CSS3

• Wikimedia Commons alberga una categoría multimedia sobre HTML5.
• Borrador actual de especificaciones de HTML5
• Fuente del código HTML5
• www.html5rocks.com, HTML5 Rocks, por Google
• Recursos web por Mozilla
• HTML5 Test

• Datos: Q2053
• Multimedia: HTML5 / Q2053
• MediaWiki: HTML5

1. ^ W3C (6 de octubre de 2009). Ian Hickson y David Hyatt, ed. «HTML5» (en inglés). Consultado el 6 de octubre de 2009.
2. ^ Jorge Franganillo (6 de septiembre de 2010). «HTML 5: el nuevo estándar básico del web».
3. ^ «HTML 5 Finalized». OSNews. 29 de octubre de 2014. Consultado el 29 de octubre de 2014.
4. ^ W3C (13 de junio de 2014). «HTML/Elements/hgroup» (en inglés).
5. ^ W3C (2007). «Referencia de etiquetas HTML 5 del Consorcio W3C» (en inglés). Archivado desde el original el 2 de agosto de 2012.