path: root/files/pt-br/web/html/html5/index.html

---
title: HTML5
slug: Web/HTML/HTML5
tags:
  - Desenvolvimento Web
  - Guía
  - HTML
  - HTML5
  - Visão Geral
  - Web
translation_of: Web/Guide/HTML/HTML5
---
<p>HTML5 é a mais recente evolução do padrão que define o <a href="https://developer.mozilla.org/pt-BR/docs/HTML" title="https://developer.mozilla.org/pt-BR/docs/HTML">HTML</a>. O termo representa dois conceitos diferentes:</p>

<ul>
 <li>É uma nova versão da <em>linguagem </em>HTML, com novos elementos, atributos, e comportamentos</li>
 <li>e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado <em>HTML5 &amp; friends</em> e muitas vezes abreviado apenas como <em>HTML5.</em></li>
</ul>

<p>Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;</p>

<ul>
 <li><em>Semântica</em>: permite você descrever mais precisamente o seu conteúdo.</li>
 <li>Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.</li>
 <li>Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.</li>
 <li>Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.</li>
 <li>Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. </li>
 <li>Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.</li>
 <li>Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.</li>
 <li>Estilização: permite aos autores a escrita de temas mais sofisticados.</li>
</ul>

<div class="twocolumns">

</div>

<h2 id="Semântica"><img alt="" src="https://mdn.mozillademos.org/files/3827/HTML5_Semantics_512.png" style="height: 50px; width: 50px;"> Semântica </h2>

<dl>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document">Seções e estruturas em HTML</a></strong></dt>
 <dd>Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}</dd>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video">Utilizando áudio e vídeo com HTML5</a></strong></dt>
 <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. </dd>
 <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/HTML/Forms_in_HTML">Formulários em HTML5</a></strong> </dt>
 <dd>Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.</dd>
 <dt><strong>Novos elementos semânticos</strong></dt>
 <dd>Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element">elementos válidos do HTML5</a>.</dd>
 <dt><strong>Melhorias no {{HTMLElement("iframe")}}</strong></dt>
 <dd>Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento <strong>{{HTMLElement("iframe")}}.</strong></dd>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/MathML">​MathML</a></dt>
 <dd>Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.</dd>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5">Introdução ao HTML5</a></dt>
 <dd>Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. </dd>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Parser_HTML5">HTML5 parser compatível</a></dt>
 <dd>O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.</dd>
</dl>

<h2 id="Conectividade"><img alt="" src="https://mdn.mozillademos.org/files/3839/HTML5_Connectivity_512.png" style="height: 50px; width: 50px;">Conectividade</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/WebSockets">Web Sockets</a></dt>
 <dd>Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Eventos do servidor</a></dt>
 <dd>Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.</dd>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/API/WebRTC">WebRTC</a></dt>
 <dd>WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.</dd>
</dl>

<h2 id="Offline_e_armazenamento"><img alt="" src="https://mdn.mozillademos.org/files/3833/HTML5_Offline_Storage_512.png" style="height: 50px; width: 50px;">Offline e armazenamento</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">Recursos offline: cache de aplicação</a></dt>
 <dd>Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.</dd>
 <dt>Eventos online e offline</dt>
 <dd>
 <p>Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. </p>
 </dd>
 <dt>WHATWG </dt>
 <dd>Sessão <em>client-side</em> e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.</dd>
 <dt>IndexedDB</dt>
 <dd>É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.</dd>
 <dt>Uso de arquivos de aplicações web</dt>
 <dd>Foi adicionado ao <a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Gecko">Gecko</a> o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input#attr-type">tipo</a> <span style="font-family: courier;">file</span> do HTML5. Há também o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader">FileReader</a>.</dd>
</dl>

<h2 id="Multimídia"><img alt="" src="https://mdn.mozillademos.org/files/3835/HTML5_Multimedia_512.png" style="height: 50px; width: 50px;">Multimídia</h2>

<dl>
 <dt>Utilizando áudio e vídeo com HTML5</dt>
 <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.</dd>
 <dt>WebRTC</dt>
 <dd>Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um <em>plugin</em> ou aplicação externa.</dd>
 <dt>API da câmera</dt>
 <dd>Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.</dd>
 <dt>Track e WebVTT</dt>
 <dd>O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.</dd>
</dl>

<h2 id="Gráficos_e_efeitos_3D"><img alt="" src="https://mdn.mozillademos.org/files/3841/HTML5_3D_Effects_512.png" style="height: 50px; width: 50px;">Gráficos e efeitos 3D</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial">Canvas</a></dt>
 <dd>Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.</dd>
 <dt>API de texto para {{HTMLElement("canvas")}}</dt>
 <dd>O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.</dd>
 <dt>WebGL</dt>
 <dd>WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.</dd>
 <dt>SVG</dt>
 <dd>Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.</dd>
</dl>

<h2 id="Performance_e_integração"><img alt="" src="https://developer.mozilla.org/files/3831/HTML5_Performance_512.png" style="height: 50px; width: 50px;">Performance e integração</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
 <dd>Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt>
 <dd>Permite buscar de forma <span id="result_box" lang="pt"><span>assíncrona</span></span> algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do <a href="https://developer.mozilla.org/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
 <dt>Motor JIT-compiling para JavaScript</dt>
 <dd>A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
 <dd>Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">O atributo contentEditable: Transforme seu website em uma wiki!</a></dt>
 <dd>O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt>
 <dd>A API do HTML5 permite suportar o recurso de arrastar e soltar (<em>dragging and dropping</em>) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Foco de gestão em HTML</a></dt>
 <dd>O novo HTML5 <code>activeElement</code> e <code>hasFocus</code> são atributos suportados.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manipuladores de protocolos beseados na web</a></dt>
 <dd>Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método the<code>navigator.registerProtocolHandler()</code>.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
 <dd>Permite o controle de animações de renderização para obter a performance ideal.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Fullscreen</a></dt>
 <dd>Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API bloqueio de ponteiro</a></dt>
 <dd>Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos online e offline</a></dt>
 <dd>A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.</dd>
</dl>

<h2 id="Acesso_à_dispositivos"><img alt="" src="https://developer.mozilla.org/files/3837/HTML5_Device_Access_512.png" style="height: 50px; width: 50px;">Acesso à dispositivos</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Usando a API da câmera</a></dt>
 <dd>É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventos touch</a></dt>
 <dd>Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (<em>touch screens</em>).</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using geolocation">Utilizando geolocalização</a></dt>
 <dd>Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detectando a orientaçåo do dispositivo</a></dt>
 <dd>Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.</dd>
</dl>

<h2 id="Estilização"><img alt="" src="https://developer.mozilla.org/files/3829/HTML5_Styling_512.png" style="height: 50px; width: 50px;">Estilização</h2>

<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> <span id="result_box" lang="pt"><span>foi estendido para</span> <span>ser</span> <span>capaz de estilo</span> <span>elementos</span> <span>de uma forma</span> <span>muito mais complexa</span></span>. Sua extensão, também conhecido como <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.</p>

<dl>
 <dt>Novas caracteristicas dos estilos de background</dt>
 <dd>Agora é possível determinar uma sombra à um elemento, usando a propriedade <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" title="The box-shadow property describes one or more shadow effects as a comma-separated list.">box-shadow</a> </code>e também podemos definir <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds">diversos backgrounds</a> para um elemento.</dd>
 <dt>More fancy borders</dt>
 <dd>Também é possível utilizar imagens para estilizar bordas, usando a propriedade <code>border-image. </code>Bordas arredondadas são suportadas através da propriedade <code>border-radius.</code></dd>
 <dt>Animating your style</dt>
 <dd>Utilizando <code>transition </code>para animar diferentes estágios de determinadas propriedades ou usando <code>animation </code>para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. </dd>
 <dd>Using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a>to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd>
 <dt>Typography improvement</dt>
 <dd>Authors have better control to reach better typography. Eles podem controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" title="The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 Horizontal Ellipsis), or display a custom string."><code>text-overflow</code></a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, mas tambem pode adicionar um <a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> a ele ou controlar mais precisamente a sua <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" title="The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule."><code>@font-face</code></a> at-rule.</dd>
 <dt>Novos layouts de apresentaçoes</dt>
 <dd>A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
</dl>



<p>(Alguns <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">outros artigos relacionados com HTML5</a>.)</p>

<h2 id="Introdução_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 introduz como utilizar HTML5 no desenho de site ou de sua aplicação.</dd>
</dl>

<h2 id="Elementos_do_HTML5">Elementos do HTML5</h2>

<dl>
 <dt><a href="/en/HTML/HTML5/HTML5_element_list" title="en"><strong>Lista de tags / elementos do HTML5</strong></a></dt>
 <dd>Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.</dd>
</dl>

<dl>
 <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Utilizando audio e video</a></dt>
 <dd>Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.</dd>
 <dt><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms in HTML5">Formulários em HTML5</a></dt>
 <dd><span id="result_box" lang="pt"><span class="hps">Veja as</span> <span class="hps">melhorias 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">API</span> de <span class="hps">validação de restrição</span><span>, vários</span> <span class="hps">novos atributos,</span> <span class="hps">novos valores</span> <span class="hps">para </span></span>{{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }}<span id="result_box" lang="pt"> <span class="hps">e os</span> <span class="hps">novo</span> <span class="hps">elemento </span></span>{{ HTMLElement("output") }}.<span id="result_box" lang="pt"> </span></dd>
 <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e esboços em HTML5</a></dt>
 <dd><span id="result_box" lang="pt"><span class="hps">Veja os novos elementos para </span><span class="hps">delinear</span> e seccionar <span class="hps">em</span> <span class="hps">HTML5:</span></span> {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd>
 <dt>O elemento {{ HTMLElement("mark") }}</dt>
 <dd>Este elemento é usado para marcar em destaque um texto de especial relevância.</dd>
 <dt>O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}</dt>
 <dd>Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, <span id="result_box" lang="pt">colocado a<span class="hps">baixo d</span><span class="hps">o texto principal</span><span>.</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 </a></dt>
 <dd> Apreda sobre o novo elemento<code> {{ HTMLElement("canvas") }} </code>e como desenhar gráficos e outros objetos no Firefox.</dd>
 <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">HTML5 API texto para elemento &lt;canvas&gt;</a></dt>
 <dd><span id="result_box" lang="pt">HTML5 <span class="hps">API</span> <span class="hps">texto</span> <span class="hps">agora é suportado</span> <span class="atn hps">pelo </span></span>{{ HTMLElement("canvas") }}<span id="result_box" lang="pt"><span class="hps">.</span></span></dd>
</dl>

<div class="twocolumns">
<h2 id="Recursos_de_aplicações_web">Recursos de aplicações web</h2>
</div>

<dl>
 <dt><a href="/en/HTML/Using_the_application_cache" title="en/Offline_resources_in_Firefox">Recursos Offline</a></dt>
 <dd><span id="result_box" lang="pt">O <span class="hps">Firefox</span> suporta completamente <span class="hps">as</span> <span class="hps">especificações de</span> <span class="hps">HTML5 para </span> <span class="hps">recurso</span> <span class="hps">offline.</span> <span class="hps">A maioria dos outros</span> navegadores <span class="hps">tem</span> algum nível de suporte aos <span class="hps">recursos offline</span></span>.</dd>
 <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Eventos online e offline</a></dt>
 <dd><span id="result_box" lang="pt"><span class="hps">O Firefox 3 suporta</span> <span class="hps">WHATWG</span> <span class="hps">eventos online e offline</span><span>, que permitem que</span> <span class="hps">aplicações e extensões</span> <span class="hps">detectem se</span> <span class="hps">há ou não</span> <span class="hps">uma conexão ativa com Internet</span><span>, bem como</span> <span class="hps">detecta</span> <span class="hps">quando a conexão</span> conecta e desconecta.</span></dd>
 <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)</a></dt>
 <dd><span id="result_box" lang="pt"><span class="hps">A sessão do lado cliente</span> <span class="hps">e</span> o <span class="hps">armazenamento persistente</span> <span class="hps">permitem que as aplicações web</span> <span class="hps">armazenem</span> <span class="hps">dados estruturados</span> <span class="hps">no lado  cliente</span><span>.</span></span></dd>
 <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">O atributo contentEditable: transforma seu website em um wiki!</a></dt>
 <dd><span id="result_box" lang="pt"><span class="hps">O HTML5</span> <span class="hps">tem</span> um<span class="hps"> atributo</span> <span class="hps">padronizado</span> <span class="hps">contentEditable</span><span>.</span> <span class="hps">Saiba mais sobre</span> <span class="hps">este recurso.</span></span></dd>
 <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Usando arquivos de aplicações web</a></dt>
 <dd><span id="result_box" lang="pt"><span class="hps">Suporta para </span><span class="hps">a nova HTML5 API de arquivo</span> <span class="hps">foi adicionada ao</span> <span class="hps">Gecko,</span> <span class="hps">tornando possível </span><span class="hps">as aplicações web</span> <span class="hps">para acessarem arquivos</span> <span class="hps">locais</span> <span class="hps">selecionados pelo usuário</span><span>.</span> <span class="hps">Isso inclui suporte</span> <span class="hps">para selecionar vários arquivos</span> <span class="hps">usando o novo element</span>o HTML </span><span style="font-family: monospace;">{{ HTMLElement("input") }}</span> do <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;">arquivo</span> <span id="result_box" lang="pt"><span>de</span> </span><a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiplos</strong></a> atributos.</dd>
</dl>

<h2 id="Recursos_DOM">Recursos DOM</h2>

<dl>
 <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a></dt>
 <dd>O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.</dd>
 <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt>
 <dd>A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. <span id="result_box" lang="pt"><span class="hps">Isto também proporciona</span> <span class="hps">uma API simples</span> <span class="hps">para uso de extensões</span> <span class="hps">e</span> <span class="hps">aplicativos baseados em</span> <span class="hps">Mozilla</span><span>.</span></span></dd>
 <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Foco na gestão do HTML</a></dt>
 <dd><span id="result_box" lang="pt">Os novos</span> <code>activeElement</code> e <code>hasFocus</code> são atributos suportados pelo HTML5..</dd>
 <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Manipuladores de protocolo baseado em web</a></dt>
 <dd>Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  <code>navigator.registerProtocolHandler()</code>.</dd>
</dl>

<h2 id="HTML_parser">HTML parser</h2>

<p>O Gecko é <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">compatível com HTML5 parser</a>—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.) {{ fx_minversion_inline(4.0) }}</p>

<h2 id="Alterações_adicionais">Alterações adicionais</h2>

<ul>
 <li><code>localName</code> e <code>namespaceURI</code> em documentos HTML agora  se comportam como em documentos XML: <code>localName</code> retorna em minúsculas e  <code>namespaceURI</code> para elementos HTML é <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code></li>
 <li>Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento <code>hashchange</code> é enviado para a página. Veja <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> para mais informação.</li>
 <li>Suporte para <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> para facilitar o manuseio de atributo de classe.</li>
 <li>evnto de documento pronto <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a>  e <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> são propriedades suportadas.</li>
 <li><span id="result_box" lang="pt"><span class="hps">Cores em</span> <span class="hps">atributos de apresentação</span> <span class="hps">são interpretados</span> <span class="hps">de acordo com o</span> <span class="hps">HTML5.</span></span></li>
</ul>

<h2 id="Tecnologias_muitas_vezes_chamado_de_parte_do_HTML5_que_não_são"><span id="result_box" lang="pt"><span class="hps">Tecnologias</span> <span class="hps">muitas vezes chamado de</span> <span class="hps">parte do</span> <span class="hps">HTML5</span> <span class="hps">que não</span> <span class="hps">são</span></span></h2>

<p><span id="result_box" lang="pt"><span class="hps">Estas</span> são <span class="hps">muitas vezes </span><span class="hps">consideradas em conjunto com</span> <span class="hps">um uso</span> <span class="hps">amplo</span> <span class="hps">termo</span> <span class="atn hps">de "</span><span>HTML5</span><span>", mas</span> <span class="hps">não são</span> <span class="hps">realmente parte do</span> </span><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="Veja_também">Veja também</h2>

<p><span id="result_box" lang="pt"><span class="hps">Alterações</span> <span class="hps">nas versões</span> <span class="hps">do Firefox</span> <span class="hps">que afetam</span> <span class="hps">os desenvolvedores</span> <span class="hps">da Web:</span></span></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>