Edición de «HTML5»

{{Ficha de formato de archivo
| nombre        = HTML5 <br /> ({{small|{{nowrap|Hypertext Markup Language}}}})
| logo          = HTML5 logo and wordmark.svg
| extensión     = HTML: .html, .htm<br />XHTML: .xhtml, .xht, .xml
| mime          = HTML: text/html<br />XHTML: application/xhtml+xml, application/xml
| type code     = TEXT
| uniform type  = public.html
| desarrollador = [[W3C]] HTML WG, [[WHATWG]]
| género        = [[Lenguaje de marcado]]
| contenedor para =HTML 
| contenido por   = 
| extendido de    = 
| extendido a     =
| estándar        = https://www.w3.org/TR/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 específica dos variantes de sintaxis para HTML: una «clásica», HTML (<code>text/html</code>), y una variante [[XHTML]] conocida como sintaxis ''XHTML5'' que deberá servirse con sintaxis XML (<code>application/xhtml+xml</code>).<ref name="w3cSpec">{{cita web
| url = https://dev.w3.org/html5/spec/Overview.html#html-vs-xhtml
| título = HTML5
| autor = W3C
| enlaceautor = W3C
| editor = Ian Hickson y David Hyatt
| idioma = inglés
| fecha = 6 de octubre de 2009
| fechaacceso = martes, 6 de octubre de 2009
}}</ref><ref name="franganilloHTML5">{{cita web
| url = https://franganillo.es/html5.pdf
| título = HTML 5: el nuevo estándar básico del web
| autor = Jorge Franganillo
| idioma = español
| fecha = 6 de septiembre de 2010
}}</ref> Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.<ref name="finalosnews">{{cita web|url=https://www.osnews.com/story/28003/HTML_5_Finalized|título=HTML 5 Finalized|fechaacceso=29 de octubre de 2014|fecha=29 de octubre de 2014|editorial=OSNews}}</ref>

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

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

== Nuevos elementos ==
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 <code>&lt;div&gt;</code> y <code>&lt;span&gt;</code>, pero tienen un significado semántico, como por ejemplo <code>&lt;nav&gt;</code> (bloque de navegación del sitio web) y <code>&lt;footer&gt;</code>.

== Diferencias entre HTML5 y HTML4/XHTML ==
{{ap |Anexo:Etiquetas HTML/XHTML}}
{|  width="65%" border="1" class="wikitable col1cen col2cen col3cen"
| style="font-weight:bold; font-size:14px"> | Etiqueta
| style="font-weight:bold; font-size:14px"> | Atributos de la etiqueta
| style="font-weight:bold; font-size:14px"> | Comentarios
|-
| '''&lt;!-- --&gt;'''
| Estándar o ninguno
| Comentarios
|-
| '''&lt;!DOCTYPE&gt;'''
| HTML 
|Estillo
|-  bgcolor="LightBlue"
| '''&lt;a&gt;'''
| href &#124; target &#124; rel &#124; hreflang &#124; media &#124; type
| Atributo Añadido: <em>media</em><br />Atributo cambiado: Target
|-
| '''&lt;abbr>'''
| title
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;acronym&gt;</s>'''
| 
| Etiqueta Eliminada 
|-
| '''&lt;address&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;applet&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;area&gt;'''
| Estándar o ningunos
| 
|-  bgcolor="Gold"
| '''&lt;article&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="Gold"
| '''&lt;aside&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="Gold"
| '''&lt;audio&gt;'''
| autobuffer &#124; autoplay &#124; controls &#124; loop &#124; src
| Nueva etiqueta
|-  bgcolor="LightBlue"
| '''&lt;b&gt;'''
| Atributos globales
| Etiqueta cambiada
|-
| '''&lt;base&gt;'''
| Estándar o ninguno
|
|-  bgcolor="DarkGray"
| '''<s>&lt;basefont&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;bdo&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;big&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;blockquote&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;body&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;br&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;button&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;canvas&gt;'''
| height &#124; width
| Nueva etiqueta
|-
| '''&lt;caption&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;center&gt;</s>'''
| 
| Etiqueta eliminada
|-  bgcolor="LightBlue"
| '''&lt;cite&gt;'''
| Atributos globales
| Etiqueta cambiada
|-
| '''&lt;code&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;col&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;colgroup&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;datalist&gt;'''
| Atributos globales
| Nueva etiqueta
|-
| '''&lt;dd&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;del&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;details&gt;'''
| open
| Nueva etiqueta
|-  bgcolor="Gold"
| '''&lt;dialog&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="DarkGray"
| '''<s>&lt;dir&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;div&gt;'''
| Estándar o ninguno
| Division
|-
| '''&lt;dfn&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;dl&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;dt&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;em&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;embed&gt;'''
| height &#124; src &#124; type &#124; width
| Nueva etiqueta
|-
| '''&lt;fieldset&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;figure&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="DarkGray"
| '''<s>&lt;font&gt;</s>'''
| 
| Etiqueta eliminada
|-  bgcolor="Gold"
| '''&lt;footer&gt;'''
| Atributos globales
| Nueva etiqueta
|-
| '''&lt;form&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;frame&gt;</s>'''
| 
| Etiqueta eliminada
|-  bgcolor="DarkGray"
| '''<s>&lt;frameset&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;h1&gt;... &lt;h6&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;head&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;header&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="Firebrick"
| '''<s>&lt;hgroup&gt;</s>'''
| 
| hgroup se añadió a la especificación HTML5, pero ahora está obsoleta.<ref>{{cita web
| url = https://www.w3.org/wiki/HTML/Elements/hgroup
| título = HTML/Elements/hgroup
| autor = W3C
| idioma = inglés
| fecha = {{fecha|13|06|2014}}
}}</ref> Usar &lt;header&gt;
|-  bgcolor="LightBlue"
| '''&lt;hr&gt;'''
| Ninguno
| Etiqueta cambiada
|-
| '''&lt;html&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="LightBlue"
| '''&lt;i&gt;'''
| Ninguno
| Etiqueta cambiada
|-
| '''&lt;iframe&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;img&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="LightBlue"
| '''&lt;input&gt;'''
| accept &#124; alt &#124; auto-complete &#124; autofocus &#124; checked &#124; disabled &#124; form &#124; formaction &#124; formenctype &#124; formmethod &#124; formnovalidate &#124; formtarget &#124; height &#124; list &#124; max &#124; maxlength &#124; min &#124; multiple &#124; name &#124;<nowiki> pattern | placeholder </nowiki>&#124; readonly &#124; required &#124; size &#124; src &#124; step &#124; type &#124; value &#124; width 
| Etiqueta cambiada: Añadidos 13 elementos a type
|-
| '''&lt;ins&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;isindex&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;kbd&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;label&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;legend&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;li&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;link&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;mark&gt;'''
| Atributos globales
| Nueva etiqueta
|-
| '''&lt;map&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;menu&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;meta&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;meter&gt;'''
| high &#124; low &#124; max &#124; min &#124; optimum &#124; value
| Nueva etiqueta
|-  bgcolor="Gold"
| '''&lt;nav&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="DarkGray"
| '''<s>&lt;noframes&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;noscript&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;object&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;ol&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;optgroup&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;option&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;output&gt;'''
| form
| Nueva etiqueta
|-
| '''&lt;p&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;param&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;pre&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;progress&gt;'''
| max &#124; value
| Nueva etiqueta
|-
| '''&lt;q&gt;'''
| 
| 
|-  bgcolor="Gold"
| '''&lt;ruby&gt;'''
| cite
| Nueva etiqueta
|-  bgcolor="Gold"
| '''&lt;rp&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="Gold"
| '''&lt;rt&gt;'''
| Atributos globales
| Nueva etiqueta
|-  bgcolor="DarkGray"
| '''<s>&lt;s&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;samp&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;script&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;section&gt;'''
| cite
| Nueva etiqueta
|-
| '''&lt;select&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="LightBlue"
| '''&lt;small&gt;'''
| Atributos globales
| Etiqueta Cambiada
|-  bgcolor="Gold"
| '''&lt;source&gt;'''
| media &#124; src &#124; type
| Nueva etiqueta
|-
| '''&lt;span&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;strike&gt;</s>'''
| 
| Etiqueta eliminada
|-
| '''&lt;strong&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;style&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;sub&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;sup&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;table&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;tbody&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;td&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;textarea&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;tfoot&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;th&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;thead&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;time&gt;'''
| datetime &#124; pubdate
| Nueva etiqueta
|-
| '''&lt;title&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;tr&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="DarkGray"
| '''<s>&lt;tt&gt;</s>'''
| 
| Etiqueta eliminada
|-  
| '''&lt;u&gt;'''
| Define texto que debe tener un estilo diferente del texto normal<ref>{{cita web
 |url          = http://www.w3schools.com/html5/html5_reference.asp
 |título      = Referencia de etiquetas HTML 5 del Consorcio W3C
 |autor        = W3C
 |idioma       = inglés
 |fecha        = 2007
 |urlarchivo   = https://web.archive.org/web/20120802010646/http://www.w3schools.com/html5/html5_reference.asp
 |fechaarchivo = 2 de agosto de 2012
}}</ref>
| 
|-
| '''&lt;ul&gt;'''
| Estándar o ninguno
| 
|-
| '''&lt;var&gt;'''
| Estándar o ninguno
| 
|-  bgcolor="Gold"
| '''&lt;video&gt;'''
| src &#124; poster &#124; autobuffer &#124; autoplay &#124; loop &#124; controls &#124; width &#124; height
| Nueva etiqueta
|-  bgcolor="DarkGray"
| '''<s>&lt;xmp&gt;</s>'''
| 
| Etiqueta eliminada
|}
<small>'''Notas:'''</small>
<small>En <span style="background-color:Gold">amarillo</span> aquellas etiquetas introducidas en esta nueva versión (en <span style="background-color: Firebrick">rojo</span> aquellas que fueron eliminadas de la especificación HTML5), en <span style="background-color:LightBlue">azul</span> las etiquetas que han sido cambiadas todo o en parte y en <span style="background-color:DarkGray">gris</span> 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.</small>

== Novedades ==
* 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.

== 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 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 [[Resource Description Framework|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.

== Nuevas API y Javascript ==
* API para hacer [[Arrastrar y soltar|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.

== Ejemplos de códigos HTML5 ==
;Código HTML5 para reproducir audio sin la necesidad de plugins
<br>
Para video es algo similar.
<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

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

Para el archivo Prueba.html
<syntaxhighlight source lang="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>
</syntaxhighlight>

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

<syntaxhighlight source lang="html">
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);
}
</syntaxhighlight>

<br>

;Ejemplo de Canvas 2D utilizando el API de dibujo
<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>
<br>

;Ejemplo de un formulario con nuevos tipos de datos
<br> Elimina muchas validaciones en Javascript.
(La clave está en el atributo Type).

<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>
<br>

;Ejemplo de geoposicionamiento
<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

== Referencias ==
{{Listaref}}

== Véase también ==
* [[HTML]]
* [[Web Hypertext Application Technology Working Group|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]]

== Enlaces externos ==
{{Commonscat|HTML5}}
* [http://dev.w3.org/html5/spec/Overview.html Borrador actual de especificaciones de HTML5]
* [http://dev.w3.org/cvsweb/html5/ Fuente del código HTML5]
* [http://www.html5rocks.com/ www.html5rocks.com], HTML5 Rocks, por [[Google]]
* [https://developer.mozilla.org/es/ Recursos web] por [[Fundación Mozilla|Mozilla]]
* [https://html5test.com/index.html HTML5 Test]

{{Control de autoridades}}

[[Categoría:HTML5]]
[[Categoría:Estándares emergentes]]