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 (text/html
), y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml
).[1][2] 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.[3]
HTML5 (Hypertext Markup Language) | ||
---|---|---|
Desarrollador | ||
W3C HTML WG, WHATWG | ||
https://html.spec.whatwg.org/multipage/ | ||
Información general | ||
Extensión de archivo |
HTML: .html, .htm | |
Tipo de MIME |
HTML: text/html | |
Lanzamiento inicial | 28 de octubre de 2014 | |
Tipo de formato | Lenguaje de marcado | |
Extendido de | SGML | |
Estándar(es) | http://www.w3.org/TR/html5/ | |
Formato abierto | ? | |
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.
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>
.
Etiqueta | Atributos de la etiqueta | Comentarios |
<!-- --> | Estándar o ninguno | Comentarios |
<!DOCTYPE> | HTML | Estillo |
<a> | href | target | rel | hreflang | media | type | Atributo Añadido: media Atributo cambiado: Target |
<abbr> | title | |
Etiqueta Eliminada | ||
<address> | Estándar o ninguno | |
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 | |
Etiqueta eliminada | ||
<bdo> | Estándar o ninguno | |
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 | |
Etiqueta eliminada | ||
<cite> | Atributos globales | Etiqueta cambiada |
<code> | Estándar o ninguno | |
<col> | Estándar o ninguno | |
<colgroup> | 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 |
Etiqueta eliminada | ||
<div> | Estándar o ninguno | Division |
<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 |
Etiqueta eliminada | ||
<footer> | Atributos globales | Nueva etiqueta |
<form> | Estándar o ninguno | |
Etiqueta eliminada | ||
Etiqueta eliminada | ||
<h1>... <h6> | Estándar o ninguno | |
<head> | Estándar o ninguno | |
<header> | Atributos globales | Nueva etiqueta |
hgroup se añadió a la especificación HTML5, pero ahora está obsoleta.[4] Usar <header> | ||
<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 | checked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width | Etiqueta cambiada: Añadidos 13 elementos a type |
<ins> | Estándar o ninguno | |
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 |
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 |
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 | |
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 | |
Etiqueta eliminada | ||
<u> | Define texto que debe tener un estilo diferente del texto normal[5] | |
<ul> | Estándar o ninguno | |
<var> | Estándar o ninguno | |
<video> | src | poster | autobuffer | autoplay | loop | controls | width | height | Nueva etiqueta |
Etiqueta eliminada |
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.
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);
}
<!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>
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>
<!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>