HTML5

  • Enlace amigable (slug) de la revisión: HTML/HTML5
  • Título de la revisión: HTML5
  • Id de la revisión: 61819
  • Creada:
  • Creador: inma_610
  • ¿Es la revisión actual? No
  • Comentario one or more formatting changes

Contenido de la revisión

El 28 de octubre de 2009, el borrador de especificación de HTML5  llegó al estado de última llamada de WHATWG, lo que significa que está casi finalizado. Este artículo describe qué partes de la especificación de HTML5 están ya admitidas por el motor de Mozilla, Gecko.

Introducción a HTML5

Introducción a HTML5
Este artículo es una introducción sobre cómo utilizar HTML5 en tu diseño o aplicación web.

Elementos de HTML5

Usar audio y video {{ gecko_minversion_inline("1.9.2") }}
Firefox 3.5 añadió la compatibilidad para los elementos de {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} HTML5.
Formularios en HTML5 {{ gecko_minversion_inline("2.0") }}
Una visión general de las mejoras en los formularios web en HTML5: API para validación restringida, varios atributos nuevos, nuevos valores para el {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} y el nuevo elemento {{ HTMLElement("output") }}.
Secciones y contornos de HTML5 {{ gecko_minversion_inline("2.0") }}
Una visión general acerca de los nuevos elementos para secciones y contornos en HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} y {{ HTMLElement("hgroup") }}.
El elemento {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}
El elemento mark se usa para subrayar un texto de especial relevancia.
Los elementos {{ HTMLElement("figure") }} y {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}
Estos elementos permiten añadir imágenes e ilustraciones, con la posibilidad de incluir una descripción de acoplamiento débil al texto principal.

Compatibilidad con canvas

Dibujar gráficos con canvas {{ gecko_minversion_inline("1.8.1") }}
 Conoce el nuevo elemento {{ HTMLElement("canvas") }} y cómo dibujar gráficos y otros objetos en Firefox.
La API de texto HTML5 para los elementos <canvas> {{ gecko_minversion_inline("1.9.1") }}
La API de texto HTML5 ya es admitida por los elementos {{ HTMLElement("canvas") }}.

Características de las aplicaciones web

Recursos sin conexión en Firefox {{ gecko_minversion_inline("1.9.1") }}
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5.
Web workers {{ gecko_minversion_inline("1.9.1") }}
Firefox 3.5 admite web workers, lo que facilita la compatibilidad con los subprocesos múltiples en las aplicaciones web. No forma parte del estándar HTML5, pero sí es una estandarización de WHATWG y a menudo se menciona junto con HTML5.
Eventos con y sin conexión {{ gecko_minversion_inline("1.9") }}
Firefox 3 admite eventos con y sin conexión, lo que permite que las aplicaciones y extensiones detecten si hay o no una conexión a Internet activa, así como el momento en que la conexión sube y baja.
Sesiones en el lado del cliente de WHATWG y almacenamiento permanente (conocido también como almacenamiento DOM [Document Object Model, modelo de objetos del documento]) {{ gecko_minversion_inline("1.8.1") }}
Las sesiones en el lado del cliente y el almacenamiento permanente permiten que las aplicaciones web guarden los datos estructurados en el lado del cliente.
Uso de archivos desde aplicaciones web {{ gecko_minversion_inline("1.9.2") }}
Se ha añadido a Gecko la compatibilidad con la nueva API de archivos HTML5, lo que hace posible que las aplicaciones web tengan acceso a los archivos locales selecionados por el usuario. Incluye la compatibilidad para seleccionar archivos múltiples a través del nuevo atributo múltiple de elementos HTML {{ HTMLElement("input") }} de type file.Input#attr-multiple

Características de DOM

getElementsByClassName {{ fx_minversion_inline("3") }}
Son compatibles los métodos getElementsByClassName en los nodos de Documento y Elemento. Estos métodos permiten buscar elementos según una clase determinada o según una lista de clases determinada.
Arrastrar y soltar {{ fx_minversion_inline("3") }}
La API arrastrar y soltar de HTML5 permite la compatibilidad para arrastrar y soltar elementos dentro y desde los sitios web. También proporciona una API más sencilla de usar para las extensiones y aplicaciones basadas en Mozilla.
Gestión del foco en HTML {{ fx_minversion_inline("3") }}
Los nuevos atributos de HTML5 activeElement y hasFocus son compatibles.
Controladores de protocolo basados en la web {{ fx_minversion_inline("3") }}
Ya puedes registrar aplicaciones web como controladores de protocolo mediante el método navigator.registerProtocolHandler() .

Analizador de HTML

Se ha habilitado de manera predeterminada el analizador compatible con HTML5 de Gecko -que convierte los bytes de un documento HTML en un DOM (Document Object Model, modelo de objetos del documento)- a partir de mayo de 2010. (Ten en cuenta que la versión del analizador que se envió en Gecko 1.9.2 / Firefox 3.6 produce bastantes errores por lo que no se recomienda su uso). {{ fx_minversion_inline("4") }}

Cambios adicionales

  • localName y namespaceURI en los documentos HTML se comportan ahora igual que en los documentos XML : localName vuelve a estar en minúscula y namespaceURI para elementos HTML es "http://www.w3.org/1999/xhtml" {{ fx_minversion_inline("3") }}
  • Cuando cambia el identificador de fragmento en un documento del URI de la página (la parte posterior al carácter "#" (hash)), se envía un evento hashchange nuevo a la página. Consulta window.onhashchange para obtener más información. {{ fx_minversion_inline("3") }}
  • La compatibilidad con element.classList permite un control más sencillo del atributo class. {{ fx_minversion_inline("3") }}
  • El evento de disponibilidad de documento document.onreadystatechange {{ fx_minversion_inline("4") }} y la propiedad document.readyState {{ fx_minversion_inline("3") }} son compatibles.
  • Los colores en los atributos de presentación se interpretan de acuerdo a HTML5 (excepto los colores del sistema, que no son admitidos). {{ fx_minversion_inline("4") }}

Tecnologías que a menudo se consideran parte de HTML5 pero que no lo son

Consulta también

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "pt": "pt/HTML", "en": "en/HTML/HTML5"} ) }}

Fuente de la revisión

<p>El 28 de octubre de 2009, el <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">borrador de especificación </a> de HTML5  llegó al estado de última llamada de WHATWG, lo que significa que está casi finalizado. Este artículo describe qué partes de la especificación de HTML5 están ya admitidas por el motor de Mozilla, Gecko.</p>
<h2>Introducción a HTML5</h2>
<dl> <dt><strong><a href="/es/HTML/HTML5/Introducción_a_HTML5" title="es/HTML/HTML5/Introducción a HTML5"><span style="text-decoration: underline;">Introducción a HTML5</span></a><br> </strong></dt> <dd>Este artículo es una introducción sobre cómo utilizar HTML5 en tu diseño o aplicación web.</dd>
</dl>
<h2>Elementos de HTML5</h2>
<dl> <dt><a href="/es/Usando_audio_y_video_en_Firefox" title="es/Usando audio y video en Firefox">Usar audio y video</a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Firefox 3.5 añadió la compatibilidad para los elementos de {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} HTML5.</dd> <dt><a href="/es/HTML/HTML5/Forms_in_HTML5" title="es/HTML/HTML5/Forms in HTML5">Formularios en HTML5</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>Una visión general de las mejoras en los formularios web en HTML5: API para validación restringida, varios atributos nuevos, nuevos valores para el {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} y el nuevo elemento {{ HTMLElement("output") }}.</dd> <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y contornos de HTML5</a> {{ gecko_minversion_inline("2.0") }}</dt> <dd>Una visión general acerca de los nuevos elementos para secciones y contornos en HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} y {{ HTMLElement("hgroup") }}.</dd> <dt>El elemento {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}</dt> <dd>El elemento mark se usa para subrayar un texto de especial <em>relevancia</em>.</dd> <dt>Los elementos {{ HTMLElement("figure") }} y {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}</dt> <dd>Estos elementos permiten añadir imágenes e ilustraciones, con la posibilidad de incluir una descripción de acoplamiento débil al texto principal.</dd>
</dl>
<h3>Compatibilidad con canvas</h3>
<dl> <dt><a href="/en/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Dibujar gráficos con canvas</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd> Conoce el nuevo elemento <code>{{ HTMLElement("canvas") }}</code> y cómo dibujar gráficos y otros objetos en Firefox.</dd> <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">La API de texto HTML5 para los elementos <code>&lt;canvas&gt;</code> …</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>La API de texto HTML5 ya es admitida por los elementos {{ HTMLElement("canvas") }}.</dd>
</dl>
<h2>Características de las aplicaciones web</h2>
<dl> <dt><a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Recursos sin conexión en Firefox</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5.</dd> <dt><a href="/En/Using_web_workers" title="En/Using_web_workers">Web workers</a> {{ gecko_minversion_inline("1.9.1") }}</dt> <dd>Firefox 3.5 admite web workers, lo que facilita la compatibilidad con los subprocesos múltiples en las aplicaciones web. No forma parte del estándar HTML5, pero sí es una estandarización de WHATWG y a menudo se menciona junto con HTML5.</dd> <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Eventos con y sin conexión</a> {{ gecko_minversion_inline("1.9") }}</dt> <dd>Firefox 3 admite eventos con y sin conexión, lo que permite que las aplicaciones y extensiones detecten si hay o no una conexión a Internet activa, así como el momento en que la conexión sube y baja.</dd> <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">Sesiones en el lado del cliente de WHATWG y almacenamiento permanente (conocido también como almacenamiento DOM [<em>Document Object Model</em>, modelo de objetos del documento])</a> {{ gecko_minversion_inline("1.8.1") }}</dt> <dd>Las sesiones en el lado del cliente y el almacenamiento permanente permiten que las aplicaciones web guarden los datos estructurados en el lado del cliente.</dd> <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Uso de archivos desde aplicaciones web</a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Se ha añadido a Gecko la compatibilidad con la nueva API de archivos HTML5, lo que hace posible que las aplicaciones web tengan acceso a los archivos locales selecionados por el usuario. Incluye la compatibilidad para seleccionar archivos múltiples a través del nuevo atributo múltiple de elementos HTML <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> de <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: Courier New;">file.</span><a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple">Input#attr-multiple</a></dd>
</dl>
<h2>Características de DOM</h2>
<dl> <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline("3") }}</dt> <dd>Son compatibles los métodos getElementsByClassName en los nodos de Documento y Elemento. Estos métodos permiten buscar elementos según una clase determinada o según una lista de clases determinada.</dd> <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Arrastrar y soltar</a> {{ fx_minversion_inline("3") }}</dt> <dd>La API arrastrar y soltar de HTML5 permite la compatibilidad para arrastrar y soltar elementos dentro y desde los sitios web. También proporciona una API más sencilla de usar para las extensiones y aplicaciones basadas en Mozilla.</dd> <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Gestión del foco en HTML</a> {{ fx_minversion_inline("3") }}</dt> <dd>Los nuevos atributos de HTML5 <code>activeElement</code> y <code>hasFocus</code> son compatibles.</dd> <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Controladores de protocolo basados en la web</a> {{ fx_minversion_inline("3") }}</dt> <dd>Ya puedes registrar aplicaciones web como controladores de protocolo mediante el método <code>navigator.registerProtocolHandler()</code> .</dd>
</dl>
<h2>Analizador de HTML</h2>
<p>Se ha habilitado de manera predeterminada el analizador compatible con HTML5 de Gecko -que convierte los bytes de un documento HTML en un DOM (<em>Document Object Model</em>, modelo de objetos del documento)- a partir de mayo de 2010. (Ten en cuenta que la versión del analizador que se envió en Gecko 1.9.2 / Firefox 3.6 produce bastantes errores por lo que no se recomienda su uso). {{ fx_minversion_inline("4") }}</p>
<h2>Cambios adicionales</h2>
<ul> <li><code>localName</code> y <code>namespaceURI</code> en los documentos HTML se comportan ahora igual que en los documentos XML : <code>localName</code> vuelve a estar en minúscula y <code>namespaceURI</code> para elementos HTML es <code>"<a class=" external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" target="_blank" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code>{{ fx_minversion_inline("3") }}</li> <li>Cuando cambia el identificador de fragmento en un documento del URI de la página (la parte posterior al carácter "#" (hash)), se envía un evento <code>hashchange</code> nuevo a la página. Consulta <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> para obtener más información. {{ fx_minversion_inline("3") }}</li> <li>La compatibilidad con <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> permite un control más sencillo del atributo class. {{ fx_minversion_inline("3") }}</li> <li>El evento de disponibilidad de documento <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline("4") }} y la propiedad <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline("3") }} son compatibles.</li> <li>Los colores en los atributos de presentación se interpretan de acuerdo a HTML5 (excepto los colores del sistema, que no son admitidos). {{ fx_minversion_inline("4") }}</li>
</ul>
<h2>Tecnologías que a menudo se consideran parte de HTML5 pero que no lo son</h2>
<ul> <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> <li><code><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> <li><code><a href="/En/DOM/Locating_DOM_elements_using_selectors" title="En/DOM/Locating DOM elements using selectors">querySelector(All)</a></code></li> <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> <li><a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="En/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> <li>CSS3</li> <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> <li><a href="/En/Using_web_workers" title="En/Using web workers">Web Workers</a></li> <li>Web Sockets</li> <li>Faster JavaScript</li>
</ul>
<h2>Consulta también</h2>
<ul> <li><a href="../../../../en/Firefox_4_for_developers" rel="internal">Firefox 4 para desarrolladores</a></li> <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 para desarrolladores</a></li> <li><a href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 para desarrolladores</a></li> <li><a href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 for desarrolladores</a></li> <li><a href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 para desarrolladores</a></li> <li><a href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 para desarrolladores</a></li>
</ul>
<div class="noinclude">
<p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "pt": "pt/HTML", "en": "en/HTML/HTML5"} ) }}</p>
</div>
Revertir a esta revisión