HTML5

HTML5 (Hypertext Markup Language)

Desarrollador
W3C HTML WG, WHATWG
Información general
Extensión de archivo	`HTML: .html, .htm XHTML: .xhtml, .xht, .xml`
Tipo de MIME	`HTML: text/html XHTML: application/xhtml+xml, application/xml`
Tipo de formato	Markup language
Estándar(es)	http://www.w3.org/html/wg/html5/
Formato abierto	?

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.

Nuevos elementos [editar]

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

Diferencias entre HTML5 y HTML4/XHTML [editar]

Artículo principal: Anexo:Etiquetas HTML/XHTML.

Etiqueta	Atributos de la etiqueta	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 ningunos
<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 ^[3]
<ul>	Estándar o ninguno
<var>	Estándar o ninguno
<video>	src \| poster \| autobuffer \| autoplay \| loop \| controls \| width \| height	Nueva etiqueta
~~<xmp>~~		Etiqueta eliminada

Notas: En amarillo aquellas etiquetas introducidas en esta nueva versión, 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.

Novedades [editar]

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 [editar]

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.

ademas de ofrecer versatilidad en el manejo y animación de objetos simples, imágenes etc.

Nuevas APIs y Javascript [editar]

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.

Ejemplos de códigos HTML5 [editar]

Código HTML5 para reproducir audio sin la necesidad de plugins.
Para video es algo similar.

<!DOCTYPE HTML>
<html>
  <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">
      no audio for you
    </audio>
  </body>
</html>

Ejemplo de Consulta SQL a una Base de Datos en el Navegador.

  // CREAR BBDD
function prepareDatabase(ready, error) {
 
  return openDatabase('documents', '1.0', 'Offline document  
      storage', 5*1024*1024, function (db) {
      db.changeVersion('', '1.0', function (t) {
        t.executeSql('CREATE TABLE docids (id, name)');
    }, error);
  });
 
}
 
// CONSULTAR BBDD
function showDocCount(db, span) {
  db.readTransaction(function (t) {
    t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) {
      span.textContent = r.rows[0].c;
    }, function (t, e) {
      // couldn't read database
      span.textContent = '(unknown: ' + e.message + ')';
    });
  });
}
 
 
prepareDatabase(function(db) {
  // got database
  var span = document.getElementById('doc-count');
  showDocCount(db, span);
}, function (e) {
  // error getting database
  alert(e.message);
});
 
// Ejemplo de SELECT con parámetros
 
db.readTransaction(function (t) {
  t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) {
    report(data.rows[0].title, data.rows[0].author);
  });
});

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

// 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>
 
// 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 indicar 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></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>

Referencias [editar]

↑ W3C (6 de octubre de 2009). Ian Hickson y David Hyatt (ed.): «HTML5» (en inglés). Consultado el martes, 06 de octubre de 2009.
↑ Jorge Franganillo (6 de septiembre de 2010). «HTML5: el nuevo estándar básico del web» (en español).
↑ W3C (2007). «Referencia de etiquetas HTML 5 del Consorcio W3C» (en inglés).

Véase también [editar]

Enlaces externos [editar]

Wikimedia Commons alberga contenido multimedia sobre HTML5. Commons
Borrador actual de especificaciones de HTML5
Fuente del codigo HTML5
Test Drive por Microsoft
HTML5 Rocks por Google
Recursos web por Mozilla
HTML5: ¿qué es HTML5?, vídeo explicativo sobre la familia de tecnologías denominadas HTML5.

juego creado a partir de HTML5 http://dragonbound.net/

[w3cSpec-1] W3C (6 de octubre de 2009). Ian Hickson y David Hyatt (ed.): «HTML5» (en inglés). Consultado el martes, 06 de octubre de 2009.

[franganilloHTML5-2] Jorge Franganillo (6 de septiembre de 2010). «HTML5: el nuevo estándar básico del web» (en español).

[3] W3C (2007). «Referencia de etiquetas HTML 5 del Consorcio W3C» (en inglés).

[1]

[2]

[3]

HTML5

Índice

Nuevos elementos [editar]

Diferencias entre HTML5 y HTML4/XHTML [editar]

Novedades [editar]

Web Semántica [editar]

Nuevas APIs y Javascript [editar]

Ejemplos de códigos HTML5 [editar]

Referencias [editar]

Véase también [editar]

Enlaces externos [editar]

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Imprimir/exportar

Herramientas

En otros idiomas