HTML5
HTML 5 (Hypertext Markup Language) | ||
---|---|---|
![]() | ||
Desarrollador | ||
W3C HTML WG, WHATWG | ||
https://www.w3.org/TR/html5/ | ||
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 | ? | |
HTML 5 (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: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML 5 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.
Índice
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
|
|
<!DOCTYPE>
|
Estándar o ninguno
|
|
<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
|
|
<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 | cheked | 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 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 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 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 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>
<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 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. «HTML 5» (en inglés). Consultado el martes, 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.
- dragonbound.net, juego creado a partir de HTML5.
- HTML5 Test