HTML5
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 | Markup language | |
Extendido de | SGML | |
Estándar(es) | http://www.w3.org/TR/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 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]
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
[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>
.
Diferencias entre HTML5 y HTML4/XHTML
[editar]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.
Novedades
[editar]- 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
[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 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.
Nuevas API 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 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
[editar]- 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>
Referencias
[editar]- ↑ W3C (6 de octubre de 2009). Ian Hickson y David Hyatt, ed. «HTML5» (en inglés). Consultado el 6 de octubre de 2009.
- ↑ Jorge Franganillo (6 de septiembre de 2010). «HTML 5: el nuevo estándar básico del web».
- ↑ «HTML 5 Finalized». OSNews. 29 de octubre de 2014. Consultado el 29 de octubre de 2014.
- ↑ W3C (13 de junio de 2014). «HTML/Elements/hgroup» (en inglés).
- ↑ W3C (2007). «Referencia de etiquetas HTML 5 del Consorcio W3C» (en inglés). Archivado desde el original el 2 de agosto de 2012.
Véase también
[editar]- 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
Enlaces externos
[editar]- Wikimedia Commons alberga una categoría multimedia sobre HTML5.
- Borrador actual de especificaciones de HTML5
- Fuente del código HTML5
- Test Drive por Microsoft
- www.html5rocks.com, HTML5 Rocks, por Google
- Recursos web por Mozilla
- HTML5: ¿qué es HTML5?, vídeo explicativo sobre la familia de tecnologías denominadas HTML5.
- HTMLdesdecero, blog en español sobre HTML5.
- dragonbound.net, juego creado a partir de HTML5.
- HTML5 Test