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 específica 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.
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>.
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
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
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.
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
Código HTML5 para reproducir audio sin la necesidad de plugins
Para video es algo similar.
<!DOCTYPE HTML><html><head><metacharset="UTF-8"><title>fuente de múltiples elementos</title></head><body><audioid="audioTestElem"autobuffercontrols><sourcesrc="test.m4a"><sourcesrc="test.ogg"type="audio/ogg; codecs=vorbis"><sourcesrc="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: <outputid="result"></output></p><script>varworker=newWorker('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>functiondrawPicture(){// Primero se recupera el objeto canvas a modificarvarcanvas=document.getElementById('example');// Luego se le indica la forma de trabajar 2D o 3Dvarcontext=canvas.getContext('2d');// Se comienza a dibujar en el lienzo utilizando objetos// gráficoscontext.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><styletype="text/css">canvas{border:2pxsolidblack;}</style></head><bodyonload="drawPicture();"><canvasid="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).
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
Datos:Q2053
Multimedia:HTML5
Libros y manuales:HTML5
Octubre 07, 2021
html5, html, hypertext, markup, language, versión, quinta, revisión, importante, lenguaje, básico, world, wide, html, específica, variantes, sintaxis, para, html, clásica, html, text, html, conocida, como, variante, xhtml, conocida, como, sintaxis, xhtml, debe. HTML 5 HyperText Markup Language version 5 es la quinta revision importante del lenguaje basico de la World Wide Web HTML HTML5 especifica dos variantes de sintaxis para HTML una clasica HTML text html conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML 5 que debera servirse con sintaxis XML application xhtml xml 1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo La version definitiva de la quinta revision del estandar se publico en octubre de 2014 3 HTML 5 Hypertext Markup Language DesarrolladorW3C HTML WG WHATWGhttps www w3 org TR html5 Informacion generalExtension de archivoHTML html htm br XHTML xhtml xht xmlTipo de MIMEHTML text html br XHTML application xhtml xml application xmlLanzamiento inicial28 de octubre de 2014Tipo de formatoMarkup languageExtendido deSGMLEstandar es http www w3 org TR html5 Formato abierto editar datos en Wikidata Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas se recomienda al usuario comun actualizar su navegador a la version mas 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 Indice 1 Nuevos elementos 2 Diferencias entre HTML5 y HTML4 XHTML 3 Novedades 4 Web Semantica 5 Nuevas API y Javascript 6 Ejemplos de codigos HTML5 7 Referencias 8 Vease tambien 9 Enlaces externosNuevos elementos EditarHTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tipico de los sitios web modernos Algunos de ellos son tecnicamente similares a las etiquetas lt div gt y lt span gt pero tienen un significado semantico como por ejemplo lt nav gt bloque de navegacion del sitio web y lt footer gt Diferencias entre HTML5 y HTML4 XHTML EditarArticulo principal Anexo Etiquetas HTML XHTML Etiqueta Atributos de la etiqueta Comentarios lt gt Estandar o ninguno Comentarios lt DOCTYPE gt HTML Estillo lt a gt href target rel hreflang media type Atributo Anadido mediaAtributo cambiado Target lt abbr gt title lt acronym gt Etiqueta Eliminada lt address gt Estandar o ninguno lt applet gt Etiqueta eliminada lt area gt Estandar o ningunos lt article gt Atributos globales Nueva etiqueta lt aside gt Atributos globales Nueva etiqueta lt audio gt autobuffer autoplay controls loop src Nueva etiqueta lt b gt Atributos globales Etiqueta cambiada lt base gt Estandar o ninguno lt basefont gt Etiqueta eliminada lt bdo gt Estandar o ninguno lt big gt Etiqueta eliminada lt blockquote gt Estandar o ninguno lt body gt Estandar o ninguno lt br gt Estandar o ninguno lt button gt Estandar o ninguno lt canvas gt height width Nueva etiqueta lt caption gt Estandar o ninguno lt center gt Etiqueta eliminada lt cite gt Atributos globales Etiqueta cambiada lt code gt Estandar o ninguno lt col gt Estandar o ninguno lt colgroup gt Estandar o ninguno lt datalist gt Atributos globales Nueva etiqueta lt dd gt Estandar o ninguno lt del gt Estandar o ninguno lt details gt open Nueva etiqueta lt dialog gt Atributos globales Nueva etiqueta lt dir gt Etiqueta eliminada lt div gt Estandar o ninguno Division lt dfn gt Estandar o ninguno lt dl gt Estandar o ninguno lt dt gt Estandar o ninguno lt em gt Estandar o ninguno lt embed gt height src type width Nueva etiqueta lt fieldset gt Estandar o ninguno lt figure gt Atributos globales Nueva etiqueta lt font gt Etiqueta eliminada lt footer gt Atributos globales Nueva etiqueta lt form gt Estandar o ninguno lt frame gt Etiqueta eliminada lt frameset gt Etiqueta eliminada lt h1 gt lt h6 gt Estandar o ninguno lt head gt Estandar o ninguno lt header gt Atributos globales Nueva etiqueta lt hgroup gt hgroup se anadio a la especificacion HTML5 pero ahora esta obsoleta 4 Usar lt header gt lt hr gt Ninguno Etiqueta cambiada lt html gt Estandar o ninguno lt i gt Ninguno Etiqueta cambiada lt iframe gt Estandar o ninguno lt img gt Estandar o ninguno lt input gt 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 Anadidos 13 elementos a type lt ins gt Estandar o ninguno lt isindex gt Etiqueta eliminada lt kbd gt Estandar o ninguno lt label gt Estandar o ninguno lt legend gt Estandar o ninguno lt li gt Estandar o ninguno lt link gt Estandar o ninguno lt mark gt Atributos globales Nueva etiqueta lt map gt Estandar o ninguno lt menu gt Estandar o ninguno lt meta gt Estandar o ninguno lt meter gt high low max min optimum value Nueva etiqueta lt nav gt Atributos globales Nueva etiqueta lt noframes gt Etiqueta eliminada lt noscript gt Estandar o ninguno lt object gt Estandar o ninguno lt ol gt Estandar o ninguno lt optgroup gt Estandar o ninguno lt option gt Estandar o ninguno lt output gt form Nueva etiqueta lt p gt Estandar o ninguno lt param gt Estandar o ninguno lt pre gt Estandar o ninguno lt progress gt max value Nueva etiqueta lt q gt lt ruby gt cite Nueva etiqueta lt rp gt Atributos globales Nueva etiqueta lt rt gt Atributos globales Nueva etiqueta lt s gt Etiqueta eliminada lt samp gt Estandar o ninguno lt script gt Estandar o ninguno lt section gt cite Nueva etiqueta lt select gt Estandar o ninguno lt small gt Atributos globales Etiqueta Cambiada lt source gt media src type Nueva etiqueta lt span gt Estandar o ninguno lt strike gt Etiqueta eliminada lt strong gt Estandar o ninguno lt style gt Estandar o ninguno lt sub gt Estandar o ninguno lt sup gt Estandar o ninguno lt table gt Estandar o ninguno lt tbody gt Estandar o ninguno lt td gt Estandar o ninguno lt textarea gt Estandar o ninguno lt tfoot gt Estandar o ninguno lt th gt Estandar o ninguno lt thead gt Estandar o ninguno lt time gt datetime pubdate Nueva etiqueta lt title gt Estandar o ninguno lt tr gt Estandar o ninguno lt tt gt Etiqueta eliminada lt u gt Define texto que debe tener un estilo diferente del texto normal 5 lt ul gt Estandar o ninguno lt var gt Estandar o ninguno lt video gt src poster autobuffer autoplay loop controls width height Nueva etiqueta lt xmp gt Etiqueta eliminadaNotas En amarillo aquellas etiquetas introducidas en esta nueva version en rojo aquellas que fueron eliminadas de la especificacion HTML5 en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta version Si bien en la practica los navegadores no lo estan teniendo en cuenta para evitar perder cuota de mercado Novedades EditarIncorpora etiquetas canvas 2D y 3D audio video 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 dinamicas 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 formulas matematicas y SVG graficos vectoriales En general se deja abierto a poder interpretar otros lenguajes XML Drag amp Drop Nueva funcionalidad para arrastrar objetos como imagenes Web Semantica EditarAnade etiquetas para manejar la Web semantica Web 3 0 header footer article nav time fecha del contenido link rel tipo de contenido que se enlaza Estas etiquetas permiten describir cual es el significado del contenido Por ejemplo su importancia su finalidad y las relaciones que existen No tienen especial impacto en la visualizacion se orientan a buscadores Los buscadores podran indexar e interpretar esta meta informacion para no buscar simplemente apariciones de palabras en el texto de la pagina Permite incorporar a las paginas ficheros RDF OWL con meta informacion para describir relaciones entre los terminos utilizados Ademas ofrece versatilidad en el manejo y animacion de objetos simples imagenes etc Nuevas API y Javascript EditarAPI para hacer Drag amp Drop Mediante eventos API para trabajar Off Line Permite descargar todos los contenidos necesarios y trabajar en local API de Geolocalizacion 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 aplicacion 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 comunicacion bidireccional entre paginas Similar a los Sockets de C WebWorkers Hilos de ejecucion en paralelo Estandar futuro System Information API Acceso al hardware a bajo nivel red ficheros CPU memoria puertos USB camaras microfonos Muy interesante pero con numerosas salvedades de seguridad Ejemplos de codigos HTML5 EditarCodigo HTML5 para reproducir audio sin la necesidad de pluginsPara video es algo similar lt DOCTYPE HTML gt lt html gt lt head gt lt meta charset UTF 8 gt lt title gt fuente de multiples elementos lt title gt lt head gt lt body gt lt audio id audioTestElem autobuffer controls gt lt source src test m4a gt lt source src test ogg type audio ogg codecs vorbis gt lt source src url gt no audio for you lt audio gt lt body gt lt html gt Ejemplo de WebWorker Hilo de ejecucion en paralelo Es necesario el uso de javascript Para el archivo Prueba html lt DOCTYPE HTML gt lt html gt lt head gt lt title gt Worker example One core computation lt title gt lt head gt lt body gt lt p gt The highest prime number discovered so far is lt output id result gt lt output gt lt p gt lt script gt var worker new Worker worker js worker onmessage function event document getElementById result textContent event data lt script gt lt body gt lt html gt Para el archivo worker js fichero con la tarea del nuevo hilo de ejecucion infinito var n 1 search while true n 1 for var i 2 i lt 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 lt DOCTYPE HTML gt lt html gt lt head gt lt title gt HTML5 Canvas example lt title gt lt script gt 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 graficos 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 lt script gt lt style type text css gt canvas border 2 px solid black lt style gt lt head gt lt body onload drawPicture gt lt canvas id example width 260 height 200 gt There is supposed to be an example drawing here but it s not important lt canvas gt lt body gt lt html gt Ejemplo de un formulario con nuevos tipos de datosElimina muchas validaciones en Javascript La clave esta en el atributo Type lt DOCTYPE HTML gt lt html gt lt body gt lt form gt lt input name form number id form number type number min 1 max 10 gt lt input name form date id form date type date gt lt input name form month id form month type month gt lt input name form week id form week type week gt lt input name form time id form time type time gt lt input name form url id form url type url list url list gt lt datalist id url list gt lt option value http www google com label Google gt lt option value http net tutsplus com label NetTuts gt lt datalist gt lt input name form email id form email type email list email list multiple gt lt datalist id email list gt lt option value jane doe test com label Jane Doe gt lt option value john doe test com label John Doe gt lt datalist gt lt input name form telephone id form telephone type tel gt lt input name form color id form color type color gt lt label gt Attachments lt input type file multiple name att gt lt label gt lt input name x type range min 100 max 700 step 9 09090909 value 509 090909 gt lt form gt lt body gt lt html gt Ejemplo de geoposicionamiento lt DOCTYPE HTML gt lt html gt lt head gt lt title gt Geo Localizations lt title gt lt head gt lt body gt lt script language javascript gt 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 lt script gt lt a href javascript obtener localizacion gt Mostrar Posicion lt a gt lt body gt lt html gt Referencias Editar W3C 6 de octubre de 2009 Ian Hickson y David Hyatt ed HTML 5 en ingles Consultado el 6 de octubre de 2009 Jorge Franganillo 6 de septiembre de 2010 HTML 5 el nuevo estandar basico 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 ingles W3C 2007 Referencia de etiquetas HTML 5 del Consorcio W3C en ingles Archivado desde el original el 2 de agosto de 2012 Vease tambien EditarHTML WHATWG comunidad que decide el futuro de HTML Canvas HTML HTML5 Video H 264 MPEG 4 AVC Theora WebM Web semantica Web 3 0 CSS3Enlaces externos Editar Wikimedia Commons alberga una categoria multimedia sobre HTML5 Borrador actual de especificaciones de HTML5 Fuente del codigo HTML5 Test Drive por Microsoft www html5rocks com HTML5 Rocks por Google Recursos web por Mozilla HTML5 que es HTML5 video explicativo sobre la familia de tecnologias denominadas HTML5 dragonbound net juego creado a partir de HTML5 HTML5 Test Datos Q2053 Multimedia HTML5 Libros y manuales HTML5Obtenido de https es wikipedia org w index php title HTML5 amp oldid 138379901, wikipedia, wiki, leyendo, leer, libro, biblioteca,
