HTML: .html, .htmXHTML: .xhtml, .xht, .xml
HTML: text/htmlXHTML: application/xhtml+xml, application/xml
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]
text/html
application/xhtml+xml
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>.
<div>
<span>
<nav>
<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.
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="[email protected]" label="Jane Doe"> <option value="[email protected]" 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>