unslug pt-br: move

3 files changed, 357 insertions, 0 deletions

diff --git a/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..e693b6fed8
--- /dev/null
+++ b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,135 @@
+---
+title: Dicas para criar páginas HTML de carregamento rápido
+slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido
+tags:
+  - Performance
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Estas dicas são baseadas em conhecimento comum e experimentação.</p>
+<p>Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.</p>
+<p>Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.</p>
+<h2 id="Dicas" name="Dicas">Dicas</h2>
+<h3 id="Reduza_o_peso_da_página" name="Reduza_o_peso_da_página">Reduza o peso da página</h3>
+<p>O peso da página é, de longe, o fator mais importante na performance de seu carregamento.</p>
+<p>Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS <em>inline</em> para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.</p>
+<p>Ferramentas como <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.</p>
+<h3 id="Minimize_o_número_de_arquivos" name="Minimize_o_número_de_arquivos">Minimize o número de arquivos</h3>
+<p>Reduzir o número de arquivos referenciados por uma página diminui o número de conexões <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para realizar o download da página.</p>
+<p>Dependendo das configurações de cache do <em>browser</em>, este pode enviar uma requisição <code>If-Modified-Since</code> ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.</p>
+<p>Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.</p>
+<p>Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um <em>sprite</em> de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e <em>caching</em> de uma única imagem devem ajudar a reduzir o tempo de carregamento.</p>
+<p>Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o <em>browser</em> deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.</p>
+<h3 id="Reduza_pesquisa_de_domínio" name="Reduza_pesquisa_de_domínio">Reduza pesquisa de domínio</h3>
+<p>Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.</p>
+<p>Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.</p>
+<h3 id="Conteúdo_em_cache_reutilizado" name="Conteúdo_em_cache_reutilizado">Conteúdo em cache reutilizado</h3>
+<p>Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.</p>
+<p>Em especial, atente ao cabeçalho <code>Last-Modified</code>. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho <code>Last-Modified</code> a páginas estáticas (p. ex.: <code>.html</code>, <code>.css</code>), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:<code>.php</code>, <code>.aspx</code>), isso não pode ser feito, e o cabeçalho não é enviado.</p>
+<p>Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.</p>
+<p>Mais informações:</p>
+<ol>
+  <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">Get HTTP Condicional para Hackers RSS</a></li>
+  <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+  <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">Sobre o Last-Modified HTTP e ETag</a></li>
+</ol>
+<h3 id="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada" name="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada">Estabeleça a ordem dos componentes da página de forma otimizada</h3>
+<p>Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.</p>
+<p>Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.</p>
+<h3 id="Reduza_o_número_de_scripts" name="Reduza_o_número_de_scripts">Reduza o número de scripts <em>inline</em></h3>
+<p>Scripts <em>inline</em> podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de <em>parsing</em> está em andamento. Reduzir o número de scripts <em>inline</em> no geral e reduzir o uso de <code>document.write()</code> para a saída de conteúdo pode melhorar o carregamento da página. Use métodos <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em <code>document.write()</code>.</p>
+<h3 id="Use_CSS_moderno_e_marcação_validada" name="Use_CSS_moderno_e_marcação_validada">Use CSS moderno e marcação validada</h3>
+<p>O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.</p>
+<p>Usar marcações validadas tem outras vantagens. Primeiro, <em>browsers</em> não precisarão realizar correção de erros durante o <em>parsing</em> de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).</p>
+<p>Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.</p>
+<h3 id="Divida_seu_conteúdo" name="Divida_seu_conteúdo">Divida seu conteúdo</h3>
+<p>Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">layout multi-colunas CSS3</a> ou <a href="/pt-BR/docs/Usando_caixas_flexiveis_css" title="pt-BR/docs/Usando_caixas_flexiveis_css">layout de caixas flexíveis CSS3</a>, devem ser utilizadas ao invés disso.</p>
+<p>Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.</p>
+<p>Ao invés de realizar aninhamentos profundos como:</p>
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+<p>use tabelas não-aninhadas ou divs, como em</p>
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+<p>Veja também: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">Especificações do layout multi-colunas CSS3</a> e <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">layout de caixas flexíveis CSS3</a></p>
+<h3 id="Especifique_tamanhos_para_imagens_e_tabelas" name="Especifique_tamanhos_para_imagens_e_tabelas">Especifique tamanhos para imagens e tabelas</h3>
+<p>Se o <em>browser</em> puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, <code>height</code> e <code>width</code> devem ser especificadas para imagens, sempre que possível.</p>
+<p>Tabelas devem usar a combinação CSS selector:property:</p>
+<pre>  table-layout: fixed;
+</pre>
+<p>e devem especificar as larguras das colunas usando as tags HTML <code>COL</code> e <code>COLGROUP</code>.</p>
+<h3 id="Escolha_bem_seus_requisitos_de_agente_de_usuário" name="Escolha_bem_seus_requisitos_de_agente_de_usuário">Escolha bem seus requisitos de agente de usuário</h3>
+<p>Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os <em>browsers</em>, especialmente nos obsoletos.</p>
+<p>Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os <em>browsers</em> modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.</p>
+<p>Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em <em>browsers</em>.</p>
+<h2 id="Exemplo_de_estrutura_de_página" name="Exemplo_de_estrutura_de_página">Exemplo de estrutura de página</h2>
+<p>· <code>HTML</code></p>
+<dl>
+  <dd>
+    · <code>HEAD</code></dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>LINK </code>...<br>
+        Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd>
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>SCRIPT </code>...<br>
+        Arquivos JavaScript para funções <strong>requeridas</strong> durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.</dd>
+      <dd>
+        Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.</dd>
+    </dl>
+  </dd>
+</dl>
+<dl>
+  <dd>
+    · <code>BODY</code></dd>
+  <dd>
+    · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.</dd>
+</dl>
+<dl>
+  <dd>
+    <dl>
+      <dd>
+        · <code>SCRIPT </code>...<br>
+        Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.</dd>
+      <dd>
+        Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd>
+      <dd>
+        Se uma ou mais imagens forem usadas para efeitos de <em>rollover</em>, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.</dd>
+    </dl>
+  </dd>
+</dl>
+<h2 id="Use_async_and_defer_se_possível" name="Use_async_and_defer_se_possível">Use async and defer, se possível</h2>
+<p>Faça com que scripts JavaScript sejam compatíveis tanto com <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> como <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que possível, especialmente se você tiver múltiplas tags de script.</p>
+<p>Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o <em>browser</em> não renderizará nada que estiver após as tags de script sem esses atributos.</p>
+<p>Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os <em>browsers</em>. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.</p>
+<h2 id="Links_Relacionados" name="Links_Relacionados">Links Relacionados</h2>
+<ul>
+  <li>Livro: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" por Andy King</a></li>
+  <li>O excelente e muito completo <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Melhores Práticas para Acelerar Seu Web Site</a> (Yahoo!)</li>
+  <li>Ferramentas para analisar e otimizar a performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed</a></li>
+</ul>
+<div class="originaldocinfo">
+  <h2 id="Informações_do_Documento_Original" name="Informações_do_Documento_Original">Informações do Documento Original</h2>
+  <ul>
+    <li>Autor(es): Bob Clary, Evangelista de Tecnologia, Netscape Communications</li>
+    <li>Última Data de Atualização: Publicado em 04 Abr 2003</li>
+    <li>Informações de Copyright: Copyright © 2001-2003 Netscape. Todos os direitos reservados.</li>
+    <li>Nota: Este artigo reeditado foi originalmente parte do site DevEdge.</li>
+  </ul>
+</div>
+<p> </p>
diff --git a/files/pt-br/learn/html/howto/index.html b/files/pt-br/learn/html/howto/index.html
new file mode 100644
index 0000000000..4d64f7d792
--- /dev/null
+++ b/files/pt-br/learn/html/howto/index.html
@@ -0,0 +1,150 @@
+---
+title: Use HTML para resolver problemas comuns
+slug: Aprender/HTML/como-fazer
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Estrutura_Básica">Estrutura Básica</h3>
+
+<p>A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Como criar um documento básico HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Como separar uma página web em seções lógicas</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Como configurar uma estrutura adequada de cabeçalhos e parágrafos</a></li>
+</ul>
+
+<h3 id="Semântica_básica_em_nível_de_texto">Semântica básica em nível de texto</h3>
+
+<p>O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Como criar uma lista de itens com HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como destacar ou enfatizar conteúdo</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como indicar que um texto é importante</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Como mostrar código de computador com HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Como adicionar anotações em imagens e figuras</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Como assinalar abreviaturas e torná-las inteligíveis</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Como adicionar citações em páginas web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Como definir termos com HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hiperlinks">Hiperlinks</h3>
+
+<p>Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Como criar um hiperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Como criar um menu de navegação com HTML </a></li>
+</ul>
+
+<h3 id="Imagens_multimídia">Imagens &amp; multimídia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Como adicionar imagens em uma página web</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de vídeo em uma página web</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de áudio em uma página web</a></li>
+</ul>
+
+<h3 id="Scripts_estilos">Scripts &amp; estilos</h3>
+
+<p>O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Como usar CSS em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Como usar JavaScript em uma página web</a></li>
+</ul>
+
+<h3 id="Conteúdo_embutido">Conteúdo embutido</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Como embutir uma página web dentro de outra página web</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Como adicionar conteúdo em Flash dentro de uma página</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Problemas_incomuns_ou_avançados">Problemas incomuns ou avançados</h2>
+
+<p>Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Formulários">Formulários</h3>
+
+<p>Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso <a href="/en-US/docs/Web/Guide/HTML/Forms">guia completo</a>. Eis os tópicos onde você deve começar:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Como criar um formulário Web simples</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Como estruturar um formulário Web</a></li>
+</ul>
+
+<h3 id="Informação_tabular">Informação tabular</h3>
+
+<p>Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Como criar uma planilha de dados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Como tornar as tabelas HTML acessíveis</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Como otimizar a renderização de tabelas HTML</a></li>
+</ul>
+
+<h3 id="Representação_de_dados">Representação de dados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Como representar valores numéricos em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Como usar atributos de dados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Como associar conteúdo legível por humanos com estruturas arbitrárias de dados</a></li>
+</ul>
+
+<h3 id="Interatividade">Interatividade</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Como criar conteúdo recolhível em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Como adicionar menus contextuais em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Como criar caixas de diálogo em HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Semântica_avançada_de_texto">Semântica avançada de texto</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Como controlar quebras de linha em HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Como destacar mudanças (texto adicionado ou removido)</a></li>
+</ul>
+
+<h3 id="Imagens_multimídia_avançados">Imagens &amp; multimídia avançados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Como adicionar imagens responsivas em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Como adicionar imagens vetoriais em uma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Como adicionar um mapa de links em uma imagem</a></li>
+</ul>
+
+<h3 id="Internacionalização">Internacionalização</h3>
+
+<p>HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Como adicionar múltiplos idiomas em uma única página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Como lidar com caracteres ruby em japonês</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Como mostrar data e hora em HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Como criar páginas HTML que carregam rápido</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.html b/files/pt-br/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..20daf02206
--- /dev/null
+++ b/files/pt-br/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,72 @@
+---
+title: Utilizando data attributes
+slug: Web/Guide/HTML/Using_data_attributes
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p>O <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  <a href="/en-US/docs/Web/HTML/Global_attributes#data-*">Atributos data-* </a>nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como <a href="/en-US/docs/Web/API/Element.classList">classList</a>, atributos fora do padrão, propriedades extras no DOM ou o método depreciado <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a>.</p>
+
+<h2 id="Sintaxe_HTML">Sintaxe HTML</h2>
+
+<p>A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com <code>data-</code> é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Acesso_no_JavaScript">Acesso no JavaScript</h2>
+
+<p>Ler os valores destes atributos via <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Para obter o atributo data através do objeto <code>dataset</code>, acesse a propriedade utilizando a parte do nome do atributo após o prefixo <code>data-</code> (note que o hífen é convertido para camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição <code>article.dataset.columns = 5</code> iria alterar esse atributo para "5".</p>
+
+<h2 id="Acesso_no_CSS">Acesso no CSS</h2>
+
+<p>Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">conteúdo gerado</a> em CSS com a função {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Pode-se também usar os <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">seletores de atributos</a> em CSS para alterar estilos de acordo com o atributo data:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Pode-se tudo isso em funcionamento neste <a href="http://jsbin.com/ujiday/2/edit">exemplo JSBin</a>.</p>
+
+<p>Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">esta tela</a> para um exemplo utilizando conteúdo gerado e transições CSS (<a href="http://jsbin.com/atawaz/3/edit">exemplo JSBin</a>).</p>
+
+<p><span style="line-height: 16.7999992370605px;">Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.</span></p>
+
+<h2 id="Issues">Issues</h2>
+
+<p>Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. </p>
+
+<p>Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores <a href="http://caniuse.com/#feat=dataset">não suportam <code>dataset</code></a>. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a <a href="http://jsperf.com/data-dataset">performance de leitura dos atributos data</a> é ruim, comparada com o armazenamento em um data warehouse JS. O uso de <code>dataset</code> é até pior que a leitura dos dados com <code>getAttribute()</code>.</p>
+
+<p>Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.</p>
+
+<p>No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Este artigo é uma adaptação de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos data em JavaScript e CSS no hacks.mozilla.org</a>.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Como usar atributos data em HTML5</a> (Sitepoint)</li>
+</ul>