HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 292933
  • Criado:
  • Criador: RodrigoAlmeidaSp
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

HTML5 Demos

Uma coleção de demonstrações mostrando as ultimas tecnologias HTML em ação.

HTML5_Logo_128.png

HTML5 é a ultima evoulução nas definições padrão que definem o HTML. Emboras as especificações do HTML5 ainda não estejam finalizadas e esteja sujeita a mudanças, a Mozilla e outros desenvolvedores de navegadores web já estão implementando algumas partes dele. Os artigos linkados aqui descrevem as partes do HTML5 que já são suportadas pelo motor Mozilla Gecko, usado pelo Firefox  e muitos outros produtos.
Consulte artigos específicos para as versões do navegador Gecko e motores de outros navegadores que suportam cada recurso.

(Aqui está outra classificação de artigos sobre HTML5.)

Introdução ao HTML5

Introdução ao HTML5
Este artigo dá uma idéia inicial sobre como usar HTML5 no design de sua página web ou aplicação.

Elementos de HTML5

Lista de elementos de HTML5 / tags
Essa página que contém uma tabela completa de elementos HTML5 (tags) baseados na prévia da ultima especificação disponível.
Utilizando audio e vídeo
No Firefox 3.5 foi adicionado suporte para elemtenos HTML5 {{HTMLElement("audio")}} e {{HTMLElement("video")}}.
Formulários no HTML5
Um olhar sobre melhorias para formulários web em HTML5: a validação de restrição API, vários novos atributos, novos valores para o atributo{{ HTMLElement("input") }}, {{ htmlattrxref("type", "input") }} e o novo elemento {{ HTMLElement("output") }}.
Seções e em HTML5
Um olhar sobre elementos de delineamento e seccionamento em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}e o {{ HTMLElement("hgroup") }}.
O elemento {{ HTMLElement("mark") }}
O elemento marcar é usado para realçar um texto de maior relevancia  The mark element is used to highlight text of special relevance.
O {{ HTMLElement("figure") }} and {{ HTMLElement("figcaption") }} elements
Estes elementos permitem adicionar figuras e ilustrações, com uma legenda eventual, simplesment encaixado  ao texto.

Suporte Canvas

Tutorial Canvas 
Saiba mais sobre o novo elemento {{HTMLElement ("canvas")}}  e como desenhar gráficos e outros objetos no Firefox.
Texto em API HTML5 para elementos <canvas>
O API de texto HTML5 é agora suportado pelo elemento {{ HTMLElement("canvas") }}.

Características de Aplicações Web

Recursos Offline
Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.
Eventos Online e offline
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
WHATWG client-side session and persistent storage (aka DOM Storage)
Client-side session and persistent storage allows web applications to store structured data on the client side.
O atributo de conteúdo editável: Transforme sua página numa wiki!
HTML5 traz por padrão o atributo contentEditable. Learn more about this feature.
Utilizando arquivos de aplicações web
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the {{ HTMLElement("input") }} of type file HTML element's new multiple attribute.

DOM features

getElementsByClassName
The getElementsByClassName methods on Document and Element nodes are supported. These methods allow finding elements with a given classes or a given list of classes.
Drag and drop
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML
The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.

HTML parser

Gecko's HTML5-compliant parser—which turns the bytes of an HTML document into a DOM—has been enabled by default as of May 2010. (Note that the version of the HTML5 parser that was shipped in Gecko 1.9.2 / Firefox 3.6 is rather buggy and not recommended for actual use.) {{ fx_minversion_inline(4.0) }}

Idiomas adicionais

  • localName and namespaceURI in HTML documents now behave like they do in XML documents: localName returns in lower case and namespaceURI for HTML elements is "http://www.w3.org/1999/xhtml"
  • When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new hashchange event is sent to the page. See window.onhashchange for more information.
  • Support for element.classList to allow easier handling of the class attribute.
  • document readiness event document.onreadystatechange  and document.readyState property are supported.
  • Colors in presentation attributes are interpreted according to HTML5.

Technologies often called part of HTML5 that aren't

These often get lumped in with a broad term use of "HTML5" but are not actually part of the W3C HTML5 Spec.

Ver também

Changes in Firefox releases that affect Web developers:

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

 

Fonte da revisão

<div class="callout-box">
  <div style="font:normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;">
    HTML5 Demos</div>
  <p>Uma <a href="/en-US/demos/tag/tech:html5" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3/">coleção de demonstrações </a>mostrando as ultimas tecnologias HTML em ação.</p>
  <p><a href="/en/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/@api/deki/files/6020/=HTML5_Logo_128.png" style="" /></a></p>
</div>
<p>HTML5 é a ultima evoulução nas definições padrão que definem o HTML. Emboras as <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">especificações do HTML5 </a>ainda não estejam finalizadas e esteja sujeita a mudanças, a Mozilla e outros desenvolvedores de navegadores web já estão implementando algumas partes dele. Os artigos linkados aqui descrevem as partes do HTML5 que já são suportadas pelo motor Mozilla <a href="https://developer-new.mozilla.org/en/Gecko" title="https://developer-new.mozilla.org/en/Gecko">Gecko</a>, usado pelo <a href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a>&nbsp; e <a href="https://developer-new.mozilla.org/En/List_of_Mozilla-Based_Applications" title="https://developer-new.mozilla.org/En/List_of_Mozilla-Based_Applications">muitos outros produtos</a>.<br />
  <span class="long_text" id="result_box" lang="pt"><span class="hps">Consulte</span> <span class="hps">artigos específicos</span> <span class="hps">para as versões do</span> <span class="hps">navegador</span> <span class="hps">Gecko</span> <span class="hps">e</span> <span class="hps">motores de</span> <span class="hps">outros</span> <span class="hps">navegadores que suportam</span> <span class="hps">cada recurso.</span></span></p>
<p>(Aqui está <a href="https://developer-new.mozilla.org/en/HTML/HTML5/HTML5_Thematic_Classification" title="https://developer-new.mozilla.org/en/HTML/HTML5/HTML5_Thematic_Classification">outra classificação de artigos sobre HTML5</a>.)</p>
<h2 id="Introdu.C3.A7.C3.A3o_ao_HTML5">Introdução ao HTML5</h2>
<dl>
  <dt>
    <a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>Introdução ao HTML5</strong></a></dt>
  <dd>
    Este artigo dá uma idéia inicial sobre como usar HTML5 no design de sua página web ou aplicação.</dd>
</dl>
<h2 id="Elementos_de_HTML5">Elementos de HTML5</h2>
<dl>
  <dt>
    <a href="/en/HTML/HTML5/HTML5_element_list" title="en"><strong>Lista de elementos de HTML5 / tags</strong></a></dt>
  <dd>
    Essa página que contém uma tabela completa de elementos HTML5 (tags) baseados na prévia da ultima especificação disponível.</dd>
</dl>
<dl>
  <dt>
    <a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Utilizando audio e vídeo</a></dt>
  <dd>
    No Firefox 3.5 foi adicionado suporte para elemtenos HTML5 {{HTMLElement("audio")}} e {{HTMLElement("video")}}.</dd>
  <dt>
    <a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms in HTML5">Formulários no HTML5</a></dt>
  <dd>
    <span id="result_box" lang="pt"><span class="hps">Um olhar sobre</span> <span class="hps">melhorias</span> <span class="hps">para</span> <span class="hps">formulários web</span> <span class="hps">em</span> <span class="hps">HTML5</span><span>: a</span> <span class="hps">validação de restrição</span></span> API, vários novos atributos, novos valores para o atributo{{ HTMLElement("input") }}, {{ htmlattrxref("type", "input") }} e o novo elemento {{ HTMLElement("output") }}.</dd>
  <dt>
    <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e em HTML5</a></dt>
  <dd>
    Um olhar sobre elementos de delineamento e <span class="short_text" id="result_box" lang="pt"><span class="hps">seccionamento</span></span> em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}e o {{ HTMLElement("hgroup") }}.</dd>
  <dt>
    <em>O elemento {{ HTMLElement("mark") }}</em></dt>
  <dd>
    O elemento marcar é usado para realçar um texto de maior relevancia&nbsp; The mark element is used to highlight text of special <em>relevance</em>.</dd>
  <dt>
    <em>O {{ HTMLElement("figure") }} and {{ HTMLElement("figcaption") }} elements</em></dt>
  <dd>
    <span id="result_box" lang="pt"><span class="hps">Estes elementos</span> <span class="hps">permitem adicionar</span> <span class="hps">figuras e</span> <span class="hps">ilustrações</span><span>,</span> <span class="hps">com uma legenda</span> <span class="hps">eventual</span><span>,</span> <span class="hps">simplesment encaixado&nbsp;</span> <span class="hps">ao texto.</span></span></dd>
</dl>
<h3 id="Suporte_Canvas">Suporte Canvas</h3>
<dl>
  <dt>
    <a href="/en/Canvas_tutorial" title="https://developer.mozilla.org/en/Canvas_tutorial">Tutorial Canvas&nbsp; </a></dt>
  <dd>
    <span id="result_box" lang="pt"><span class="hps">Saiba mais sobre</span> <span class="hps">o novo elemento</span> <span class="hps atn">{{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps">"canvas"</span><span>)}}</span>&nbsp; <span class="hps">e como</span> <span class="hps">desenhar gráficos</span> <span class="hps">e outros objetos no</span> <span class="hps">Firefox.</span></span></dd>
  <dt>
    <a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">Texto em API HTML5 para elementos <code>&lt;canvas&gt;</code> </a></dt>
  <dd>
    O API de texto HTML5 é agora suportado pelo elemento {{ HTMLElement("canvas") }}.</dd>
</dl>
<h2 id="Caracter.C3.ADsticas_de_Aplica.C3.A7.C3.B5es_Web">Características de Aplicações Web</h2>
<dl>
  <dt>
    <a href="/en/HTML/Using_the_application_cache" title="en/Offline_resources_in_Firefox">Recursos Offline</a></dt>
  <dd>
    Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd>
  <dt>
    <a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Eventos Online e offline </a></dt>
  <dd>
    Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
  <dt>
    <a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt>
  <dd>
    Client-side session and persistent storage allows web applications to store structured data on the client side.</dd>
  <dt>
    <a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">O atributo de conteúdo editável: Transforme sua página numa wiki!</a></dt>
  <dd>
    HTML5 traz por padrão o atributo contentEditable. Learn more about this feature.</dd>
  <dt>
    <a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Utilizando arquivos de aplicações web</a></dt>
  <dd>
    Support for the new HTML5 File API&nbsp;has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{ HTMLElement("input") }}</span> of <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> HTML&nbsp;element's new <a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute.</dd>
</dl>
<h2 id="DOM_features">DOM features</h2>
<dl>
  <dt>
    <a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a></dt>
  <dd>
    The getElementsByClassName methods on Document and Element nodes are supported. These methods allow finding elements with a given classes or a given list of classes.</dd>
  <dt>
    <a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Drag and drop</a></dt>
  <dd>
    The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API&nbsp;for use by extensions and Mozilla-based applications.</dd>
  <dt>
    <a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Focus management in HTML</a></dt>
  <dd>
    The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
  <dt>
    <a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
  <dd>
    You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
</dl>
<h2 id="HTML_parser">HTML parser</h2>
<p>Gecko's <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">HTML5-compliant parser</a>—which turns the bytes of an HTML document into a DOM—has been enabled by default as of May&nbsp;2010. (Note that the version of the HTML5 parser that was shipped in Gecko 1.9.2 / Firefox 3.6 is rather buggy and not recommended for actual use.) {{ fx_minversion_inline(4.0) }}</p>
<h2 id="Idiomas_adicionais">Idiomas adicionais</h2>
<ul>
  <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XML&nbsp;documents: <code>localName</code> returns in lower case and <code>namespaceURI</code>&nbsp;for HTML&nbsp;elements is <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></li>
  <li>When the page's URI's document fragment identifier (the part after the "#" (hash) character)&nbsp;changes, a new <code>hashchange</code> event is sent to the page. See <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> for more information.</li>
  <li>Support for <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> to allow easier handling of the class attribute.</li>
  <li>document readiness event <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a>&nbsp; and <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> property are supported.</li>
  <li>Colors in presentation attributes are interpreted according to HTML5.</li>
</ul>
<h2 id="Technologies_often_called_part_of_HTML5_that_aren't">Technologies often called part of HTML5 that aren't</h2>
<p>These often get lumped in with a broad term use of "HTML5" but are not actually part of the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="W3C HTML5 Spec">W3C HTML5 Spec</a>.</p>
<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/DOM/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()</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><a href="/en/CSS/CSS3" title="CSS3">CSS3</a></li>
  <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li>
  <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li>
  <li><a href="/en/WebSockets" title="https://developer.mozilla.org/en/WebSockets">Web Sockets</a></li>
  <li>Faster JavaScript</li>
</ul>
<h2 id="Ver_tamb.C3.A9m">Ver também</h2>
<p>Changes in Firefox releases that affect Web developers:</p>
<ul>
  <li><a href="/en/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li>
  <li><a href="/en/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li>
  <li><a href="/en/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li>
  <li><a href="/en/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li>
  <li><a href="/en/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li>
  <li><a href="/en/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li>
  <li><a href="/en/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li>
  <li><a href="/en/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li>
  <li><a href="../../../../en/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li>
  <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 </a></li>
  <li><a href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 </a></li>
  <li><a href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 </a></li>
  <li><a href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 </a></li>
  <li><a href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 </a></li>
</ul>
<div class="noinclude">
  <p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p>
</div>
<p>&nbsp;</p>
Reverter para esta revisão