Movatterモバイル変換

[0]ホーム
URL:

Ir al contenido
WikipediaLa enciclopedia libre
Buscar

HTML5

De Wikipedia, la enciclopedia libre
(Redirigido desde «HTML 5»)
HTML5
(Hypertext Markup Language)
Desarrollador
W3C HTML WG,WHATWG
https://html.spec.whatwg.org/multipage/
Información general
Extensión de archivoHTML: .html, .htm
XHTML: .xhtml, .xht, .xml
Tipo de MIMEHTML: text/html
XHTML: application/xhtml+xml, application/xml
Lanzamiento inicial28 de octubre de 2014
Tipo de formatoLenguaje de marcado
Extendido deSGML
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 laWorld Wide Web,HTML. HTML5 específica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), y una varianteXHTML conocida como sintaxisXHTML5 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 estelenguaje de marcado es regulado por el ConsorcioW3C.

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
EtiquetaAtributos de la etiquetaComentarios
<!-- -->Estándar o ningunoComentarios
<!DOCTYPE>HTMLEstillo
<a>href | target | rel | hreflang | media | typeAtributo Añadido:media
Atributo cambiado: Target
<abbr>title
<acronym>Etiqueta Eliminada
<address>Estándar o ninguno
<applet>Etiqueta eliminada
<area>Estándar o ningunos
<article>Atributos globalesNueva etiqueta
<aside>Atributos globalesNueva etiqueta
<audio>autobuffer | autoplay | controls | loop | srcNueva etiqueta
<b>Atributos globalesEtiqueta cambiada
<base>Estándar o ninguno
<basefont>Etiqueta eliminada
<bdo>Estándar o ninguno
<big>Etiqueta eliminada
<blockquote>Estándar o ninguno
<body>Estándar o ninguno
<br>Estándar o ninguno
<button>Estándar o ninguno
<canvas>height | widthNueva etiqueta
<caption>Estándar o ninguno
<center>Etiqueta eliminada
<cite>Atributos globalesEtiqueta cambiada
<code>Estándar o ninguno
<col>Estándar o ninguno
<colgroup>Estándar o ninguno
<datalist>Atributos globalesNueva etiqueta
<dd>Estándar o ninguno
<del>Estándar o ninguno
<details>openNueva etiqueta
<dialog>Atributos globalesNueva etiqueta
<dir>Etiqueta eliminada
<div>Estándar o ningunoDivision
<dfn>Estándar o ninguno
<dl>Estándar o ninguno
<dt>Estándar o ninguno
<em>Estándar o ninguno
<embed>height | src | type | widthNueva etiqueta
<fieldset>Estándar o ninguno
<figure>Atributos globalesNueva etiqueta
<font>Etiqueta eliminada
<footer>Atributos globalesNueva etiqueta
<form>Estándar o ninguno
<frame>Etiqueta eliminada
<frameset>Etiqueta eliminada
<h1>... <h6>Estándar o ninguno
<head>Estándar o ninguno
<header>Atributos globalesNueva etiqueta
<hgroup>hgroup se añadió a la especificación HTML5, pero ahora está obsoleta.[4]​ Usar <header>
<hr>NingunoEtiqueta cambiada
<html>Estándar o ninguno
<i>NingunoEtiqueta 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 | widthEtiqueta cambiada: Añadidos 13 elementos a type
<ins>Estándar o ninguno
<isindex>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 globalesNueva etiqueta
<map>Estándar o ninguno
<menu>Estándar o ninguno
<meta>Estándar o ninguno
<meter>high | low | max | min | optimum | valueNueva etiqueta
<nav>Atributos globalesNueva etiqueta
<noframes>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>formNueva etiqueta
<p>Estándar o ninguno
<param>Estándar o ninguno
<pre>Estándar o ninguno
<progress>max | valueNueva etiqueta
<q>
<ruby>citeNueva etiqueta
<rp>Atributos globalesNueva etiqueta
<rt>Atributos globalesNueva etiqueta
<s>Etiqueta eliminada
<samp>Estándar o ninguno
<script>Estándar o ninguno
<section>citeNueva etiqueta
<select>Estándar o ninguno
<small>Atributos globalesEtiqueta Cambiada
<source>media | src | typeNueva etiqueta
<span>Estándar o ninguno
<strike>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 | pubdateNueva etiqueta
<title>Estándar o ninguno
<tr>Estándar o ninguno
<tt>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 | heightNueva etiqueta
<xmp>Etiqueta eliminada

Notas:Enamarillo aquellas etiquetas introducidas en esta nueva versión (enrojo aquellas que fueron eliminadas de la especificación HTML5), enazul las etiquetas que han sido cambiadas todo o en parte y engris 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 laWeb 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 ficherosRDF /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 hacerDrag & Drop mediante eventos.
  • API para trabajar sin conexión. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API deGeolocalización para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas enSQLite) 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><htmlLANG="es"><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).

<!DOCTYPE HTML><html><body><form><inputname="form_number"id="form_number"type="number"min="1"max="10"><inputname="form_date"id="form_date"type="date"><inputname="form_month"id="form_month"type="month"><inputname="form_week"id="form_week"type="week"><inputname="form_time"id="form_time"type="time"><inputname="form_url"id="form_url"type="url"list="url_list"><datalistid="url_list"><optionvalue="http://www.google.com"label="Google"><optionvalue="http://net.tutsplus.com"label="NetTuts+"></datalist><inputname="form_email"id="form_email"type="email"list="email_list"multiple><datalistid="email_list"><optionvalue="jane.doe@test.com"label="Jane Doe"><optionvalue="john.doe@test.com"label="John Doe"></datalist><inputname="form_telephone"id="form_telephone"type="tel"><inputname="form_color"id="form_color"type="color"><label>        Attachments:<inputtype="file"multiplename="att"></label><inputname="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><scriptlanguage="javascript">functionobtener_localizacion(){navigator.geolocation.getCurrentPosition(coordenadas);}functioncoordenadas(position){varlatitud=position.coords.latitude;varlongitud=position.coords.longitude;alert('Tus coordenadas son: ('+latitud+','+longitud+')');}</script><ahref="#"/w/index.php?title=HTML5&action=edit&section=7" title="Editar sección: Referencias">editar]
  1. ↑W3C (6 de octubre de 2009). Ian Hickson y David Hyatt, ed.«HTML5»(en inglés). Consultado el 6 de octubre de 2009. 
  2. ↑Jorge Franganillo (6 de septiembre de 2010).«HTML 5: el nuevo estándar básico del web». 
  3. ↑«HTML 5 Finalized». OSNews. 29 de octubre de 2014. Consultado el 29 de octubre de 2014. 
  4. ↑W3C (13 de junio de 2014).«HTML/Elements/hgroup»(en inglés). 
  5. ↑W3C (2007).«Referencia de etiquetas HTML 5 del Consorcio W3C»(en inglés). Archivado desdeel original el 2 de agosto de 2012. 

Véase también

[editar]

Enlaces externos

[editar]
Control de autoridades
Obtenido de «https://es.wikipedia.org/w/index.php?title=HTML5&oldid=163851730»
Categorías:
Categoría oculta:
[8]ページ先頭
©2009-2025 Movatter.jp