Está en la página 1de 11

HTML5

De Wikipedia, la enciclopedia libre


Saltar a: navegación, búsqueda

HTML5
(Hypertext Markup Language)

Desarrollador

W3C HTML WG, WHATWG

http://www.w3.org/TR/html5/ y
https://html.spec.whatwg.org/

Información general

Extensión de HTML: .html, .htm


archivo XHTML: .xhtml, .xht, .xml

Tipo de MIME HTML: text/html


XHTML: application/xhtml+xml,
application/xml

Lanzamiento 2 de octubre de 2014


inicial
Tipo de Markup language
formato

Extendido de SGML

Estándar(es) http://www.w3.org/TR/html5/

Formato ?
abierto

[editar datos en Wikidata]

HTML5 (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 XHTML5 que deberá servirse con sintaxis
XML (application/xhtml+xml).12 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 HTML5.

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

Índice
[ocultar]

• 1 Nuevos elementos
• 2 Diferencias entre HTML5 y HTML4/XHTML
• 3 Novedades
• 4 Web Semántica
• 5 Nuevas APIs y Javascript
• 6 Ejemplos de códigos HTML5
• 7 Referencias
• 8 Véase también
• 9 Enlaces externos

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]


Artículo principal: Anexo:Etiquetas HTML/XHTML
Etiqueta Atributos de la etiqueta Comentarios
<!-- --> Estándar o ninguno
<!DOCTYPE> Estándar o ninguno
Atributo
Añadido: media
href | target | rel |
<a> hreflang | media |
Atributo
type
cambiado:
Target
<abbr> title
Etiqueta
<acronym>
Eliminada
<address> Estándar o ninguno
Etiqueta
<applet>
eliminada
<area> Estándar o ningunos
<article> Atributos globales Nueva etiqueta
<aside> Atributos globales Nueva etiqueta
autobuffer | autoplay |
<audio> Nueva etiqueta
controls | loop | src
Etiqueta
<b> Atributos globales
cambiada
<base> Estándar o ninguno
Etiqueta
<basefont>
eliminada
<bdo> Estándar o ninguno
Etiqueta
<big>
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
<center>
eliminada
Etiqueta
<cite> Atributos globales
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
<dir>
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
height | src | type |
<embed> Nueva etiqueta
width
<fieldset> Estándar o ninguno
<figure> Atributos globales Nueva etiqueta
Etiqueta
<font>
eliminada
<footer> Atributos globales Nueva etiqueta
<form> Estándar o ninguno
Etiqueta
<frame>
eliminada
Etiqueta
<frameset>
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
<hgroup> HTML5, pero
ahora está
obsoleta.4 Usar
<header>
Etiqueta
<hr> Ninguno
cambiada
<html> Estándar o ninguno
Etiqueta
<i> Ninguno
cambiada
<iframe> Estándar o ninguno
<img> Estándar o ninguno
accept | alt | auto-
complete | autofocus |
cheked | disabled |
form | formaction |
formenctype |
formmethod | Etiqueta
formnovalidate | cambiada:
<input> formtarget | height | Añadidos 13
list | max | maxlength elementos a
| min | multiple | type
name | pattern |
placeholder |
readonly | required |
size | src | step | type |
value | width
<ins> Estándar o ninguno
Etiqueta
<isindex>
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
high | low | max | min
<meter> Nueva etiqueta
| optimum | value
<nav> Atributos globales Nueva etiqueta
Etiqueta
<noframes>
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
<s>
eliminada
<samp> Estándar o ninguno
<script> Estándar o ninguno
<section> cite Nueva etiqueta
<select> Estándar o ninguno
Etiqueta
<small> Atributos globales
Cambiada
<source> media | src | type Nueva etiqueta
<span> Estándar o ninguno
Etiqueta
<strike>
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
<tt>
eliminada
Define texto que debe
<u>
tener un estilo
diferente del texto
normal5
<ul> Estándar o ninguno
<var> Estándar o ninguno
src | poster |
autobuffer | autoplay |
<video> Nueva etiqueta
loop | controls | width
| height
Etiqueta
<xmp>
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>