unslug pt-br: move

257 files changed, 4338 insertions, 11545 deletions

diff --git a/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
index df43b575a6..df43b575a6 100644
--- a/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html
+++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
diff --git a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html
index 73b9605ef1..73b9605ef1 100644
--- a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
index 25d3222fcd..25d3222fcd 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
index cd7cb90bb9..cd7cb90bb9 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
index e93611b182..e93611b182 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
index 18532f5f25..18532f5f25 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
diff --git a/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
index 722c60d420..722c60d420 100644
--- a/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html
+++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
diff --git a/files/pt-br/web/accessibility/aria/widgets/visão_geral/index.html b/files/pt-br/web/accessibility/aria/widgets/overview/index.html
index 6e8cb06ae2..6e8cb06ae2 100644
--- a/files/pt-br/web/accessibility/aria/widgets/visão_geral/index.html
+++ b/files/pt-br/web/accessibility/aria/widgets/overview/index.html
diff --git a/files/pt-br/web/acessibilidade/index.html b/files/pt-br/web/accessibility/index.html
index b494b06163..b494b06163 100644
--- a/files/pt-br/web/acessibilidade/index.html
+++ b/files/pt-br/web/accessibility/index.html
diff --git a/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html
index 29d407c175..29d407c175 100644
--- a/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html
+++ b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html
diff --git a/files/pt-br/web/acessibilidade/entendendo_wcag/index.html b/files/pt-br/web/accessibility/understanding_wcag/index.html
index 392c1008b7..392c1008b7 100644
--- a/files/pt-br/web/acessibilidade/entendendo_wcag/index.html
+++ b/files/pt-br/web/accessibility/understanding_wcag/index.html
diff --git a/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html
index 905c6d062f..905c6d062f 100644
--- a/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html
+++ b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html
diff --git a/files/pt-br/web/acessibilidade/desenvolvimento_web/index.html b/files/pt-br/web/acessibilidade/desenvolvimento_web/index.html
deleted file mode 100644
index 51a4ad7843..0000000000
--- a/files/pt-br/web/acessibilidade/desenvolvimento_web/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Desenvolvimento Web
-slug: Web/Acessibilidade/Desenvolvimento_Web
-tags:
-  - ARIA
-  - Accessibility
-  - Acessibilidade
-  - DHTML
-  - Desenvolvimento Web
-  - WebMechanics
-  - Widgets acessíveis
-  - XUL
-translation_of: Web/Accessibility
-translation_of_original: Web/Accessibility/Web_Development
----
-<p class="summary"><span class="seoSummary">Este documento oferece mais informações para os desenvolvedores sobre as acessibilidades <em>web</em> e XUL</span></p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="vertical-align: top;">
-    <h2 id="Acessibilidade_na_Rede_Mundial">Acessibilidade na Rede Mundial</h2>
-
-    <dl>
-     <dt><a href="/en-US/docs/Accessibility/ARIA" title="http://developer.mozilla.org/en-US/docs/Accessibility/ARIA">ARIA para desenvolvedores</a></dt>
-     <dd>O conjunto ARIA possibilita a acessibilidade em conteúdo dinâmico HTML. São exemplos de uso de ARIA os conteúdos de regiões dinâmicas e <em>widgets </em>com<em> </em>JavaScript.</dd>
-     <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">JavaScript para<em> widgets</em> navegáveis pelo teclado</a></dt>
-     <dd>Até agora, programadores <em>web</em> construiam seus modelos de <em>widgets</em> baseados em &lt;div&gt; e &lt;span&gt;, por <span class="short_text" id="result_box" lang="pt"><span>faltarem</span> <span>as técnicas adequadas</span></span>. <strong>A acessibilidade através do teclado </strong>é parte das exigências mínimas para a acessibilidade, das quais todos os desenvolvedores devem ter consciência.</dd>
-    </dl>
-
-    <h2 id="Acessibilidade_XUL">Acessibilidade XUL</h2>
-
-    <dl>
-     <dt> </dt>
-     <dt><a href="/en/Building_accessible_custom_components_in_XUL">Construindo componentes personalizados e acessíveis com XUL</a></dt>
-     <dd>A utilização das técnicas de acessibilidade DHTML, a fim de tornar acessíveis os componentes customizados com a XUL.</dd>
-     <dt><a href="/en/XUL_accessibility_guidelines">Acessibilidade XUL - diretrizes de autoria</a></dt>
-     <dd>Quando a autoria está de acordo com estas diretrizes, a XUL é capaz de gerar interfaces acessíveis. Codificadores, revisores, construtores e engenheiros de produção (<em>QA</em>) devem se familiarizar com elas.</dd>
-    </dl>
-   </td>
-   <td style="vertical-align: top;">
-    <h2 id="Recursos_Externos">Recursos Externos</h2>
-
-    <dl>
-     <dt><a href="http://diveintoaccessibility.info/">Mergulhe na Acessibilidade</a></dt>
-     <dd>Este livro responde a duas questões e a primeira, é: "<em>Por que eu devo tornar meu sítio mais acessível</em>?". A segunda, é: "<em>Como eu posso fazer meu sítio mais acessível</em>?"</dd>
-     <dt><a href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Construindo páginas acessíveis</a></dt>
-     <dd>Uma boa lista sobre acessiblidade na rede mundial, feita pela IBM.</dd>
-    </dl>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
diff --git a/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html b/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html
deleted file mode 100644
index 65fe989377..0000000000
--- a/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Problemas com JAWS no Firefox
-slug: Web/Acessibilidade/Problemas_com_JAWS_no_Firefox
-tags:
-  - Acessibilidade
-  - Obsolento
-translation_of: Web/Accessibility/JAWS_Issues_with_Firefox
----
-<h2 id="Known_JAWS_Firefox_Issues" name="Known_JAWS_Firefox_Issues">Problemas JAWS Firefox conhecidos</h2>
-
-<p>Esse artigo não é mais relevante. Por favor, veja o <a class="external" href="http://support.mozilla.com/en-US/kb/Firefox+3+with+Screen+Readers+FAQ" title="http://support.mozilla.com/en-US/kb/Firefox+3+with+Screen+Readers+FAQ">FAQ</a> no site de suporte Mozilla.</p>
diff --git a/files/pt-br/web/api/audiocontext/currenttime/index.html b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html
index 71f3c9c894..71f3c9c894 100644
--- a/files/pt-br/web/api/audiocontext/currenttime/index.html
+++ b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html
diff --git a/files/pt-br/web/api/battery_status_api/index.html b/files/pt-br/web/api/battery_status_api/index.html
new file mode 100644
index 0000000000..603750f72c
--- /dev/null
+++ b/files/pt-br/web/api/battery_status_api/index.html
@@ -0,0 +1,58 @@
+---
+title: Battery Status API
+slug: WebAPI/Battery_Status
+tags:
+  - API
+  - Apps
+  - Batería
+  - Firefox OS
+  - Guia(2)
+  - Guía
+  - Mobile
+  - Obsoleto
+translation_of: Web/API/Battery_Status_API
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{DefaultAPISidebar("Battery API")}}</div>
+
+<p>A <strong>API Battery Status</strong>, mais conhecida como <strong>Battery API</strong>, fornece informações sobre o nível de carga da bateria presente no sistema e permite que você seja notificado por eventos que são enviados quando os níveis sofrem alterações. Isto pode ser usado para ajustar a utilização de recursos do seu aplicativo, reduzindo a quantidade de energia drenada por ele quando a bateria estiver em nível baixo, ou ainda para salvar mudanças antes da bateria acabar, prevenindo a perda de dados.</p>
+
+<p>A API Battery Status API estende {{domxref("Window.navigator")}} com uma propriedade {{domxref("Navigator.battery")}} que é um objeto {{domxref("BatteryManager")}},  e adiciona alguns novos eventos que você pode receber para monitorar o status da bateria.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Neste exemplo, nós observamos as mudanças em ambos os status de carregamento (se estamos ou não conectados e carregando) e para mudanças no nível da bateria. Isto é feito escutando pelos eventos {{event("chargingchange")}} e {{event("levelchange")}}, respectivamente.</p>
+
+<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Status da bateria: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("A bateria está carregando");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+</pre>
+
+<p>Veja também <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">o exemplo na especificação</a>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Usando a API Battery API (em inglês)</a></li>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html
index 4f5c402588..4f5c402588 100644
--- a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html
+++ b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html
diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html
index ca188eb6f9..ca188eb6f9 100644
--- a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html
+++ b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html
diff --git a/files/pt-br/web/html/canvas/index.html b/files/pt-br/web/api/canvas_api/index.html
index 821909e726..821909e726 100644
--- a/files/pt-br/web/html/canvas/index.html
+++ b/files/pt-br/web/api/canvas_api/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html
index 23f072420e..23f072420e 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
index f711570b9f..f711570b9f 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html
index 125e0874a7..125e0874a7 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html
index 767a5ff97c..767a5ff97c 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html
index 87de5aa19d..87de5aa19d 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html
index 6d9ff5c33d..6d9ff5c33d 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html
index f54fca780e..f54fca780e 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
index 550719e627..550719e627 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/conclusão/index.html b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
index 9cd393b652..9cd393b652 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/conclusão/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html
index 2f9dbab7df..2f9dbab7df 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html
index d18afddefa..d18afddefa 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
index 0b0dcfe7e7..0b0dcfe7e7 100644
--- a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
diff --git a/files/pt-br/web/api/randomsource/getrandomvalues/index.html b/files/pt-br/web/api/crypto/getrandomvalues/index.html
index 7e54e933ed..7e54e933ed 100644
--- a/files/pt-br/web/api/randomsource/getrandomvalues/index.html
+++ b/files/pt-br/web/api/crypto/getrandomvalues/index.html
diff --git a/files/pt-br/web/api/cryptokey/algorithm/index.html b/files/pt-br/web/api/cryptokey/algorithm/index.html
deleted file mode 100644
index d80199a4ed..0000000000
--- a/files/pt-br/web/api/cryptokey/algorithm/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: CryptoKey.algorithm
-slug: Web/API/CryptoKey/algorithm
-tags:
-  - API
-  - CryptoKey
-  - Propriedade
-  - Read-only
-  - Referencia
-  - Web Crypto API
-translation_of: Web/API/CryptoKey
-translation_of_original: Web/API/CryptoKey/algorithm
----
-<p>{{APIRef("Web Crypto API")}}</p>
-
-<p>A propriedade <code><strong>CryptoKey.algorithm</strong></code> de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.</p>
-
-<p>Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.algorithm</code>
-</pre>
-
-<h3 id="Valor_de_retorno">Valor de retorno</h3>
-
-<ul>
- <li><code><em>result</em></code> é um objeto opaco descrevendo o algoritmo com o qual a key está relacionado.</li>
-</ul>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Definição inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatChrome(37) }}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoDesktop(34) }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>37</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoMobile(34) }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
- <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
-</ul>
-
-<h2 id="Dicionário">Dicionário</h2>
-
-<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/extractable/index.html b/files/pt-br/web/api/cryptokey/extractable/index.html
deleted file mode 100644
index 4fe2885cbc..0000000000
--- a/files/pt-br/web/api/cryptokey/extractable/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: CryptoKey.extractable
-slug: Web/API/CryptoKey/extractable
-tags:
-  - API
-  - CryptoKey
-  - Propriedade
-  - Read-only
-  - Referencia
-  - Web Crypto API
-translation_of: Web/API/CryptoKey
-translation_of_original: Web/API/CryptoKey/extractable
----
-<p>{{APIRef("Web Crypto API")}}</p>
-
-<p>A propriedade de apenas leitura <code><strong>CryptoKey.extractable</strong></code> que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.extractable</code>
-</pre>
-
-<h3 id="Valor_de_retorno">Valor de retorno</h3>
-
-<ul>
- <li><code><em>result</em></code> é um {{jsxref("Boolean")}} indicando se a chave pode ser extraída.</li>
-</ul>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Definição inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatChrome(37) }}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoDesktop(34) }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>37</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoMobile(34) }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
- <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
-</ul>
-
-<h3 id="Dicionário">Dicionário</h3>
-
-<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/type/index.html b/files/pt-br/web/api/cryptokey/type/index.html
deleted file mode 100644
index 666de87d23..0000000000
--- a/files/pt-br/web/api/cryptokey/type/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: CryptoKey.type
-slug: Web/API/CryptoKey/type
-tags:
-  - API
-  - Apenas Leitura
-  - CryptoKey
-  - Propriedades
-  - Referencia
-  - Web Crypto API
-translation_of: Web/API/CryptoKey
-translation_of_original: Web/API/CryptoKey/type
----
-<p>{{APIRef("Web Crypto API")}}</p>
-
-<p>O <code><strong>CryptoKey.type</strong></code> é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico (<code>"secret"</code>) ou, para um algoritmo assimétrico, (<code>"public"</code> ou <code>"private"</code>, dependendo do seu propósito).</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.type</code>
-</pre>
-
-<h3 id="Valor_de_retorno">Valor de retorno</h3>
-
-<ul>
- <li><code><em>result</em></code> é um valor enumerado que pode ser:
-
-  <ul>
-   <li><code>"secret"</code> representa uma key única utilizada para criptografar ou descriptografar uma mensagem que faz uso de um algoritmo simétrico.</li>
-   <li><code>"public"</code> representa uma key pública e compartilhável usada em um algoritmo assimétrico.</li>
-   <li><code>"private"</code> representa uma key utilizada em um algoritmo assimétrico que deve ser mantida em privado.</li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificações</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Definição inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Características</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatChrome(37) }}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoDesktop(34) }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Características</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>37</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoMobile(34) }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
- <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
-</ul>
-
-<h3 id="Dicionário">Dicionário:</h3>
-
-<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/usages/index.html b/files/pt-br/web/api/cryptokey/usages/index.html
deleted file mode 100644
index c74a658a32..0000000000
--- a/files/pt-br/web/api/cryptokey/usages/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: CryptoKey.usages
-slug: Web/API/CryptoKey/usages
-tags:
-  - API
-  - CryptoKey
-  - Propriedade
-  - Read-only
-  - Referencia
-  - Web Crypto API
-translation_of: Web/API/CryptoKey
-translation_of_original: Web/API/CryptoKey/usages
----
-<p>{{APIRef("Web Crypto API")}}</p>
-
-<p>A propriedade de apenas leitura <code><strong>CryptoKey.usages</strong></code> é um conjunto enumerado que indica os propósitos da key.</p>
-
-<p>Possíveis valores são:</p>
-
-<ul>
- <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li>
- <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li>
- <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li>
- <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li>
- <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como key base na derivação de uma nova key.</li>
- <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li>
- <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
- <li><code>"unwrapKey"</code>, permitindo que a key desvincule uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
-</ul>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.usages</code>
-</pre>
-
-<h3 id="Valor_de_retorno">Valor de retorno</h3>
-
-<ul>
- <li><code><em>result</em></code> é um {{jsxref("Array")}} de valores enumerados.</li>
-</ul>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Definição inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatChrome(37) }}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoDesktop(34) }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>37</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoMobile(34) }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
- <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
-</ul>
-
-<h2 id="Dicionário">Dicionário:</h2>
-
-<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/deviceacceleration/index.html b/files/pt-br/web/api/devicemotioneventacceleration/index.html
index e8e5432e4a..e8e5432e4a 100644
--- a/files/pt-br/web/api/deviceacceleration/index.html
+++ b/files/pt-br/web/api/devicemotioneventacceleration/index.html
diff --git a/files/pt-br/web/api/devicerotationrate/index.html b/files/pt-br/web/api/devicemotioneventrotationrate/index.html
index 872b3c6f25..872b3c6f25 100644
--- a/files/pt-br/web/api/devicerotationrate/index.html
+++ b/files/pt-br/web/api/devicemotioneventrotationrate/index.html
diff --git a/files/pt-br/web/events/readystatechange/index.html b/files/pt-br/web/api/document/readystatechange_event/index.html
index 185350cb54..185350cb54 100644
--- a/files/pt-br/web/events/readystatechange/index.html
+++ b/files/pt-br/web/api/document/readystatechange_event/index.html
diff --git a/files/pt-br/web/api/document/elementoregistrado/index.html b/files/pt-br/web/api/document/registerelement/index.html
index bff318b3a9..bff318b3a9 100644
--- a/files/pt-br/web/api/document/elementoregistrado/index.html
+++ b/files/pt-br/web/api/document/registerelement/index.html
diff --git a/files/pt-br/web/api/document_object_model/events/index.html b/files/pt-br/web/api/document_object_model/events/index.html
new file mode 100644
index 0000000000..4d04915450
--- /dev/null
+++ b/files/pt-br/web/api/document_object_model/events/index.html
@@ -0,0 +1,82 @@
+---
+title: Events and the DOM
+slug: DOM/Referencia_do_DOM/Events
+translation_of: Web/API/Document_Object_Model/Events
+---
+<div>{{DefaultAPISidebar("DOM")}}</div>
+
+<h2 id="Introduction" name="Introduction">Introdução</h2>
+
+<p>Este capítulo descreve o Modelo de Eventos do DOM. A interface de <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event" rel="noopener">Eventos</a> é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p>
+
+<p>Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture" rel="noopener">DOM Level 3 Events draft</a>.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando event listeners</h2>
+
+<p>Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3>
+
+<pre class="brush: js notranslate">// Assuming myButton is a button element
+myButton.addEventListener('click', greet, false)
+function greet(event){
+    // print and have a look at the event object
+    // always print arguments in case of overlooking any other arguments
+    console.log('greet:', arguments)
+    alert('hello world')
+}
+</pre>
+
+<p>Este é o método que você deve usar em páginas web modernas.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.</p>
+</div>
+
+<p>Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">atributo HTML</a></h3>
+
+<pre class="brush: html notranslate">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>O código JavaScript no atributo é passado para o objeto Evento através do parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de uma maneira especial, descrita na especificação HTML.</a></p>
+
+<div class="blockIndicator warning">
+<p><strong>Cuidado:</strong> Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.</p>
+</div>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3>
+
+<pre class="brush: js notranslate">// Supondo que myButton seja um elemento button
+myButton.onclick = function(event){alert('Hello world')}
+</pre>
+
+<p>A função pode ser definida para receber um parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de maneira especial, descrita na especificação HTML.</a></p>
+
+<p>O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.</p>
+
+<h2 id="Acessando_interfaces_doEvento">Acessando interfaces doEvento</h2>
+
+<p>Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.</p>
+
+<p>A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.</p>
+
+<pre class="brush: js notranslate">function print(evt) {
+  // the evt parameter is automatically assigned the event object
+  // take care of the differences between console.log &amp; alert
+  console.log('print:', evt)
+  alert(evt)
+}
+// any function should have an appropriate name, that's what called semantic
+table_el.onclick = print
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document_object_model/examples/index.html b/files/pt-br/web/api/document_object_model/examples/index.html
new file mode 100644
index 0000000000..87ec3601e2
--- /dev/null
+++ b/files/pt-br/web/api/document_object_model/examples/index.html
@@ -0,0 +1,376 @@
+---
+title: Examples of web and XML development using the DOM
+slug: DOM/Referencia_do_DOM/Examples
+translation_of: Web/API/Document_Object_Model/Examples
+---
+<p>Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.</p>
+
+<h2 id="Example_1:_height_and_width" name="Example_1:_height_and_width">Exemplo 1: altura e largura</h2>
+
+<p>O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;width/height example&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "&lt;ul&gt;";
+
+  for (var i = 0; i &lt; arrImages.length; i++) {
+    strHtml += "&lt;li&gt;image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "&lt;\/li&gt;";
+  }
+
+  strHtml += "&lt;\/ul&gt;";
+
+  objOutput.innerHTML = strHtml;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init();"&gt;
+
+&lt;p&gt;Image 1: no height, width, or style
+  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 2: height="50", width="500", but no style
+  &lt;img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
+  &lt;img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;"&gt;
+&lt;/p&gt;
+
+&lt;div id="output"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_2:_Image_Attributes" name="Example_2:_Image_Attributes">Exemplo 2: Atributos de Imagem</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying an image border&lt;/title&gt;
+
+&lt;script&gt;
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+  &lt;img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test"&gt;
+&lt;/p&gt;
+
+&lt;form name="FormName"&gt;
+  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
+  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_3:_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Exemplo 3: Manipulando Estilos</h2>
+
+<p>Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Changing color and font-size example&lt;/title&gt;
+
+&lt;script&gt;
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_4:_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Exemplo 4: Usando folhas de estilo</h2>
+
+<p>A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.</p>
+
+<pre class="brush:js">var ss = document.styleSheets;
+
+for(var i = 0; i &lt; ss.length; i++) {
+  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}</pre>
+
+<p>Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:</p>
+
+<pre class="brush:css">body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>Este script produz o seguinte:</p>
+
+<pre>BODY
+P
+#LUMPY
+</pre>
+
+<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation"> </h2>
+
+<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation">Exemplo 5: Propagação de Eventos</h2>
+
+<p>Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.</p>
+
+<p>No entanto, stopEvent também chama um método de objeto de evento, {{domxref ("event.stopPropagation")}}, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos {{domxref ("element.onclick", "onclick")}} que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Event Propagation&lt;/title&gt;
+
+&lt;style&gt;
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="load();"&gt;
+
+&lt;table id="t-daddy" onclick="alert('hi');"&gt;
+  &lt;tr id="tbl1"&gt;
+    &lt;td id="c1"&gt;one&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="c2"&gt;two&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_6:_getComputedStyle" name="Example_6:_getComputedStyle">Exemplo 6: getComputedStyle</h2>
+
+<p>Este exemplo demonstra como o método {{domxref ("window.getComputedStyle")}} pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade {{domxref ("element.style", "elt.style")}} mais direta, cujas propriedades estão listadas na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference">Lista de Propriedades do DOM CSS</a>.</p>
+
+<p>GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+
+&lt;title&gt;getComputedStyle example&lt;/title&gt;
+
+&lt;script&gt;
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+&lt;/script&gt;
+
+&lt;style&gt;
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+&lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;
+
+&lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
+    height&lt;input id="t1" type="text" value="1" /&gt;
+    max-width&lt;input id="t2" type="text" value="2" /&gt;
+    bg-color&lt;input id="t3" type="text" value="3" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_7:_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Exemplo 7: Exibindo Propriedades de Evento do Objeto</h2>
+
+<p>Este exemplo usa métodos DOM para exibir todas as propriedades do objeto {{domxref ("window.onload")}} {{domxref ("evento")}} e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.</p>
+
+<p>As propriedades dos objetos de evento diferem muito entre os navegadores, o <a href="https://dom.spec.whatwg.org">WHATWG DOM Standard</a> lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.</p>
+
+<p>Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"/&gt;
+&lt;title&gt;Show Event properties&lt;/title&gt;
+
+&lt;style&gt;
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i&lt;len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_8:_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Exemplo 8: Usando a interface de tabela  do DOM</h2>
+
+<p>A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são {{domxref ("HTMLTableElement.insertRow")}} e {{domxref ("tableRow.insertCell")}}.</p>
+
+<p>Para adicionar uma linha e algumas células a uma tabela existente:</p>
+
+<pre class="brush:html">&lt;table id="table0"&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
+  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;script&gt;
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i &lt; 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Notes" name="Notes"><br>
+ Notas</h3>
+
+<ul>
+ <li>A propriedade {{domxref ("element.innerHTML", "innerHTML")}} de uma tabela nunca deve ser usada para modificar uma tabela, embora você possa usá-la para escrever uma tabela inteira ou o conteúdo de uma célula.</li>
+ <li>Se os métodos DOM Core {{domxref ("document.createElement")}} e {{domxref ("Node.appendChild")}} são usados para criar linhas e células, o IE requer que eles sejam anexados a um elemento tbody, enquanto outros Os navegadores permitirão acrescentar a um elemento da tabela (as linhas serão adicionadas ao último elemento tbody).</li>
+ <li>Há uma série de outros métodos convenientes pertencentes à<a href="/en-US/docs/"> tabela de interface</a> que podem ser usados para criar e modificar tabelas.</li>
+</ul>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html
new file mode 100644
index 0000000000..e6dd923fb5
--- /dev/null
+++ b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html
@@ -0,0 +1,145 @@
+---
+title: How to create a DOM tree
+slug: DOM/Referencia_do_DOM/How_to_create_a_DOM_tree
+translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree
+---
+<p>{{draft}}</p>
+
+<p>Esta página descreve como usar <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> API DOM em JavaScript para criar e modificar objetos do DOM. Aplica-se a todas as aplicações baseadas em Gecko (como o Firefox), tanto em código privilegiado (extensões) como em código não privilegiado (páginas web)</p>
+
+<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Criando uma árvore DOM dinamicamente</h3>
+
+<p>Considere o seguinte documento XML:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
+  &lt;/person&gt;
+
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:</p>
+
+<pre class="brush: js">var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+</pre>
+
+<p>Veja também o capítulo <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">DOM chapter of the XUL Tutorial</a>.</p>
+
+<p>Você pode automatizar a criação de uma árvore DOM usando um <a href="/en/JXON#JXON_reverse_algorithms">algoritmo reverso JXON</a> em associação com a seguinte representação JSON:</p>
+
+<pre class="brush: js">{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+</pre>
+
+<h3 id="So_what.3F" name="So_what.3F">E daí?</h3>
+
+<p>As árvores DOM podem ser consultadas <a href="/en/Using_XPath">usando expressões XPath</a>, convertidas em strings ou gravadas em arquivos locais ou remotos usando <a href="/en/Parsing_and_serializing_XML">XMLSerializer</a> (sem ter que primeiro converter para uma string), <a href="/en/DOM/XMLHttpRequest">POSTed para um servidor web</a> (via XMLHttpRequest), transformado usando <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, convertido para um objeto JavaScript através de um <a href="/en/JXON">algoritmo JXON</a>, etc.</p>
+
+<p>Você pode usar árvores DOM para modelar dados que não são adequados para RDF (ou talvez você simplesmente não goste de RDF). Outra aplicação é que, uma vez que XUL é XML, a UI de sua aplicação pode ser manipulada, baixada, carregada, salva, carregada, convertida ou transformada de forma bastante fácil.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li>
+ <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}</p>
diff --git a/files/pt-br/web/api/document_object_model/index.html b/files/pt-br/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..b0ae4420a6
--- /dev/null
+++ b/files/pt-br/web/api/document_object_model/index.html
@@ -0,0 +1,379 @@
+---
+title: Modelo de Objeto de Documento (DOM)
+slug: DOM/Referencia_do_DOM
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{DefaultAPISidebar("DOM")}}</p>
+
+<p>O <strong>Modelo de Objeto de Documento  (<em>DOM</em>)</strong> é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.</p>
+
+<p>Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.</p>
+
+<p>Uma <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introdução</a> ao DOM está disponível.</p>
+
+<h2 id="DOM_interfaces">DOM interfaces</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("CharacterData")}}</li>
+ <li>{{domxref("ChildNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("Comment")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("DocumentFragment")}}</li>
+ <li>{{domxref("DocumentType")}}</li>
+ <li>{{domxref("DOMError")}}</li>
+ <li>{{domxref("DOMException")}}</li>
+ <li>{{domxref("DOMImplementation")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("DOMTimeStamp")}}</li>
+ <li>{{domxref("DOMSettableTokenList")}}</li>
+ <li>{{domxref("DOMStringList")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("Event")}}</li>
+ <li>{{domxref("EventTarget")}}</li>
+ <li>{{domxref("HTMLCollection")}}</li>
+ <li>{{domxref("MutationObserver")}}</li>
+ <li>{{domxref("MutationRecord")}}</li>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeFilter")}}</li>
+ <li>{{domxref("NodeIterator")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("ParentNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("ProcessingInstruction")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Text")}}</li>
+ <li>{{domxref("TreeWalker")}}</li>
+ <li>{{domxref("URL")}}</li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_DOM_obsoletas">Interfaces DOM obsoletas</h2>
+
+<p>O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CDATASection")}}</li>
+ <li>{{domxref("DOMConfiguration")}}</li>
+ <li>{{domxref("DOMErrorHandler")}}</li>
+ <li>{{domxref("DOMImplementationList")}}</li>
+ <li>{{domxref("DOMImplementationRegistry")}}</li>
+ <li>{{domxref("DOMImplementationSource")}}</li>
+ <li>{{domxref("DOMLocator")}}</li>
+ <li>{{domxref("DOMObject")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("EntityReference")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("NameList")}}</li>
+ <li>{{domxref("Notation")}}</li>
+ <li>{{domxref("TypeInfo")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li></li>
+</ul>
+</div>
+
+<h2 id="Interfaces_HTML">Interfaces HTML</h2>
+
+<p>Um documento contendo HTML é descrito usando o {{domxref("HTMLDocument")}} interface. Nota-se que a especificação HTML também se extende a {{domxref("Document")}} interface.</p>
+
+<p>Um objeto <code>HTMLDocument</code> também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando {{domxref("Window")}} interface, o {{domxref("window.style", "Style")}} associado a ele (normalmente CSS), a história do navegador relativa ao contexto, {{domxref("window.history", "History")}}. Eventualmente, {{domxref("Selection")}} é feito no documento.</p>
+
+<h3 id="HTML_elemento_interfaces">HTML elemento interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLAnchorElement")}}</li>
+ <li>{{domxref("HTMLAppletElement")}}</li>
+ <li>{{domxref("HTMLAreaElement")}}</li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLBaseElement")}}</li>
+ <li>{{domxref("HTMLBodyElement")}}</li>
+ <li>{{domxref("HTMLBRElement")}}</li>
+ <li>{{domxref("HTMLButtonElement")}}</li>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("HTMLDataElement")}}</li>
+ <li>{{domxref("HTMLDataListElement")}}</li>
+ <li>{{domxref("HTMLDialogElement")}}</li>
+ <li>{{domxref("HTMLDirectoryElement")}}</li>
+ <li>{{domxref("HTMLDivElement")}}</li>
+ <li>{{domxref("HTMLDListElement")}}</li>
+ <li>{{domxref("HTMLElement")}}</li>
+ <li>{{domxref("HTMLEmbedElement")}}</li>
+ <li>{{domxref("HTMLFieldSetElement")}}</li>
+ <li>{{domxref("HTMLFontElement")}}</li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("HTMLFrameElement")}}</li>
+ <li>{{domxref("HTMLFrameSetElement")}}</li>
+ <li>{{domxref("HTMLHeadElement")}}</li>
+ <li>{{domxref("HTMLHeadingElement")}}</li>
+ <li>{{domxref("HTMLHtmlElement")}}</li>
+ <li>{{domxref("HTMLHRElement")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+ <li>{{domxref("HTMLImageElement")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("HTMLKeygenElement")}}</li>
+ <li>{{domxref("HTMLLabelElement")}}</li>
+ <li>{{domxref("HTMLLegendElement")}}</li>
+ <li>{{domxref("HTMLLIElement")}}</li>
+ <li>{{domxref("HTMLLinkElement")}}</li>
+ <li>{{domxref("HTMLMapElement")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li>{{domxref("HTMLMenuElement")}}</li>
+ <li>{{domxref("HTMLMetaElement")}}</li>
+ <li>{{domxref("HTMLMeterElement")}}</li>
+ <li>{{domxref("HTMLModElement")}}</li>
+ <li>{{domxref("HTMLObjectElement")}}</li>
+ <li>{{domxref("HTMLOListElement")}}</li>
+ <li>{{domxref("HTMLOptGroupElement")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLOutputElement")}}</li>
+ <li>{{domxref("HTMLParagraphElement")}}</li>
+ <li>{{domxref("HTMLParamElement")}}</li>
+ <li>{{domxref("HTMLPreElement")}}</li>
+ <li>{{domxref("HTMLProgressElement")}}</li>
+ <li>{{domxref("HTMLQuoteElement")}}</li>
+ <li>{{domxref("HTMLScriptElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+ <li>{{domxref("HTMLSourceElement")}}</li>
+ <li>{{domxref("HTMLSpanElement")}}</li>
+ <li>{{domxref("HTMLStyleElement")}}</li>
+ <li>{{domxref("HTMLTableElement")}}</li>
+ <li>{{domxref("HTMLTableCaptionElement")}}</li>
+ <li>{{domxref("HTMLTableCellElement")}}</li>
+ <li>{{domxref("HTMLTableDataCellElement")}}</li>
+ <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
+ <li>{{domxref("HTMLTableColElement")}}</li>
+ <li>{{domxref("HTMLTableRowElement")}}</li>
+ <li>{{domxref("HTMLTableSectionElement")}}</li>
+ <li>{{domxref("HTMLTextAreaElement")}}</li>
+ <li>{{domxref("HTMLTimeElement")}}</li>
+ <li>{{domxref("HTMLTitleElement")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+ <li>{{domxref("HTMLUListElement")}}</li>
+ <li>{{domxref("HTMLUnknownElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+</ul>
+</div>
+
+<h3 id="Outras_interfaces">Outras interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("CanvasPixelArray")}}</li>
+ <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
+ <li>{{domxref("HTMLAllCollection")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}</li>
+ <li>{{domxref("HTMLOptionsCollection")}}</li>
+ <li>{{domxref("HTMLPropertiesCollection")}}</li>
+ <li>{{domxref("DOMStringMap")}}</li>
+ <li>{{domxref("RadioNodeList")}}</li>
+ <li>{{domxref("MediaError")}}</li>
+</ul>
+</div>
+
+<h3 id="Obsoleto_HTML_interfaces">Obsoleto HTML interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLBaseFontElement")}}</li>
+ <li>{{domxref("HTMLIsIndexElement")}}</li>
+</ul>
+</div>
+
+<h2 id="SVG_interfaces">SVG interfaces</h2>
+
+<h3 id="SVG_elemento_interfaces">SVG elemento  interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAElement")}}</li>
+ <li>{{domxref("SVGAltGlyphElement")}}</li>
+ <li>{{domxref("SVGAltGlyphDefElement")}}</li>
+ <li>{{domxref("SVGAltGlyphItemElement")}}</li>
+ <li>{{domxref("SVGAnimationElement")}}</li>
+ <li>{{domxref("SVGAnimateElement")}}</li>
+ <li>{{domxref("SVGAnimateColorElement")}}</li>
+ <li>{{domxref("SVGAnimateMotionElement")}}</li>
+ <li>{{domxref("SVGAnimateTransformElement")}}</li>
+ <li>{{domxref("SVGCircleElement")}}</li>
+ <li>{{domxref("SVGClipPathElement")}}</li>
+ <li>{{domxref("SVGColorProfileElement")}}</li>
+ <li>{{domxref("SVGComponentTransferFunctionElement")}}</li>
+ <li>{{domxref("SVGCursorElement")}}</li>
+ <li>{{domxref("SVGDefsElement")}}</li>
+ <li>{{domxref("SVGDescElement")}}</li>
+ <li>{{domxref("SVGElement")}}</li>
+ <li>{{domxref("SVGEllipseElement")}}</li>
+ <li>{{domxref("SVGFEBlendElement")}}</li>
+ <li>{{domxref("SVGFEColorMatrixElement")}}</li>
+ <li>{{domxref("SVGFEComponentTransferElement")}}</li>
+ <li>{{domxref("SVGFECompositeElement")}}</li>
+ <li>{{domxref("SVGFEConvolveMatrixElement")}}</li>
+ <li>{{domxref("SVGFEDiffuseLightingElement")}}</li>
+ <li>{{domxref("SVGFEDisplacementMapElement")}}</li>
+ <li>{{domxref("SVGFEDistantLightElement")}}</li>
+ <li>{{domxref("SVGFEFloodElement")}}</li>
+ <li>{{domxref("SVGFEGaussianBlurElement")}}</li>
+ <li>{{domxref("SVGFEImageElement")}}</li>
+ <li>{{domxref("SVGFEMergeElement")}}</li>
+ <li>{{domxref("SVGFEMergeNodeElement")}}</li>
+ <li>{{domxref("SVGFEMorphologyElement")}}</li>
+ <li>{{domxref("SVGFEOffsetElement")}}</li>
+ <li>{{domxref("SVGFEPointLightElement")}}</li>
+ <li>{{domxref("SVGFESpecularLightingElement")}}</li>
+ <li>{{domxref("SVGFESpotLightElement")}}</li>
+ <li>{{domxref("SVGFETileElement")}}</li>
+ <li>{{domxref("SVGFETurbulenceElement")}}</li>
+ <li>{{domxref("SVGFEFuncRElement")}}</li>
+ <li>{{domxref("SVGFEFuncGElement")}}</li>
+ <li>{{domxref("SVGFEFuncBElement")}}</li>
+ <li>{{domxref("SVGFEFuncAElement")}}</li>
+ <li>{{domxref("SVGFilterElement")}}</li>
+ <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
+ <li>{{domxref("SVGFontElement")}}</li>
+ <li>{{domxref("SVGFontFaceElement")}}</li>
+ <li>{{domxref("SVGFontFaceFormatElement")}}</li>
+ <li>{{domxref("SVGFontFaceNameElement")}}</li>
+ <li>{{domxref("SVGFontFaceSrcElement")}}</li>
+ <li>{{domxref("SVGFontFaceUriElement")}}</li>
+ <li>{{domxref("SVGForeignObjectElement")}}</li>
+ <li>{{domxref("SVGGElement")}}</li>
+ <li>{{domxref("SVGGlyphElement")}}</li>
+ <li>{{domxref("SVGGlyphRefElement")}}</li>
+ <li>{{domxref("SVGGradientElement")}}</li>
+ <li>{{domxref("SVGHKernElement")}}</li>
+ <li>{{domxref("SVGImageElement")}}</li>
+ <li>{{domxref("SVGLinearGradientElement")}}</li>
+ <li>{{domxref("SVGLineElement")}}</li>
+ <li>{{domxref("SVGMarkerElement")}}</li>
+ <li>{{domxref("SVGMaskElement")}}</li>
+ <li>{{domxref("SVGMetadataElement")}}</li>
+ <li>{{domxref("SVGMissingGlyphElement")}}</li>
+ <li>{{domxref("SVGMPathElement")}}</li>
+ <li>{{domxref("SVGPathElement")}}</li>
+ <li>{{domxref("SVGPatternElement")}}</li>
+ <li>{{domxref("SVGPolylineElement")}}</li>
+ <li>{{domxref("SVGPolygonElement")}}</li>
+ <li>{{domxref("SVGRadialGradientElement")}}</li>
+ <li>{{domxref("SVGRectElement")}}</li>
+ <li>{{domxref("SVGScriptElement")}}</li>
+ <li>{{domxref("SVGSetElement")}}</li>
+ <li>{{domxref("SVGStopElement")}}</li>
+ <li>{{domxref("SVGStyleElement")}}</li>
+ <li>{{domxref("SVGSVGElement")}}</li>
+ <li>{{domxref("SVGSwitchElement")}}</li>
+ <li>{{domxref("SVGSymbolElement")}}</li>
+ <li>{{domxref("SVGTextElement")}}</li>
+ <li>{{domxref("SVGTextPathElement")}}</li>
+ <li>{{domxref("SVGTitleElement")}}</li>
+ <li>{{domxref("SVGTRefElement")}}</li>
+ <li>{{domxref("SVGTSpanElement")}}</li>
+ <li>{{domxref("SVGUseElement")}}</li>
+ <li>{{domxref("SVGViewElement")}}</li>
+ <li>{{domxref("SVGVKernElement")}}</li>
+</ul>
+</div>
+
+<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3>
+
+<p>Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p>
+</div>
+
+<h4 id="Static_type">Static type</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAngle")}}</li>
+ <li>{{domxref("SVGColor")}}</li>
+ <li>{{domxref("SVGICCColor")}}</li>
+ <li>{{domxref("SVGElementInstance")}}</li>
+ <li>{{domxref("SVGElementInstanceList")}}</li>
+ <li>{{domxref("SVGLength")}}</li>
+ <li>{{domxref("SVGLengthList")}}</li>
+ <li>{{domxref("SVGMatrix")}}</li>
+ <li>{{domxref("SVGNumber")}}</li>
+ <li>{{domxref("SVGNumberList")}}</li>
+ <li>{{domxref("SVGPaint")}}</li>
+ <li>{{domxref("SVGPoint")}}</li>
+ <li>{{domxref("SVGPointList")}}</li>
+ <li>{{domxref("SVGPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGRect")}}</li>
+ <li>{{domxref("SVGStringList")}}</li>
+ <li>{{domxref("SVGTransform")}}</li>
+ <li>{{domxref("SVGTransformList")}}</li>
+</ul>
+</div>
+
+<h4 id="Animated_type">Animated type</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedAngle")}}</li>
+ <li>{{domxref("SVGAnimatedBoolean")}}</li>
+ <li>{{domxref("SVGAnimatedEnumeration")}}</li>
+ <li>{{domxref("SVGAnimatedInteger")}}</li>
+ <li>{{domxref("SVGAnimatedLength")}}</li>
+ <li>{{domxref("SVGAnimatedLengthList")}}</li>
+ <li>{{domxref("SVGAnimatedNumber")}}</li>
+ <li>{{domxref("SVGAnimatedNumberList")}}</li>
+ <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGAnimatedRect")}}</li>
+ <li>{{domxref("SVGAnimatedString")}}</li>
+ <li>{{domxref("SVGAnimatedTransformList")}}</li>
+</ul>
+</div>
+
+<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ElementTimeControl")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedPathData")}}</li>
+ <li>{{domxref("SVGAnimatedPoints")}}</li>
+ <li>{{domxref("SVGColorProfileRule")}}</li>
+ <li>{{domxref("SVGCSSRule")}}</li>
+ <li>{{domxref("SVGExternalResourcesRequired")}}</li>
+ <li>{{domxref("SVGFitToViewBox")}}</li>
+ <li>{{domxref("SVGLangSpace")}}</li>
+ <li>{{domxref("SVGLocatable")}}</li>
+ <li>{{domxref("SVGRenderingIntent")}}</li>
+ <li>{{domxref("SVGStylable")}}</li>
+ <li>{{domxref("SVGTests")}}</li>
+ <li>{{domxref("SVGTextContentElement")}}</li>
+ <li>{{domxref("SVGTextPositioningElement")}}</li>
+ <li>{{domxref("SVGTransformable")}}</li>
+ <li>{{domxref("SVGUnitTypes")}}</li>
+ <li>{{domxref("SVGURIReference")}}</li>
+ <li>{{domxref("SVGViewSpec")}}</li>
+ <li>{{domxref("SVGZoomAndPan")}}</li>
+</ul>
+</div>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">DOM Exemplos</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document_object_model/introduction/index.html b/files/pt-br/web/api/document_object_model/introduction/index.html
new file mode 100644
index 0000000000..010a5ecd54
--- /dev/null
+++ b/files/pt-br/web/api/document_object_model/introduction/index.html
@@ -0,0 +1,251 @@
+---
+title: Introdução ao DOM
+slug: DOM/Referencia_do_DOM/Introdução
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p><span class="seoSummary">O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.</span></p>
+
+<h2 id="What_is_the_DOM" name="What_is_the_DOM">O que é o DOM?</h2>
+
+<p>O Document Object Model (<strong>DOM</strong>) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.</p>
+
+<p>Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.</p>
+
+<p>Os padrões <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.</p>
+
+<p>Por exemplo, o DOM padrão especifica que o método <code>getElementsByTagName</code> no código abaixo deve retornar uma lista de todos os elementos <code>&lt;p&gt;</code> no documento:</p>
+
+<pre class="brush: js notranslate">var paragraphs = document.getElementsByTagName("p");
+// paragraphs[0] is the first &lt;p&gt; element
+// paragraphs[1] is the second &lt;p&gt; element, etc.
+alert(paragraphs[0].nodeName);
+</pre>
+
+<p>Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de <code>document</code> que representa o próprio documento, o objeto de <code>table</code> que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}}  para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.</p>
+
+<p>O DOM moderno é construído usando várias APIs que trabalham juntas. O <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adiciona suporte para representar documentos HTML no DOM principal.</p>
+
+<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2>
+
+<p>O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.</p>
+
+<p>No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:</p>
+
+<p>API (página HTML ou XML) = DOM + JS (linguagem de script)</p>
+
+<p>O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:</p>
+
+<pre class="brush: python notranslate"># exemplo de DOM com Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # propriedade do objeto de documento DOM
+p_list = doc.getElementsByTagName("para")
+</pre>
+
+<p>Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p>
+
+<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Acessando o DOM</h2>
+
+<p>Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.</p>
+
+<p>Quando você cria um script - seja embutido em um elemento(tag) <code>&lt;script&gt;</code> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.</p>
+
+<p>O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):</p>
+
+<pre class="brush: html notranslate">&lt;body onload="window.alert('Welcome to my home page!');"&gt;
+</pre>
+
+<p>Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o <code>H1</code> à árvore deste documento:</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Important_Data_Types" name="Important_Data_Types">Tipos de dados fundamentais</h2>
+
+<p>Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como <strong>elementos</strong>, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.</p>
+</div>
+
+<p>A tabela a seguir descreve brevemente esses tipos de dados.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Tipos de dados (Interface)</th>
+   <th>Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td>Quando um membro retorna um objeto do tipo <code>document</code> (por exemplo, a propriedade <strong><code>ownerDocument </code></strong>de um elemento retorna o <code>document</code> ao qual ele pertence),esse objeto é o próprio objeto de  <code>document</code> raiz. O capítulo <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descreve o objeto do <code>document</code> .</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node")}}</td>
+   <td>Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>
+    <p>O tipo do <code>element</code> é baseado em <code>node</code>. Isso se refere a um elemento ou um nó do tipo <code>element</code> retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}}  retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o <code>element</code> que acabou de ser criado no DOM. Os objetos do <code>element</code>  implementam a interface DOM <code>Element</code> e também a mais básica interface <code>Node</code>, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Uma <code>nodeList</code> é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa <code>nodeList</code> são acessados por índices em uma das duas formas:
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+    Esses dois são equivalentes. No primeiro, <strong><code>item()</code></strong> é o método único no objeto da <code>nodeList</code>. O último  usa uma sintaxe típica de array para buscar o segundo item na lista.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Attribute")}}</td>
+   <td>Quando um <code>attribute</code> é retornado por um membro (por exemplo, pelo método <strong><code>createAttribute()</code></strong>), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NamedNodeMap")}}</td>
+   <td>
+    <p> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.</p>
+
+    <p>Um <code>namedNodeMap</code> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O <code>namedNodeMap</code> possui um método <code>item()</code> para esse propósito, e você também pode adicionar e remover itens de um <code>namedNodeMap</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um <code><strong>attribute</strong></code>, por exemplo, e referir-se a um array de nós DOM como um <code><strong>nodeList</strong></code>. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.</p>
+
+<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2>
+
+<p>Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML <code>form</code> pega a propriedade <strong><code>name</code></strong> da interface do <code>HTMLFormElement</code> mas a sua propriedade <strong><code>className</code></strong> vem da interface <code>HTMLElement</code>. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.</p>
+
+<p>Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.</p>
+
+<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces e Objetos</h3>
+
+<p>Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como <code>createCaption</code> e <code>insertRow</code>. Mas como é também um elemento HTML, <code>table </code>implementa a interface <code>Element </code>descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface <code>Node</code> mais básica, de onde deriva <code>Element</code>.</p>
+
+<p>Quando você pegar a referência para um objeto <code>table</code>, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.</p>
+
+<pre class="brush: js notranslate">var tabela = document.getElementById("table");
+var atributosTabela = tabela.attributes; // interface Node/Element
+for (var i = 0; i &lt; atributosTabela.length; i++) {
+  // interface HTMLTableElement: atributo border
+  if (atributosTabela[i].nodeName.toLowerCase() == "border")
+    tabela.border = "1";
+}
+// interface HTMLTableElement: atributo summary
+table.summary = "nota: aumento de borda";
+</pre>
+
+<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Interfaces Core no DOM</h3>
+
+<p>Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples </a>ao fim desse livro.</p>
+
+<p>Objetos <code>Document</code> e <code>window</code> são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto <code>window</code> representa algo como o browser, e o objeto <code>document</code> é a raiz de todo o documento em si. <code>Element</code> herda dessa interface <code>Node</code> genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto <code>table</code> na seção anterior.</p>
+
+<p>A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.</p>
+
+<ul>
+ <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
+ <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
+ <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
+ <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
+ <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
+ <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
+ <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
+ <li><code>{{domxref("console.log", "", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
+</ul>
+
+<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testando a DOM API</h2>
+
+<p>Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <code>&lt;script&gt;</code>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.</p>
+
+<p>Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <code>&lt;script&gt;</code> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.</p>
+
+<p>Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função <code>test()</code> como achar necessário, criar mais botões ou adicionar elementos se necessário.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Testes DOM&lt;/title&gt;
+    &lt;script type="application/javascript"&gt;
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div style="margin: .5in; height: 400;"&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+      &lt;form&gt;
+        &lt;select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="black"&gt;preto
+          &lt;option value="darkblue"&gt;azul escuro
+        &lt;/select&gt;
+        &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+        &lt;select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="white"&gt;branco
+          &lt;option value="lightgrey"&gt;cinza
+        &lt;/select&gt;
+        &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+        &lt;select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="blue"&gt;azul
+          &lt;option value="green"&gt;verde
+        &lt;/select&gt;  &lt;small&gt;
+        &lt;a href="http://algum.website.tld/pagina.html" id="amostra"&gt;
+        (link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
+      &lt;/form&gt;
+      &lt;form&gt;
+        &lt;input type="button" value="version" onclick="ver()" /&gt;
+      &lt;/form&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.</p>
+
+<figure>
+<figcaption>Figura 0.1 Página de Teste DOM</figcaption>
+<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>
+
+<p>Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (<code>bgColor</code>), a cor dos hiperlinks (<code>aLink</code>), e a cor do texto (<code>text</code>). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
+
+<div>{{DefaultAPISidebar("DOM")}}</div>
diff --git a/files/pt-br/web/api/document_object_model/whitespace/index.html b/files/pt-br/web/api/document_object_model/whitespace/index.html
new file mode 100644
index 0000000000..f4bebc3678
--- /dev/null
+++ b/files/pt-br/web/api/document_object_model/whitespace/index.html
@@ -0,0 +1,227 @@
+---
+title: Whitespace no DOM
+slug: DOM/Referencia_do_DOM/Whitespace_in_the_DOM
+tags:
+  - DOM
+  - Intermediário
+translation_of: Web/API/Document_Object_Model/Whitespace
+---
+<h2 id="The_issue" name="The_issue">O problema</h2>
+
+<p>A presença de espaço branco no <a href="/pt-BR/docs/DOM">DOM</a> pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a> entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que <code>white-space: pre</code> irá funcionar em <a href="/pt-BR/docs/CSS">CSS</a>). Isso significa que:</p>
+
+<ul>
+ <li>haverão alguns nós de texto que contêm somente <a href="/pt-BR/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a>, e</li>
+ <li>alguns nós de texto terão <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a> no início ou no final.</li>
+</ul>
+
+<p>Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):</p>
+
+<pre class="brush: html">&lt;!-- Meu documento --&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Meu documento&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Cabeçalho&lt;/h1&gt;
+  &lt;p&gt;
+    Parágrafo
+  &lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p>
+
+<p>Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a>.</p>
+
+<h2 id="Facilitando_as_coisas">Facilitando as coisas</h2>
+
+<p>É possível formatar o código como mostrado abaixo para contornar o problema:</p>
+
+<pre class="brush: html">&lt;!-- Impressão bonita convencional
+     com espaços brancos (whitespaces) entre as tags:
+ --&gt;
+&lt;div&gt;
+ &lt;ul&gt;
+  &lt;li&gt;Posição 1&lt;/li&gt;
+  &lt;li&gt;Posição 2&lt;/li&gt;
+  &lt;li&gt;Posição 3&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;!-- Impressão bonita ajustada ao problema:
+ --&gt;
+&lt;div
+ &gt;&lt;ul
+  &gt;&lt;li&gt;Posição 1&lt;/li
+  &gt;&lt;li&gt;Posição 2&lt;/li
+  &gt;&lt;li&gt;Posição 3&lt;/li
+ &gt;&lt;/ul
+&gt;&lt;/div&gt;
+</pre>
+
+<p><br>
+ O código Javascript abaixo define funções diversas que fazem a manipulação de <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace </a>no DOM mais fácil.</p>
+
+<pre class="brush: js">/**
+ * Em todo, o whitespace é definido como um dos caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Isto não usa o "\s" do Javascript porque inclui espaços
+ * que não quebram (e alguns outros caracteres).
+ */
+
+
+/**
+ * Determina se um conteúdo de texto do nó é inteiramente whitespace.
+ *
+ * @param nod  Um nó implementando a interface |CharacterData| (por exemplo:
+ *             |Text|, |Comment|, ou nó |CDATASection|
+ * @return     Verdadeiro se todo conteúdo de texto de |nod| é whitespace,
+ *             de outra forma é falso.
+ */
+function is_all_ws( nod )
+{
+  // Usa as características do ECMA-262 Edition 3 String e RegExp
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina se um nó deve ser ignorado pela função de iterador.
+ *
+ * @param nod  Um objeto implementando a interface DOM1 |Node|.
+ * @return     verdadeiro se o nó é:
+ *                1) Um nó |Text| que é todo whitespace
+ *                2) Um nó |Comment|
+ *             do contrário é falso.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Um nó de comentário
+         ( (nod.nodeType == 3) &amp;&amp; is_all_ws(nod) ); // um nó de texto, todo whitespace
+}
+
+/**
+ * Versão de |previousSibling| que pula nós que são inteiramente
+ * whitespace ou comentários.  (Normalmente |previousSibling| é uma propriedade
+ * de todos os nós do DOM que dá o nó irmão, o nó que é
+ * um filho do mesmo parente, que ocorre imediatamente antes do
+ * nó de referência.)
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O irmão mais próximo do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versão de |nextSibling| que pula nós que são inteiramente
+ * whitespace ou comentários.
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O irmão mais próximo do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versão de  |lastChild| que pula nós que são inteiramente
+ * whitespace ou comentários.  (Normalmente |lastChild| é uma propriedade
+ * de todos os nós do DOM que dá o último dos nós contidos
+ * diretamente no nó de referência.)
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O último filho do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versão de |firstChild| que pula nós que são inteiramente
+ * whitespace ou comentários.
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O primeiro nó do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versão de |data| que não inclui whitespace no início
+ * e final e normaliza todos whitespaces para um espaço individual.  (Normalmente
+ * |data| é uma propriedade de nós de texto que dá o texto do nó.)
+ *
+ * @param txt  O nó de texto do qual data deve ser retornado
+ * @return     Uma string dando os conteúdos de um nó de texto com
+ *             whitespace colapsado.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa características do ECMA-262 Edition 3 String e RegExp
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja <code>"Este é o terceiro parágrafo"</code>, e então muda o atributo da classe e os conteúdos daquele parágrafo.</p>
+
+<pre class="brush: js">var cur = first_child(document.getElementById("teste"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este é o terceiro parágrafo.")
+  {
+      cur.className = "mágica";
+      cur.firstChild.textContent = "Este é o parágrafo mágico";
+  }
+  cur = node_after(cur);
+}
+</pre>
diff --git a/files/pt-br/web/api/document/activeelement/index.html b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html
index ca10f98461..ca10f98461 100644
--- a/files/pt-br/web/api/document/activeelement/index.html
+++ b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html
diff --git a/files/pt-br/web/api/document/elementfrompoint/index.html b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html
index c64d67dd08..c64d67dd08 100644
--- a/files/pt-br/web/api/document/elementfrompoint/index.html
+++ b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html
diff --git a/files/pt-br/web/api/document/getselection/index.html b/files/pt-br/web/api/documentorshadowroot/getselection/index.html
index 2f52375799..2f52375799 100644
--- a/files/pt-br/web/api/document/getselection/index.html
+++ b/files/pt-br/web/api/documentorshadowroot/getselection/index.html
diff --git a/files/pt-br/web/events/blur/index.html b/files/pt-br/web/api/element/blur_event/index.html
index 7eb9263be2..7eb9263be2 100644
--- a/files/pt-br/web/events/blur/index.html
+++ b/files/pt-br/web/api/element/blur_event/index.html
diff --git a/files/pt-br/web/events/focus/index.html b/files/pt-br/web/api/element/focus_event/index.html
index 9f6dd7117d..9f6dd7117d 100644
--- a/files/pt-br/web/events/focus/index.html
+++ b/files/pt-br/web/api/element/focus_event/index.html
diff --git a/files/pt-br/web/events/focusin/index.html b/files/pt-br/web/api/element/focusin_event/index.html
index 797424de54..797424de54 100644
--- a/files/pt-br/web/events/focusin/index.html
+++ b/files/pt-br/web/api/element/focusin_event/index.html
diff --git a/files/pt-br/web/events/focusout/index.html b/files/pt-br/web/api/element/focusout_event/index.html
index 8f72b211b2..8f72b211b2 100644
--- a/files/pt-br/web/events/focusout/index.html
+++ b/files/pt-br/web/api/element/focusout_event/index.html
diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html
deleted file mode 100644
index 93f5faee9a..0000000000
--- a/files/pt-br/web/api/element/name/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Element.name
-slug: Web/API/Element/name
-tags:
-  - API
-  - DOM
-  - Element
-  - NeedsBrowserCompatibility
-  - NeedsUpdate
-  - Property
-  - Reference
-  - Web
-translation_of: Web/API
-translation_of_original: Web/API/Element/name
----
-<p>{{ APIRef("DOM") }}</p>
-
-<h2 id="Summary" name="Summary">Summary</h2>
-
-<p><code><strong>name</strong></code> recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
-</div>
-
-<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxe</h2>
-
-<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
-var elName = <em>HTMLElement</em>.name;
-
-var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
-var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
-</pre>
-
-<h2 id="Example" name="Example">Exemplo</h2>
-
-<pre class="eval">&lt;form action="" name="formA"&gt;
-  &lt;input type="text" value="foo"&gt;
-&lt;/form&gt;
-
-&lt;script type="text/javascript"&gt;
-
-  // Recebe uma referência ao primeiro elemento no formulário
-  var formElement = document.forms['formA'].elements[0];
-
-  // Fornece um name a ele
-  formElement.name = 'inputA';
-
-  // Exibe o valor do input
-  alert(document.forms['formA'].elements['inputA'].value);
-
-&lt;/script&gt;
-</pre>
-
-<h2 id="Notes" name="Notes">Notas</h2>
-
-<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p>
-
-<h2 id="Specification" name="Specification">Especificação</h2>
-
-<p>Especificação W3C DOM 2 HTML:</p>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li>
-</ul>
diff --git a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html b/files/pt-br/web/api/event/comparison_of_event_targets/index.html
index e9b2004719..e9b2004719 100644
--- a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html
+++ b/files/pt-br/web/api/event/comparison_of_event_targets/index.html
diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/eventtarget/addeventlistener/index.html
index fea1e67e7b..fea1e67e7b 100644
--- a/files/pt-br/web/api/element/addeventlistener/index.html
+++ b/files/pt-br/web/api/eventtarget/addeventlistener/index.html
diff --git a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html
index c569966b5a..c569966b5a 100644
--- a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html
+++ b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html
diff --git a/files/pt-br/web/api/geolocation_api/index.html b/files/pt-br/web/api/geolocation_api/index.html
new file mode 100644
index 0000000000..b6799afa16
--- /dev/null
+++ b/files/pt-br/web/api/geolocation_api/index.html
@@ -0,0 +1,227 @@
+---
+title: Usando geolocation
+slug: Using_geolocation
+tags:
+  - Geolocation API
+  - Guia(2)
+translation_of: Web/API/Geolocation_API
+---
+<p>A <strong>API geolocation</strong> permite que o usuário forneça sua localização a aplicativos web se ele desejar. Por questões de privacidade, o usuário é perguntado se permite fornecer informações de localização.</p>
+
+<h2 id="O_objeto_geolocation">O objeto geolocation</h2>
+
+<p>O aplicativo de geolocalização é utilizado através de um objeto filho chamado <code>geolocation </code>localizado dentro do objeto <code>navigator</code>.  Se o objeto existe, os serviços de geolocalização estarão disponíveis. Você pode adicionalmente testar a presença da geolocalização:</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  alert("I'm sorry, but geolocation services are not supported by your browser.");
+}
+</pre>
+
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p>Ao iniciar no Gecko 1.9.2 (Firefox 3.6), add-ons podem obter o objeto de geolocalização obtendo a referência para o serviço de geolocaliazação como se ve a seguir:</p>
+
+<pre class="brush: js">var geolocation = Components.classes["@mozilla.org/geolocation;1"]
+                            .getService(Components.interfaces.nsIDOMGeoGeolocation);
+</pre>
+
+<h3 id="Obtendo_a_posição_atual">Obtendo a posição atual</h3>
+
+<p>Para obter a localização atual do usuário, você pode utiliza o método <code>getCurrentPosition().</code>  Isto inicia uma requisição assíncrona para identificar a posição do usuário, e consulta o hardware de localização para conseguir informações atualizadas. Quando a posição é determinada, uma rotina específica de retorno é executada. Você pode opcionalmente gerar uma segunda rotina de retorno se um erro ocorrer.  Um terceiro, e opcional, parâmetro é a interface "opções" onde você pode configurar o tempo máximo da posição recebida e o tempo a se esperar por uma solicitação.</p>
+
+<p>Use <code>getCurrentPosition()</code> se você deseja uma única posição rapidamente, independente da precisão.  Dispositivos com GPS, por exemplo, podem levar um minuto ou mais para conseguir a localização, e portanto dados menos precisos (localização do IP location ou rede wifi) podem retornar do método <code>getCurrentPosition()</code>.</p>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>O exemplo acima irá fazer a função the <code>do_something()</code> executar quando a localização for obtida.</p>
+
+<h3 id="Verificando_a_posição_atual">Verificando a posição atual</h3>
+
+<div class="syntaxbox">Se os dados de posição mudam (sejam pelo movimento do dispositivo ou se uma informação mais precisa for recebida), se pode configurar um retorno que é feito com esta informação de posição atual. Isto é feito usando a função <code>watchPosition(), </code>a qual tem os mesmos parâmetros de entrada da função <code>getCurrentPosition()</code>. Seu retorno é chamada múltiplas vezes, permitindo que o navegador ou atualize sua posição enquanto você se move, ou forneça uma localização mais precisa enquanto diferentes técnicas são usadas para localizar sua posição. O erro do retorno, o qual é opcional assim como no <code>getCurrentPosition()</code>, é chamado uma única vez, se nenhum resultado válido retornar.</div>
+
+<p>O <code>watchPosition()</code> pode ser usado sem que não haja a chamada inicial de <code>getCurrentPosition()</code>.</p>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+);</pre>
+
+<p>O método <code>watchPosition()</code> retorna um número de ID que pode ser usado para identificar a <code>posição</code> solicitada; você pode usar esse valor em conjunto com o método <code>clearWatch()</code>, parando a localização do usuário.</p>
+
+<pre>navigator.geolocation.clearWatch(watchID);
+
+</pre>
+
+<p><code>watchPosition()</code>retorna um callback sucesso e erro (como <code>getCurrentPosition</code>) e um objeto <code>positionObjects</code>, que pode ter três propriedades:</p>
+
+<ul>
+ <li><code>enableHighAccuracy</code> – Um booleano que indica ao dispositivo que você deseja obter leituras mais precisas (este parâmetro pode ou não pode fazer a diferença, dependendo do seu hardware)</li>
+ <li><code>maximumAge</code> – Idade máxima (em milissegundos) da leitura (opção adequada, pois o dispositivo pode armazenar em cache leituras para poupar energia e / ou largura de banda)</li>
+ <li><code>timeout</code> – O tempo máximo (em milissegundos) que está preparado para permitir que o dispositivo para tentar obter uma Geo Location</li>
+</ul>
+
+<p>Segue uma chamada para watchPosition:</p>
+
+<pre>var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});</pre>
+
+<p>Exemplo de watchPosition em uso: <a href="https://www.thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition.html">thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition</a><br>
+ <a id="fck_paste_padding"></a></p>
+
+<h2 id="Imprimindo_uma_posição">Imprimindo uma posição</h2>
+
+<p>A localização do usuário é impressa usando o objeto Position, que tem os seguintes campos:</p>
+
+<dl>
+ <dt>timestamp</dt>
+ <dd>Momento em que a leitura foi feita, como <code>DOMTimeStamp</code>.</dd>
+ <dt>coords</dt>
+ <dd>Objecto <a class="internal" href="/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords" title="En/NsIDOMGeoPositionCoords"><code>nsIDOMGeoPositionCoords</code></a> indicando a localização.</dd>
+ <dt>address {{ gecko_minversion_inline("1.9.2") }} {{obsolete_inline("14.0")}}</dt>
+ <dd>{{ interface("nsIDOMGeoPositionAddress") }} objeto especificando o endereço correspondente, se disponível.</dd>
+</dl>
+
+<h2 id="Manipulação_de_erros"><br>
+ Manipulação de erros</h2>
+
+<p>Retornando o callback de erro, se fornecido, chamar <code>getCurrentPosition()</code> e <code>watchPosition()</code>, tem a seguinte assinatura:</p>
+
+<pre>function errorCallback(PositionError error);
+</pre>
+
+<p>O <code>PositionError</code> tem a seguinte estrutura de campos:</p>
+
+<dl>
+ <dt>code</dt>
+ <dd>Um código de erro numérico dos seguintes procedimentos:</dd>
+ <dt><dfn><code>UNKNOWN_ERROR</code></dfn> (valor numérico 0)</dt>
+ <dd>O processo de aquisição de localização falhou devido a um erro de qualquer outro código nesta interface.</dd>
+ <dt><dfn><code>PERMISSION_DENIED</code></dfn> (valor numérico 1)</dt>
+ <dd>O processo de aquisição da localização falhou porque a origem aplicativo não tem permissão para usar a API de Geolocalização.</dd>
+ <dt><dfn><code>POSITION_UNAVAILABLE</code></dfn> (valor numérico 2)</dt>
+ <dd>A posição do dispositivo não pôde ser determinada. Um ou mais provedores de localização utilizados no processo de aquisição local gerou um erro interno que falou o processo completamente.</dd>
+ <dt><dfn><code>TIMEOUT</code></dfn> (numeric value 3)</dt>
+ <dd>O comprimento máximo de tempo especificado.</dd>
+ <dt>message</dt>
+ <dd>Uma mensagem de erro legível para uso em registros e depuração, mas não para exibir para o usuário.</dd>
+</dl>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Suporte Básico</th>
+   <th><a class="external" href="http://dev.w3.org/geo/api/spec-source-v2.html">Geolocation Level 2</a></th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>IE9 RC</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><strong>10.60</strong></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td>5 | 5 | 533</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Solicitando_permissão">Solicitando permissão</h2>
+
+<p>Qualquer add-on hospedado em addons.mozilla.org, que faz uso de dados de geolocalização, deve solicitar antes uma permissão. A função a seguir vai solicitar a permissão de um modo semelhante ao prompt. A resposta do usuário será salva no parâmetro <code>pref</code>. A função fornecida no parâmetro de <code>callback</code> será chamado com um valor booleano que indica a resposta do usuário. Se for <code>true</code>, o add-on poderá retornar dados de geolocalização.</p>
+
+<pre class="brush: js">function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+</pre>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ Interface("nsIGeolocationProvider") }}</li>
+ <li>{{ Interface("nsIDOMGeolocation") }}</li>
+ <li>{{ Interface("nsIDOMGeoPosition") }}</li>
+ <li>{{ Interface("nsIDOMGeoPositionCallback") }}</li>
+ <li>{{ Interface("nsIDOMGeoPositionError") }}</li>
+ <li>{{ Interface("nsIDOMGeoPositionErrorCallback") }}</li>
+ <li>{{ Interface("nsIDOMGeoPositionOptions") }}</li>
+ <li>{{ Interface("nsIDOMNavigatorGeolocation") }}</li>
+ <li><a class="external" href="http://dev.w3.org/geo/api/spec-source.html" title="http://dev.w3.org/geo/api/spec-source.html">Geolocation API on w3.org</a></li>
+ <li><a href="/en-US/demos/tag/tech:geolocation" title="en-US/demos/tag/tech:geolocation/">Demos about the Geolocation API</a></li>
+</ul>
+
+<div>{{ HTML5ArticleTOC() }}</div>
diff --git a/files/pt-br/web/api/history_api/exemplo/index.html b/files/pt-br/web/api/history_api/example/index.html
index a4dfc4b68f..a4dfc4b68f 100644
--- a/files/pt-br/web/api/history_api/exemplo/index.html
+++ b/files/pt-br/web/api/history_api/example/index.html
diff --git a/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html
new file mode 100644
index 0000000000..13609ee260
--- /dev/null
+++ b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html
@@ -0,0 +1,91 @@
+---
+title: Arrastar e soltar arquivos
+slug: DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos
+translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do <em>gerenciador de arquivos da plataforma subjacente</em> e soltado s em uma página da Web.</p>
+
+<p>Os principais passos para o drag and drop é definir a <em>drop zone</em> (ou seja  definir um elemento para a queda dos arquivos) e definir  event handlers para os eventos {{event("drop")}} e {{event("dragover")}} . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em <a href="https://github.com/mdn/dom-examples/tree/master/drag-and-drop">MDN's drag-and-drop repository</a> (pull requests e/ou issues são bem-vindas).</p>
+
+<p class="note">Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}}Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface {{domxref("DataTransfer")}} e a segunda API é a interface {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).</p>
+
+<h2 id="Definindo_a_drop_zone">Definindo a drop <em>zone</em></h2>
+
+<p>O elemento de destino do evento {{event("drop")}} precisa de um event handler global  {{domxref("GlobalEventHandlers.ondrop","ondrop")}} O seguinte trecho de código mostra como isso é feito com um elemento: {{HTMLelement("div")}}</p>
+
+<pre class="brush: html">&lt;div id="drop_zone" ondrop="dropHandler(event);"&gt;
+  &lt;p&gt;Drag one or more files to this Drop Zone ...&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Normalmente, um aplicativo inclui um event handler {{event("dragover")}} no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:</p>
+
+<pre class="brush: html">&lt;div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"&gt;
+  &lt;p&gt;Drag one or more files to this Drop Zone ...&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:</p>
+
+<pre class="brush: css">#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+</pre>
+
+<div class="note">
+<p>Nota: Observe que os eventos <code>dragstart</code> e <code>dragend</code> não são acionados ao arrastar um arquivo para o navegador do OS.</p>
+</div>
+
+<h2 id="Processo_de_drop">Processo de drop</h2>
+
+<p>O evento {{event("drop")}} é acionado quando o usuário solta o(s) arquivo(s)  no drop handler, se o navegador suportar a interface {{domxref("DataTransferItemList")}} o metodo {{domxref("DataTransferItem.getAsFile","getAsFile()")}} será usado para acessar cada arquivo; caso contrário, a interface {{domxref("DataTransfer")}} usara a propriedade {{domxref("DataTransfer.files","files")}} para acessar cada arquivo.</p>
+
+<p>Este exemplo mostra como escrever o nome de cada arquivo arrastado,  no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o {{domxref("File","File API")}}.</p>
+
+<p>Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.</p>
+
+<pre class="brush: js">function dropHandler(ev) {
+  console.log('File(s) dropped');
+
+  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Use a interface DataTransferItemList para acessar o (s) arquivo (s)
+    for (var i = 0; i &lt; ev.dataTransfer.items.length; i++) {
+      // Se os itens soltos não forem arquivos, rejeite-os
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Use a interface DataTransfer para acessar o (s) arquivo (s)
+    for (var i = 0; i &lt; ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+}</pre>
+
+<h2 id="Impedir_o_evento_de_arrastar_padrão_do_navegador">Impedir o evento de arrastar padrão do navegador</h2>
+
+<p>O seguinte event handler {{event("dragover")}} chama {{domxref("Event.preventDefault","preventDefault()")}} para desativar o manipulador padrão de arrastar e soltar do navegador.</p>
+
+<pre class="brush: js">function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Drag_operations" title="Drag Operations">Drag Operations</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/pt-br/web/api/html_drag_and_drop_api/index.html b/files/pt-br/web/api/html_drag_and_drop_api/index.html
new file mode 100644
index 0000000000..10e5592b91
--- /dev/null
+++ b/files/pt-br/web/api/html_drag_and_drop_api/index.html
@@ -0,0 +1,258 @@
+---
+title: Arrastar e soltar
+slug: DragDrop/Drag_and_Drop
+tags:
+  - Avançado
+  - Guia(2)
+  - HTML5
+  - Visão Geral
+  - XUL
+  - arrastar e soltar
+  - eventos
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador. Por exemplo, com essas funcionalidades, o usuário pode selecionar elementos arrastáveis (<em>draggable</em>) com o mouse, arrastar elementos até um elemento soltável (<em>droppable</em>), e soltar o elemento ao soltar o botão do mouse. Uma representação translúcida de elementos arrastáveis (<em>draggable)</em> seguem o ponteiro do mouse durante a operação de arrastar (drag).</p>
+
+<p>Para web sites, extensões e aplicações XUL, você pode customizar os tipos de elementos que podem se tornar arrastáveis (draggable) e o tipo de retorno que o elemento arrastável produz, assim como os elementos soltáveis (droppable).</p>
+
+<p><strong>NT: </strong>Para manter a tradução mais precisa e coesa, a partir daqui iremos manter os termos <em>drag</em> e <em>drop</em> e seus variantes conforme texto original. Sendo portanto mantidos também os termos <em>draggable</em> e <em>droppable</em>.</p>
+
+<p>Este documento é uma visão geral do drag and drop no HTML. Ele inclui uma descrição de suas interfaces, funcionalidades básicas de como permitir a adesão de funcionalidades arrastar e soltar em uma aplicação e um sumário da interoperabilidade entre interfaces.</p>
+
+<h2 id="Eventos_Drag">Eventos Drag</h2>
+
+<p>O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os <em>{{domxref("DragEvent","eventos drag")}}</em> são hereditários dos {{domxref("MouseEvent","eventos do mouse")}}. Uma operação típica de drag começa quando o usuário seleciona um elemento arrastável com o mouse, move o mouse até um elemento soltável (droppable) e solta o mouse. Durante as operações, diversos tipos de evento são acionados e alguns podem até ser acionados multiplas vezes (como por exemplo os tipos de evento {{event("drag")}} e {{event("dragover")}}.</p>
+
+<p>Todos os <a href="/en-US/docs/Web/API/DragEvent#Event_types">tipos de evento drag</a> são associados a um <a href="/en-US/docs/Web/API/DragEvent#GlobalEventHandlers">manipulador global de eventos</a>. Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Event</th>
+   <th scope="col">On Event Handler</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>{{event('drag')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
+   <td>Acionado quando um elemento ou seleção de texto está sendo arrastado.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragend')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
+   <td>Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminando um evento Drag</a>.)</td>
+  </tr>
+  <tr>
+   <td>{{event('dragenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
+   <td>Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Determinando Drop Targets</a>.)</td>
+  </tr>
+  <tr>
+   <td>{{event('dragexit')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
+   <td>Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
+   <td>Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
+   <td>Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos).</td>
+  </tr>
+  <tr>
+   <td>{{event('dragstart')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
+   <td>Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Começando uma Operação Drag</a>.)</td>
+  </tr>
+  <tr>
+   <td>{{event('drop')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
+   <td>Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja <a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">Realizando um Drop</a>.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note que eventos <code>dragstart</code> e <code>dragend</code> não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>A interface HTML drag and drop é composta pelos eventos {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}.</p>
+
+<p>A interface {{domxref("DragEvent")}} consiste de um construtor e uma propriedade, a propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que é um objeto {{domxref("DataTransfer")}}. Os objetos {{domxref("DataTransfer")}} incluem estados do evento drag como o tipo de drag sendo feito (por exemplo <code>copy</code> ou <code>move</code>), os dados do do evento drag (um ou mais itens) e o tipo de cada <em>item drag</em> (um MIME type). Objetos {{domxref("DataTransfer")}} também contém métodos para adicionar itens aos dados do drag e remover um item. As interfaces {{domxref("DragEvent")}} e {{domxref("DataTransfer")}} devem as únicas necessárias para adicionar capacidades de drag and drop para uma aplicação. Entretanto, note que o Firefox provê suporte para apenas algumas {{anch("Gecko specific interfaces","Gecko-specific extensions")}} ao objeto {{domxref("DataTransfer")}}, apesar de entretanto essas extensões funcionarem apenas no Firefox.</p>
+
+<p>Cada objeto {{domxref("DataTransfer")}} contém uma propriedade {{domxref("DataTransfer.items","items")}} que é uma {{domxref("DataTransferItemList","lista")}} dos objetos {{domxref("DataTransferItem")}}. Cada objeto {{domxref("DataTransferItem")}} representa um único <em>drag item</em> e cada item tem uma propriedade {{domxref("DataTransferItem.kind","kind (tipo)")}} que é o <em>tipo(kind)</em> de data (seja ela <code>string</code> ou <code>file</code>) e uma propriedade {{domxref("DataTransferItem.type","type (tipo)")}} que é o tipo de dado do item (ou seja, MIME type). O objeto {{domxref("DataTransferItem")}} também contém métodos para conseguir dados do item arrastável.</p>
+
+<p>O objeto {{domxref("DataTransferItemList")}} é uma lista de objetos {{domxref("DataTransferItem")}}. A lista de objetos contém métodos para: adicionar um item para uma lista, remover um item de uma lista e limpar a lista com todos os itens.</p>
+
+<p>A diferença chave entre das interfaces {{domxref("DataTransfer")}} e {{domxref("DataTransferItem")}} é que a primeira usa o método síncrono {{domxref("DataTransfer.getData","getData()")}} para acessar os dados de um item arrastável, e a segunda usa o método assíncrono {{domxref("DataTransferItem.getAsString","getAsString()")}} para acessá-lo.</p>
+
+<p>Note: as interfaces {{domxref("DragEvent")}} e a {{domxref("DataTransfer")}} são vastamente interoperáveis com navegadores desktop. Entretanto, as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} tem suporte limitado entre navegadores. Veja {{anch("Interoperabildade")}} para mais informações.</p>
+
+<h3 id="Interfaces_específicas_para_o_Gecko">Interfaces específicas para o Gecko</h3>
+
+<p>A Mozilla e o Firefox suportam algumas funcionalidades fora dos padrões do modelo drag and drop. Elas são <em>cfunções convenientes</em> para facilitar o arraste múltiplo de elementos e a manipulação de dados que não são strings (como arquivos). Para mais informações, veja <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>. Para mais informações, veja a página de referência {{domxref("DataTransfer")}} para todas as <a href="/en-US/docs/Web/API/DataTransfer#Gecko_properties">propriedades específicas para o Gecko</a> e <a href="/en-US/docs/Web/API/DataTransfer#Gecko_methods">Métodos específicos para o Gecko</a>.</p>
+
+<h2 id="O_básico">O básico</h2>
+
+<p>Esta seção dispõe de um resumo das etapas básicas para adicionar a funcionalidade drag and drop à uma aplicação. Cada seção inclui uma descrição da etapa, um breve exemplo em código, e links para informações adicionais.</p>
+
+<h3 id="Identificando_o_que_é_arrastável_draggable">Identificando o que é arrastável <em>(draggable)</em></h3>
+
+<p>Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir</p>
+
+<pre>function dragstart_handler(ev) {
+ console.log("dragStart");
+ // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer)
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+&lt;body&gt;
+ &lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event);"&gt;Este elemento é arrastável.&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Veja a <a href="/en-US/docs/Web/HTML/Global_attributes/draggable" title="draggable global attribute">referência do atributo draggable</a> e o <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">Guia de operações drag</a> para mais informações.</p>
+
+<h3 id="Defina_os_dados_do_drag">Defina os dados do drag</h3>
+
+<p>A aplicação é livre para incluir qualquer quantidade de dados do item em uma operação drag. Cada dado de um item é uma {{domxref("DOMString","string")}} de um tipo particular, tipicamente um MIME type como por exemplo <code>text/html</code>.</p>
+
+<p>Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que <em>segura</em> os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para <em>gerenciar</em> os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir.</p>
+
+<pre>function dragstart_handler(ev) {
+  // Adiciona os dados do arraste (drag)
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "&lt;p&gt;Parágrafo de exemplo&lt;/p&gt;");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+</pre>
+
+<p>Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como texto, HTML, links, e files), veja <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Tipos recomendados de Drag Types</a> e para mais informações sobre os dados do arraste (drag data), veja <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</p>
+
+<h3 id="Defina_uma_imagem_de_arraste_drag_image">Defina uma imagem de arraste (drag image)</h3>
+
+<p>Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir.</p>
+
+<pre>function dragstart_handler(ev) {
+  // Cria uma imagem e então a utiliza como a "drag image".
+  // NOTA: mude "example.gif" como uma imagem existente, caso contrário
+  // ela não será criada e a imagem padrão será utilizada como padrão.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+</pre>
+
+<p>Para aprender mais sobre arrastar imagens de retorno, veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Definindo a imagem de retorno do arraste (Drag)</a>.</p>
+
+<h3 id="Defina_o_efeito_do_arraste_Drag_effect">Defina o <em>efeito</em> do arraste (<em>Drag effect</em>)</h3>
+
+<p>A propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso <em>hover</em>) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.</p>
+
+<p>Três efeitos podem ser definidos: </p>
+
+<p><code>copy</code> indica que os dados sendo arrastados podem ser copiados da localização atual para a localização de destino (localização do <em>drop</em>). </p>
+
+<p><code>move</code> indica que os dados sendo arrastados irá ser movido.</p>
+
+<p><code>link</code> indica que alguma forma de relação ou conexão será criada entre a localização de origem (source) e de destino (drop). </p>
+
+<p>Durante a operação de arraste, os efeitos do arraste (drag) podem ser modificados para determinar que certos efeitos são permitidos em determinadas localizações. Se permitido, uma soltura (drop) pode ocorrer naquela localização.</p>
+
+<p>O exemplo a seguir mostra como utilizar essa propriedade.</p>
+
+<pre>function dragstart_handler(ev) {
+  // Determina o efeito de arraste para copy
+  ev.dataTransfer.dropEffect = "copy";
+}
+</pre>
+
+<p>Veja <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Efeitos do Arraste (Drag Effects)</a> para mais detalhes.</p>
+
+<h3 id="Defina_uma_zona_de_soltura_drop_zone">Defina uma zona de soltura <em>(drop zone)</em></h3>
+
+<p>Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (d<em>rop zone)</em> ou que seja soltável <em>(droppable)</em>, o elemento precisa ter ambos os atributos  {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um.</p>
+
+<pre>function dragover_handler(ev) {
+ ev.preventDefault();
+ // Define o dropEffect para ser do tipo move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;body&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Zona de Soltura (Drop Zone)&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Note que cada manipulador chama {{domxref("Event.preventDefault","preventDefault()")}} para previnir o processamento adicional de eventos (como eventos touch ou eventos pointer).</p>
+
+<p>Para mais informações, veja <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Especificando pontos de soltura (Drop Targets)</a>.</p>
+
+<h3 id="Manipulando_o_efeito_de_soltura_drop">Manipulando o <em>efeito</em> de soltura (drop)</h3>
+
+<p>O manipulador do evento {{event("drop")}} é livre para processar os dados do arraste (drag) de maneira específica em uma aplicação. Tipicamente, uma aplicação usaria o método {{domxref("DataTransfer.getData","getData()")}} para reter os itens arrastados e processá-los de acordo. A semântica da aplicação pode ser diferente dependendo do valor do {{domxref("DataTransfer.dropEffect","dropEffect")}} e/ou o estado da chave que o modifica.</p>
+
+<p>O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element).</p>
+
+<pre>function dragstart_handler(ev) {
+ // Adiciona o id do elemento alvo para o objeto de transferência de dados
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // Define o dropEffect para ser do tipo move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;body&gt;
+ &lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event);"&gt;Este elemento é arrastável.&lt;/p&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Zona de Soltura (Drop Zone)&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Para mais informações, veja <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Realizando uma soltura (Drop)</a>.</p>
+
+<h3 id="Fim_da_soltura_Drag_end">Fim da soltura (Drag end)</h3>
+
+<p>No início da operação de arraste (drag), o evento {{event("dragend")}} é acionado no elemento de origem (<em>source)</em> - o elemento que foi o alvo do início do arraste (drag start). Este evento é acionado sempre quando o arraste é completado ou cancelado. O manipulador de eventos {{event("dragend")}} pode verificar o valor da propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} para determinar se a operação de arraste foi bem sucedida ou não.</p>
+
+<p>Para mais informações sobre manipular o final de uma operação de arraste, veja <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finalizando um arraste (Drag)</a>.</p>
+
+<h2 id="Interoperabilidade">Interoperabilidade</h2>
+
+<p>Como podem ser visto no <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">DataTransferItem interface's Browser Compatibility table</a>, drag-and-drop a interoperabilidade é relativamente ampla emtre ps brpwsers desktop (exceto as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}  que tem o menor suport). Estes dados tambem indica que o suporte ao drag and drop entre browser mobile é muito menor.</p>
+
+<h2 id="Examples_and_demos" name="Examples_and_demos">Exemplos e demonstrações</h2>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copiando e movendo elementos com a interface <code>DataTransfer</code></a></li>
+ <li><a href="http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copiando e movendo elementos com a interface <code>DataTransferListItem</code></a></li>
+ <li>Arrastando e soltando arquivos; Apenas para o Firefox: <a href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>Arrastando e soltando arquivos; Todos os navegadores: <a href="https://jsbin.com/hiqasek/edit?html,js,output" title="https://jsbin.com/hiqasek">https://jsbin.com/hiqasek/</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Operações de Arraste</a></li>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Arrastando e Soltando múltiplos elementos</a></li>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Tipos re arraste (Drag Types) recomendados</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+ <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Dados de unteroperabilidade Drag and Drop de acordo com o CanIUse</a></li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcontentelement/seletor/index.html b/files/pt-br/web/api/htmlcontentelement/select/index.html
index 63fae05c69..63fae05c69 100644
--- a/files/pt-br/web/api/htmlcontentelement/seletor/index.html
+++ b/files/pt-br/web/api/htmlcontentelement/select/index.html
diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/htmlelement/accesskey/index.html
index e0425e3645..e0425e3645 100644
--- a/files/pt-br/web/api/element/accesskey/index.html
+++ b/files/pt-br/web/api/htmlelement/accesskey/index.html
diff --git a/files/pt-br/web/api/node/innertext/index.html b/files/pt-br/web/api/htmlelement/innertext/index.html
index 1ab5e81027..1ab5e81027 100644
--- a/files/pt-br/web/api/node/innertext/index.html
+++ b/files/pt-br/web/api/htmlelement/innertext/index.html
diff --git a/files/pt-br/web/events/input/index.html b/files/pt-br/web/api/htmlelement/input_event/index.html
index dd69baf988..dd69baf988 100644
--- a/files/pt-br/web/events/input/index.html
+++ b/files/pt-br/web/api/htmlelement/input_event/index.html
diff --git a/files/pt-br/web/events/abort/index.html b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html
index 62243a2762..62243a2762 100644
--- a/files/pt-br/web/events/abort/index.html
+++ b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html
diff --git a/files/pt-br/web/api/htmlelement/blur/index.html b/files/pt-br/web/api/htmlorforeignelement/blur/index.html
index 25a2273aec..25a2273aec 100644
--- a/files/pt-br/web/api/htmlelement/blur/index.html
+++ b/files/pt-br/web/api/htmlorforeignelement/blur/index.html
diff --git a/files/pt-br/web/api/htmlelement/dataset/index.html b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html
index 2cb4ba63b0..2cb4ba63b0 100644
--- a/files/pt-br/web/api/htmlelement/dataset/index.html
+++ b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html
diff --git a/files/pt-br/web/api/htmlelement/focus/index.html b/files/pt-br/web/api/htmlorforeignelement/focus/index.html
index 8f798b3d86..8f798b3d86 100644
--- a/files/pt-br/web/api/htmlelement/focus/index.html
+++ b/files/pt-br/web/api/htmlorforeignelement/focus/index.html
diff --git a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html
index da14879b31..da14879b31 100644
--- a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html
+++ b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html
diff --git a/files/pt-br/web/api/network_information_api/index.html b/files/pt-br/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..032fc54169
--- /dev/null
+++ b/files/pt-br/web/api/network_information_api/index.html
@@ -0,0 +1,56 @@
+---
+title: Network Information API
+slug: WebAPI/Network_Information
+translation_of: Web/API/Network_Information_API
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<p>A API de Informações de Rede fornece informação sobre a conexão do sistema, assim como a banda atual do dispositivo do usuário ou qualquer conexão que seja medida. Essa pode também ser usada para selecionar conteúdo de alta ou baixa definição baseado na conexão do usuário. Toda a API consiste na adição da interface domxref("Connection") e uma única propriedade a interface {{domxref("Navigator")}}: {{domxref("Navigator.connection")}}.</p>
+
+<h2 id="Detectando_mudanças_de_conexão">Detectando mudanças de conexão</h2>
+
+<p>Este é um exemplo vê mudança na conexão do usuário. Essa é similar a como uma app pode alertar quando o usuário move de uma conexão de alto para baixo custo por exemplo, a fim de reduzir a demanda da banda para previnir que o usuário seja submetido a cargos substanciais.</p>
+
+<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td>
+   <td>{{ Spec2('Network Information') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2>
+
+<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li>
+ <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li>
+ <li>{{domxref("window.navigator.connection")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html b/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html
deleted file mode 100644
index a05abeae88..0000000000
--- a/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Entendendo o uso do método appendChild em javascript
-slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript
----
-<div>{{ApiRef("DOM")}}</div>
-
-<h2 id="Summary" name="Summary">Resumo</h2>
-
-<p>Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxe</h2>
-
-<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre>
-
-<ul>
- <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li>
- <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li>
-</ul>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p>
-
-<h2 id="Example" name="Example">Exemplo</h2>
-
-<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
-var p = document.createElement("p");
-document.body.appendChild(p);</pre>
-
-<h2 id="Notes" name="Notes">Notas</h2>
-
-<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).</p>
-
-<p>Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, <em>só então</em>, ser adicionado na nova posição.</p>
-
-<p>Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p>
-
-<p>Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.</p>
-
-<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.</p>
-
-<h2 id="Specification" name="Specification">Especificação</h2>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li>
-</ul>
-
-<h2 id="See_also" name="See_also">Ver também</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild")}}</li>
- <li>{{domxref("Node.replaceChild")}}</li>
- <li>{{domxref("Node.insertBefore")}}</li>
- <li>{{domxref("Node.hasChildNodes")}}</li>
-</ul>
diff --git a/files/pt-br/web/api/notificacoes/index.html b/files/pt-br/web/api/notification/index.html
index 9103aac190..9103aac190 100644
--- a/files/pt-br/web/api/notificacoes/index.html
+++ b/files/pt-br/web/api/notification/index.html
diff --git a/files/pt-br/web/api/api_de_desempenho/index.html b/files/pt-br/web/api/performance_api/index.html
index 1b6997e293..1b6997e293 100644
--- a/files/pt-br/web/api/api_de_desempenho/index.html
+++ b/files/pt-br/web/api/performance_api/index.html
diff --git a/files/pt-br/web/api/api_push/best_practices/index.html b/files/pt-br/web/api/push_api/best_practices/index.html
index 9b0fafd2b7..9b0fafd2b7 100644
--- a/files/pt-br/web/api/api_push/best_practices/index.html
+++ b/files/pt-br/web/api/push_api/best_practices/index.html
diff --git a/files/pt-br/web/api/api_push/index.html b/files/pt-br/web/api/push_api/index.html
index 563b711cd8..563b711cd8 100644
--- a/files/pt-br/web/api/api_push/index.html
+++ b/files/pt-br/web/api/push_api/index.html
diff --git a/files/pt-br/web/api/randomsource/index.html b/files/pt-br/web/api/randomsource/index.html
deleted file mode 100644
index e0dbd0a970..0000000000
--- a/files/pt-br/web/api/randomsource/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: RandomSource
-slug: Web/API/RandomSource
-tags:
-  - API
-  - Interface
-  - RandomSource
-  - Referencia
-  - Web Crypto API
-translation_of: Web/API/Crypto/getRandomValues
-translation_of_original: Web/API/RandomSource
----
-<p>{{APIRef("Web Crypto API")}}</p>
-
-<p><strong><code>RandomSource</code></strong> representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.</p>
-
-<p><code>RandomSource</code> não é uma interface e nenhum objeto deste tipo pode ser criado.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<p><em><code>RandomSource</code> não define ou herda nenhuma propriedade.</em></p>
-
-<dl>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
- <dd>Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.</dd>
-</dl>
-
-<h2 id="Specification" name="Specification">Especificação</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td>
-   <td>{{Spec2('Web Crypto API')}}</td>
-   <td>Definição inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>11.0 {{ webkitbug("22049") }}</td>
-   <td>{{CompatGeckoDesktop(21)}} [1]</td>
-   <td>11.0</td>
-   <td>15.0</td>
-   <td>3.1</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatNo() }}</td>
-   <td>23</td>
-   <td>{{CompatGeckoMobile(21)}}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>6</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Apesar da <code>RandomSource</code> estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.</p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{ domxref("Window.crypto") }} para conseguir um objeto {{domxref("Crypto")}}.</li>
- <li>{{jsxref("Math.random")}}, uma fonte de números aleatórios não criptografados.</li>
-</ul>
diff --git a/files/pt-br/web/api/seleção/index.html b/files/pt-br/web/api/selection/index.html
index 9cac677942..9cac677942 100644
--- a/files/pt-br/web/api/seleção/index.html
+++ b/files/pt-br/web/api/selection/index.html
diff --git a/files/pt-br/web/api/svgaelement/svgalement.target/index.html b/files/pt-br/web/api/svgaelement/target/index.html
index e197ee81e5..e197ee81e5 100644
--- a/files/pt-br/web/api/svgaelement/svgalement.target/index.html
+++ b/files/pt-br/web/api/svgaelement/target/index.html
diff --git a/files/pt-br/web/guide/events/touch_events/index.html b/files/pt-br/web/api/touch_events/index.html
index df21cdf335..df21cdf335 100644
--- a/files/pt-br/web/guide/events/touch_events/index.html
+++ b/files/pt-br/web/api/touch_events/index.html
diff --git a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html
index 2743f68d65..2743f68d65 100644
--- a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html
+++ b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html
diff --git a/files/pt-br/web/api/api_web_audio/index.html b/files/pt-br/web/api/web_audio_api/index.html
index 8f582eb524..8f582eb524 100644
--- a/files/pt-br/web/api/api_web_audio/index.html
+++ b/files/pt-br/web/api/web_audio_api/index.html
diff --git a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html b/files/pt-br/web/api/web_audio_api/simple_synth/index.html
index b0fdf2a0c4..b0fdf2a0c4 100644
--- a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html
+++ b/files/pt-br/web/api/web_audio_api/simple_synth/index.html
diff --git a/files/pt-br/web/api/web_storage_api_pt_br/index.html b/files/pt-br/web/api/web_storage_api/index.html
index f4e16bd9e7..f4e16bd9e7 100644
--- a/files/pt-br/web/api/web_storage_api_pt_br/index.html
+++ b/files/pt-br/web/api/web_storage_api/index.html
diff --git a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html
index eb9807f0ef..eb9807f0ef 100644
--- a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html
+++ b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html
diff --git a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
index 7b4f6384f6..7b4f6384f6 100644
--- a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html
+++ b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
diff --git a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
index 72ac37e56a..72ac37e56a 100644
--- a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html
+++ b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
diff --git a/files/pt-br/web/api/websockets_api/index.html b/files/pt-br/web/api/websockets_api/index.html
new file mode 100644
index 0000000000..1a24b9d86a
--- /dev/null
+++ b/files/pt-br/web/api/websockets_api/index.html
@@ -0,0 +1,178 @@
+---
+title: WebSockets
+slug: WebSockets
+tags:
+  - Referencia
+  - Sumario
+  - WebSockets
+translation_of: Web/API/WebSockets_API
+---
+<p>WebSockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentação</h2>
+
+<dl>
+ <dt><a href="/pt-BR/docs/WebSockets/Escrevendo_aplicacoes_cliente_WebSocket" title="WebSockets/Writing WebSocket client applications">Escrevendo aplicações cliente WebSocket</a></dt>
+ <dd>Um tutorial para escrever clientes WebSocket para ser executado no browser.</dd>
+ <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">Referencias WebSockets</a></dt>
+ <dd>Uma referência para a API WebSocket do lado do cliente.</dd>
+ <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">(TBD)Escrevendo servidores WebSocket</a></dt>
+ <dd><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">Um guia para escrever código do lado do servidor para lidar com o protocolo WebSocket.</a></dd>
+</dl>
+
+<p><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Saiba mais...</a></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Ferramentas</h2>
+
+<ul>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Uma poderosa plataforma cruzada para API WebSocket <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Uma implementação para servidor da API WebSocket<a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">Uma lista mais ampla de frameworks e bibliotecas aqui</a></li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - O Protocolo WebSocket</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/websockets/">Especificação da API WebSocket</a></li>
+ <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Eventos enviados para servidor</a></li>
+ <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - Uma comunidade sem fins lucrativos baseada no site WebSocket</li>
+</ul>
+
+<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte a versão 76 {{obsolete_inline}}</td>
+   <td>6</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.00 (desativado)</td>
+   <td>5.0.1</td>
+  </tr>
+  <tr>
+   <td>Protocolo suporta versão 7 {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Protocolo suporta versão 10 {{obsolete_inline}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop("7.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>HTML5 Labs</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Suporte padrão - RFC 6455</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte a versão 76 {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protocolo suporta versão 7 {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protocolo suporta versão 8 (IETF rascunho 10) {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Suporte padrão - RFC 6455</td>
+   <td>16 (Chrome)</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_Gecko">Notas Gecko</h3>
+
+<p>O suporte a WebSockets no Firefox continua acompanhando as constantes especificações do WebSocket. O Firefox 6 implementa a versão 7 do protocolo subjacente, enquanto o Firefox 7 implementa a versão 8 (conforme especificado pelo rascunho IETF 10). O Firefox móvel recebeu suporte WebSocket no Firefox mobile 7.0.</p>
+
+<h4 id="Gecko_6.0">Gecko 6.0</h4>
+
+<p>Antes do Gecko 6.0 {{geckoRelease("6.0")}}, estava incorreto, um objeto <code>WebSocket</code> que alguns sites implicavam que os serviços <code>WebSocket</code> não eram prefixados. Este objeto foi renomeado para <code>MozWebSocket</code>.</p>
+
+<h4 id="Gecko_7.0">Gecko 7.0</h4>
+
+<p>Iniciado no Gecko 7.0 {{geckoRelease("7.0")}}, o <code>network.websocket.max-connections</code> preferencialmente usado para determinar o número máximo de conexões do WebSocket que pode m ser abertas de cada vez. O valor padrão é 200.</p>
+
+<h4 id="Gecko_8.0">Gecko 8.0</h4>
+
+<p>Iniciado no Gecko 8.0 {{geckoRelease("8.0")}}, a extensão de fluxo de expansão para o protocolo WebSocket foi desativada, por estar obsoleta nas especificações. Isso resolve incompatibilidades com alguns sites.</p>
+
+<h4 id="Gecko_11.0">Gecko 11.0</h4>
+
+<p>Antes do Gecko 11.0, as mensagens recebidas e enviadas estavam limitadas a 16 MB de tamanho. Agora elas podem ter até 2 GB de tamanho. Note, no entanto, que as limitações de memória (especialmente em dispositivos móveis) tornam isso apenas teoria, não se aplica à prática. Na realidade, as transferências desse tamanho falharão em dispositivos que não possuem memória suficiente.</p>
+
+<p>Além disso, o ArrayBuffer envia e recebe suporte para dados binários</p>
+
+<p>Iniciado no Gecko 11.0, a API do WebSocket já não é prefixada.</p>
+
+<div class="warning"><strong>Atenção:</strong>Entre outras coisas, um motivo chave para o WebSockets estar desativado por padrão no Firefox 4 e 5 é a descoberta de um <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">Problema de segurança no design do protocolo</a>. Isso foi corrigido no Firefox 6 implementando uma versão mais recente do protocolo que corrige o problema.</div>
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html
new file mode 100644
index 0000000000..af608ae641
--- /dev/null
+++ b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html
@@ -0,0 +1,182 @@
+---
+title: Escrevendo aplicações cliente WebSocket
+slug: WebSockets/Escrevendo_aplicacoes_cliente_WebSocket
+tags:
+  - Cliente
+  - Exemplo
+  - Guía
+  - WebSocket API
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+---
+<p><span style="line-height: 1.5;">Aplicações cliente usam o </span><a href="/en-US/docs/Web/API/Websockets_API">WebSocket API</a> para se comunicar com <a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers">WebSocket servers</a> sob o protocolo WebSocket.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="warning">
+<p>O fragmento de código neste artigo foi tomado de um exemplo de chat usando WebSocket. <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">v</a>eja o código, então experimente o exemplo. <strong>O exemplo atual possui um bug; ele está tentando usar WebSockets inseguro e precisa ser atualizado para usar WebSocokets seguro. Iremos arrumar isso em breve!</strong></p>
+</div>
+
+<h2 id="Criando_um_objeto_WebSocket">Criando um objeto WebSocket </h2>
+
+<p>Para se comunicar utilizando o protocolo WebSocket, você precisa criar um objeto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket">WebSocket</a>,</code> que automaticamente tentará abrir a conexão com o servidor.</p>
+
+<p>O construtor WebSocket aceita dois campos, um obrigatório e um opcional:</p>
+
+<pre class="notranslate">WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>A URL para se conectar. Esta deve ser a URL para qual o WebSocket irá responder.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Uma única string indicando o protocolo ou uma <em>array </em>de strings de protocolos. Estas strings são usadas para indicar sub-protocolos, de forma que um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer que um servidor seja capaz de lidar com diferentes tipos de interações a depender do <code>protocol</code> especificado). Se não especificar uma string de protocolo, uma string vazia é assumida.</dd>
+</dl>
+
+<p>O construtor lançará a exceção <strong><code>SECURITY_ERR</code></strong> se o destino não permitir acesso. Isso pode acontecer se você tentar utilizar uma conexão insegura (a maioria dos {{Glossary("user agent", "user agents")}} agora necessitam de um link seguro para todas as conexões WebSocket, a menos que estejam no mesmo dispositivo ou na mesma rede).</p>
+
+<dl>
+</dl>
+
+<h3 id="Erros_de_Conexão">Erros de Conexão</h3>
+
+<p>Se um erro ocorrer durante a tentativa de conexão, primeiro um simpes evento com o nome "error" é enviado ao objeto <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a>  (invocando, assim, seu manipulador <code>onerror</code>), e então o <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> é enviado ao objeto <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a> (invocando o manipulador <code>onclose</code>) para indicar a razão pela qual a conexão foi fechada.</p>
+
+<p>O browser pode exibir uma descrição de erro mais detalhada na saída do console, ou mesmo um código de encerramento conforme definido na <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> através do <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>. Está implementado a partir do Firefox 11.</p>
+
+<h3 id="Exemplos">Exemplos</h3>
+
+<p>Neste simples exemplo, criaremos um novo WebSocket, conectando ao servidor em <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Neste exemplo utilizaremos um protocolo customizado denominado "protocolOne", embora possa ser omitido.</p>
+
+<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+</pre>
+
+<p>No retorno, <code>exampleSocket.readyState</code> está como <code>CONNECTING</code>. O <code>readyState</code> se tornará <code>OPEN</code> quando a conexão estiver pronta para transferir dados.</p>
+
+<p>Se quiser abrir uma conexão e for flexível quanto aos protocolos suportados, você pode especificar um array de protocolos:</p>
+
+<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+</pre>
+
+<p>Uma vez que a conexão for estabelecida (isso é, <code>readyState</code> está <code>OPEN</code>), <code>exampleSocket.protocol</code> informará qual protocolo o servidor selecionou.</p>
+
+<p>Nos exemplos acima, <code>ws</code> foi substituído por <code>http</code>, de forma similar <code>wss</code> substitui <code>https</code>. Estabelecer uma conexão WebSocket depende do <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Mecanismo de Aprimoramento HTTP</a>, de forma que o pedido para atualização de protocolo está implícito quando endereçamos o servidor HTTP como <code><span class="nowiki">ws://www.example.com</span></code> ou <code><span class="nowiki">wss://www.example.com</span></code>.</p>
+
+<h2 id="Enviando_dados_ao_servidor">Enviando dados ao servidor</h2>
+
+<p>Uma vez a conexão aberta, você pode iniciar a transmisão de dados ao servidor. Para tanto, chame o método <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()">send()</a></code> do <code>WebSocket</code> para cada mensagem que queira enviar:</p>
+
+<pre class="brush: js notranslate">exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
+</pre>
+
+<p>Você pode enviar dados como uma string, {{ domxref("Blob") }}, ou um <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p>
+
+<div class="note"><strong>Note:</strong> Nas versões anteriores à 11, o Firefox suporta apenas o envio de dados como string.</div>
+
+<p>Visto que estabelecer uma conexão funciona de forma assícrona e, consequentemente, propensa a erros, não há garantia de sucesso ao chamar o método <code>send()</code> imediatamente após criar um objeto WebSocket. Podemos, pelo menos, ter certeza de que a tentativa de envio dos dados apenas ocorre quando uma conexão é estabelecida definindo um manipulador de eventos <code>onopen</code>:</p>
+
+<pre class="brush: js notranslate">exampleSocket.onopen = function (event) {
+  exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
+};
+</pre>
+
+<h3 id="Utilizando_JSON_para_transmitir_objetos">Utilizando JSON para transmitir objetos</h3>
+
+<p>Uma forma conveniente é usar <a href="/en/JSON" title="en/JSON">JSON</a> para enviar dados razoavelmente complexos ao servidor. Por exemplo, um aplicação de chat pode interagir  com o servidor empregando um protocolo que utilize pacotes de dados  JSON encapsulados:</p>
+
+<pre class="brush: js notranslate">// Enviar texto para todos os usuarios atraves do servidor
+function sendText() {
+  // Construir um objeto do tipo msg contendo o dado que o servidor precisa processar a partir do cliente de chat.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Enviar o objeto msg como um JSON em formato de string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Esvaziar o campo input do elemento text, pronto pra receber a próxima linha de texto do usuário.
+  document.getElementById("text").value = "";
+}
+</pre>
+
+<h2 id="Recebendo_mensagens_do_servidor">Recebendo mensagens do servidor</h2>
+
+<p>A API WebSockets é dirigida por <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/Events/Overview_of_Events_and_Handlers">eventos</a>; quando mensagens são recebidas, um evento de "mensagem" é entregue à função <code>onmessage</code>. Para começar a ouvir os dados de entrada, você pode fazer algo conforme o exemplo abaixo:</p>
+
+<pre class="brush: js notranslate">exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+</pre>
+
+<h3 id="Recebendo_e_interpretando_objetos_JSON">Recebendo e interpretando objetos JSON</h3>
+
+<p>Vamos considerar que a aplicação cliente de chat remete o envio de dados {{ anch("Utilizando JSON para transmitir objetos") }}. Existem diversos tipos de pacotes de dados que o cliente pode receber, tais como:</p>
+
+<ul>
+ <li>Handshake de login</li>
+ <li>Messagem de texto</li>
+ <li>Atualizações da lista de usuários</li>
+</ul>
+
+<p>O código que interpreta as mensagens de entrada se parecerá com esse:</p>
+
+<pre class="brush: js notranslate">exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      break;
+    case "message":
+      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      break;
+    case "rejectusername":
+      text = "&lt;b&gt;Seu usuario foi configurado como &lt;em&gt;" + msg.name + "&lt;/em&gt; porque o nome que você escolheu está em uso.&lt;/b&gt;&lt;br&gt;"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i &lt; msg.users.length; i++) {
+        ul += msg.users[i] + "&lt;br&gt;";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+</pre>
+
+<p>Aqui utilizamos <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> para conveter o objeto JSON de volta ao objeto original, em seguida, examine e aja de acordo com seu conteúdo.</p>
+
+<h3 id="Formato_de_dados_de_texto">Formato de dados de texto</h3>
+
+<p>O formato de Texto recebido através de uma conexão WebSocket está no formato UTF-8.</p>
+
+<h2 id="Fechando_a_conexão">Fechando a conexão</h2>
+
+<p>Quando finalizar o uso da conexão WebSocket, invoque o método <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a>:</p>
+
+<pre class="brush: js notranslate">exampleSocket.close();
+</pre>
+
+<p>Pode ser útil examinar o atributo <code>bufferedAmount</code> do socket  antes de tentar fechar a conexão para determinar se qualquer dado ainda está pendente de transmissão na rede. </p>
+
+<h2 id="Considerações_de_segurança">Considerações de segurança</h2>
+
+<p>WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocke, e não mais suportam contextos diferentes desse.</p>
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html
new file mode 100644
index 0000000000..553ba11aec
--- /dev/null
+++ b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html
@@ -0,0 +1,237 @@
+---
+title: 'Escrevendo um servidor WebSocket em C #'
+slug: WebSockets/Writing_WebSocket_server
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_server
+---
+<h2 id="Introdução">Introdução</h2>
+
+<p>Se você quiser usar uma API WebSocket, você precisara ter um servidor. Neste artigo vou mostrar como escrever um WebSocket em C#. Você pode fazer isso em qualquer linguagem server-side, mas para manter as coisas simples e mais compreensíveis eu escolhi uma linguagem Microsoft.</p>
+
+<p>Este servidor está em conformidade com a <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, por isso irá tratar apenas as conexões com os navegadores Chrome versão 16, Firefox 11, IE 10 ou superior. </p>
+
+<h2 id="Primeiros_passos">Primeiros passos</h2>
+
+<p>Os WebSocket´s se comunicam através de uma conexão TCP (Transmission Control Protocol), felizmente o C# possui a classe <a href="https://msdn.microsoft.com/pt-br/library/system.net.sockets.tcplistener.aspx">TcpListener</a> que, como o nome sugere, tem a função de escutar (Listener) as comunicações via TCP. A classe TcpListener está no namespace System.Net.Sockets.</p>
+
+<div class="note">
+<p><span style="line-height: 1.572;">É uma boa idéia usar a palavra chave using para escrever menos. Isso significa que não é preciso você reescrever o namespace toda vez que usar uma classe dele.</span></p>
+</div>
+
+<h3 id="TcpListener">TcpListener</h3>
+
+<p>Construtor:</p>
+
+<pre class="brush: cpp">TcpListener(System.Net.IPAddress localaddr, int port)</pre>
+
+<p>Aqui você define onde o servidor será acessível.</p>
+
+<div class="note">
+<p><span style="line-height: 1.572;">Para setar facilmente o tipo esperado no primeiro parâmetro, use o método estático Parse da classe IPAddress.</span></p>
+</div>
+
+<p><span style="line-height: 1.572;">Métodos</span><span style="line-height: 1.572;">:</span></p>
+
+<ul>
+ <li><span style="line-height: 1.572;">Start()</span></li>
+ <li><span style="line-height: 1.572;">System.Net.Sockets.<a href="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.tcpclient.aspx">TcpClient</a> AcceptTcpClient()<br>
+  Espera por uma conexão TCP, aceita a conexão e retorna um objeto TcpClient.</span></li>
+</ul>
+
+<p><span style="line-height: 1.572;">Veja como usar o que aprendemos:</span></p>
+
+<pre class="brush: cpp">​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("A client connected.");
+    }
+}
+</pre>
+
+<h3 id="TcpClient"><span style="line-height: 1.572;">TcpClient</span></h3>
+
+<p>Métodos:</p>
+
+<ul>
+ <li><code>System.Net.Sockets.<a href="http://msdn.microsoft.com/en-us/library/system.net.sockets.networkstream.aspx" title="http://msdn.microsoft.com/en-us/library/system.net.sockets.networkstream.aspx">NetworkStream</a> GetStream()</code><br>
+  Obtém o fluxo (stream) do canal de comunicação. Ambos os lados do canal de comunicação possuem a capacidade de ler e escrever.</li>
+</ul>
+
+<p>Propriedades:</p>
+
+<ul>
+ <li><code>int Available</code><br>
+  Este é o numero de bytes de dados que foram enviados. o valor é zero enquanto <em>NetworkStream.DataAvailable</em> for <em>falso</em>.</li>
+</ul>
+
+<h3 id="NetworkStream">NetworkStream</h3>
+
+<p>Métodos:</p>
+
+<pre class="brush: cpp">Write(Byte[] buffer, int offset, int size)</pre>
+
+<p>Grava bytes do buffer, <em>offset </em>e <em>size </em>determinam o tamanho da mensagem.</p>
+
+<pre><span class="brush: cpp" style="line-height: 1.572;">Read(Byte[] buffer, int offset, int size)</span></pre>
+
+<p>Lê bytes para o <em>buffer, offset e size </em>determinam o tamanho da mensagem.<em> </em></p>
+
+<p>Vamos estender nosso exemplo.</p>
+
+<pre class="brush: cpp">TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("A client connected.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}</pre>
+
+<h2 id="Handshaking">Handshaking</h2>
+
+<p>Quando um cliente se conecta a um servidor, ele envia uma solicitação GET para atualizar a conexão com o WebSocket a partir de uma simples requisição HTTP. Isto é conhecido como handshaking (aperto de mão).</p>
+
+<div class="warning">
+<p>Este código tem um defeito. Digamos que a propriedade client.<code>Available</code> retorna o valor 2 porque somente a requisição GET está disponível até agora. a expressão regular iria falhar mesmo que os dados recebidos sejam perfeitamente válidos.</p>
+</div>
+
+<pre class="brush: cpp">using System.Text;
+using System.Text.RegularExpressions;
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (new Regex("^GET").IsMatch(data)) {
+
+} else {
+
+}</pre>
+
+<p>Criar a resposta é mais fácil do que entender porque você deve fazê-lo desta forma.</p>
+
+<p>Você deve,</p>
+
+<ol>
+ <li>Obter o valor do cabeçalho da requisição <em>Sec-WebSocket-Key</em> sem qualquer espaço à direita e à esquerda;</li>
+ <li>Concatenar com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";</li>
+ <li>Calcular o código SHA-1 e Base64 dele;</li>
+ <li>Reescreva no cabeçalho de resposta o valor de <em>Sec-WebSocket-Accept</em> como parte de uma resposta HTTP.</li>
+</ol>
+
+<pre class="brush: cpp">if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+</pre>
+
+<h2 id="Decodificação_de_mensagens">Decodificação de mensagens</h2>
+
+<p>Após um <em>handshake</em> de sucesso o cliente ponde enviar mensagens ao servidor, mas agora estas mensagens são codificadas.</p>
+
+<p>Se nós enviarmos "MDN", nós obtemos estes bytes:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>129</td>
+   <td>131</td>
+   <td>61</td>
+   <td>84</td>
+   <td>35</td>
+   <td>6</td>
+   <td>112</td>
+   <td>16</td>
+   <td>109</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>- 129:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">FIN (Esta é toda a mensagem?)</th>
+   <th scope="col">RSV1</th>
+   <th scope="col">RSV2</th>
+   <th scope="col">RSV3</th>
+   <th scope="col">Opcode</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0x1=0001</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>FIN: Você pode enviar sua mensagem em quadros (frames), mas agora as coisas ficaram mais simples.<br>
+ <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> significa que este é um texto. Veja aqui a </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">lista completa de Opcodes</a>.</p>
+
+<p>- 131:</p>
+
+<p>Se o segundo byte menos 128 estiver entre 0 e 125, este é o tamanho da mensagem. Se for 126, os 2 bytes seguintes (16-bit inteiro sem sinal) e se 127, os 8 bytes seguintes (64-bit inteiro sem sinal) são o comprimento.</p>
+
+<div class="note">
+<p>Eu posso escolher 128, porque o primeiro bit sempre será 1.</p>
+</div>
+
+<p>- 61, 84, 35 e 6 são os bytes de chave para decodificar. Sempre mudam.</p>
+
+<p>- O restante dos bytes codificados são a mensagem<span style="line-height: 1.572;">.</span></p>
+
+<h3 id="Algoritmo_de_decodificação">Algoritmo de decodificação</h3>
+
+<p>byte decodificado = [byte codificado XOR (posição do byte codificado MOD 4º byte da chave)]</p>
+
+<p>Exemplo em C#:</p>
+
+<pre class="brush: cpp">Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i &lt; encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}</pre>
+
+<h2 id="Link_Relacionado">Link Relacionado</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers">Writing WebSocket servers</a></li>
+</ul>
+
+<div id="cke_pastebin" style="position: absolute; top: 2209.23px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html
new file mode 100644
index 0000000000..e493605538
--- /dev/null
+++ b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html
@@ -0,0 +1,263 @@
+---
+title: Escrevendo um servidor WebSocket
+slug: WebSockets/Writing_WebSocket_servers
+tags:
+  - Guía
+  - HTML5
+  - Tutorial
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
+---
+<p><span class="seoSummary">Um servidor de WebSocket  é uma aplicação TCP que escuta uma porta de um servidor que segue um protocolo específico, simples assim. A tarefa de criar um servidor personalizado costuma assustar as pessoas; no entanto, pode ser fácil implementar um simples servidor WebSocket na sua plataforma de escolha. </span></p>
+
+<p>Um servidor WebSocket pode ser escrito em qualquer linguagem de programação server-side  que é capaz de utilizar <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>,  tais como C(++) , ou Python, ou mesmo o <a href="/en-US/docs/PHP">PHP</a> e o <a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript">server-side JavaScript</a>. Esse não é um tutorial em uma linguagem de programação específica, mas serve como guia para facilitar a escrita do seu próprio servidor.</p>
+
+<p>Você precisará saber como o HTTP funciona e ter uma experiência média com programação.</p>
+
+<p>Dependendo do suporte da linguagem, pode ser necessário o conhecimento sobre soquetes TCP. O escopo deste guia é apresentar o conhecimento mínimo que você precisa para escrever um servidor WebSocket.</p>
+
+<div class="note">
+<p>Leia a útlima especificação sobre WebSockets, a <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. As seções 1 e 4-7 são especialmente interessantes para implementadores de servidores. A seção 10 discute assuntos sobre segurança que você definitivamente deveria examinar antes de expor seu servidor.</p>
+</div>
+
+<p>Um servidor de WebSocket é explicado de maneira bem simples aqui. Servidores de WebSocket geralmente são servidores separados e especializados (para balanceamento de carga ou outras razões práticas), então, geralmente você irá usar um proxy reverso (como um servidor HTTP comum) para detectar a solicitação de handshakes do WebSocket, pré-processá-los e enviar esses clientes para um servidor WebSocket real. Isso significa que você não precisa encher seu código com cookies e manipuladores de autenticação (por exemplo).</p>
+
+<p><a name="Handshake">O <em>Handshake</em> ("aperto de mão") do WebSocket</a></p>
+
+<p>Primeiro de tudo, o servidor deve ouvir as conexões socket recebidas usando um socket TCP padrão. Dependendo da sua plataforma, isso pode já ter sido tratado previamente. Por exemplo, vamos assumir que seu servidor está ouvindo example.com, porta 8000, e seu servidor socket responde às requisições  GET em <code>/chat</code>.</p>
+
+<div class="warning">
+<p><strong>Aviso:</strong> O servidor pode ouvir qualquer porta que escolher, mas se escolher qualquer porta diferente de 80 e 443, podem ocorrer problemas relacionados aos firewalls e/ou proxies. Conexões na porta 443 tendem a ter mais sucesso com mais frequência, isso requer uma conexão segura (TLS/SSL). Também, note que a maioria dos browsers (notavelmente o  Firefox 8+) não permite conexões de servidores WebSocket de páginas seguras.</p>
+</div>
+
+<p>O handshake é a "Web" no WebSockets. É a ponte do HTTP para o Websocket. No handshake, detalhes da conexão são negociados, e qualquer uma das partes pode voltar antes da conclusão se os termos são desfavoráveis. O servidor deve ser cuidadoso para entender tudo que o cliente perguntar,  caso contrário, serão introduzidas questões de segurança.</p>
+
+<h3 id="Requisição_Handshake_do_Cliente">Requisição Handshake do Cliente</h3>
+
+<p>Mesmo que você esteja construindo um servidor, um cliente ainda precisa iniciar o processo de handshake do WebSocket. Então você deve saber como interpretar a requisição do cliente. O cliente vai enviar uma requisição HTTP padrão que é parecida com isso (a versão do HTTP <strong>deve</strong> ser 1.1 ou maior, e o método <strong>deve</strong> ser um <code>GET</code>):</p>
+
+<pre>GET /chat HTTP/1.1
+Host: example.com:8000
+<strong>Upgrade: websocket</strong>
+<strong>Connection: Upgrade</strong>
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+</pre>
+
+<p>O cliente pode solicitar extensões e/ou subprotocolos aqui; veja <a href="#Miscellaneous">Miscellaneous</a> para mais detalhes. Também, cabeçalhos comuns como <code>User-Agent</code>, <code>Referer</code>, <code>Cookie</code>, ou cabeçalhos de autenticação poderiam estar bem aqui. Faça o que você quiser com eles; eles não pertencem diretamente ao WebSocket. Também é seguro ignora-los. Em muitas configurações comuns, um proxy reverso ja tratou deles.</p>
+
+<p>Se qualquer cabeçalho não foi entendido ou conter um valor incorreto, o servidor deve enviar um erro "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" e fechar o socket imediatamente. É comum, também dar a razão pelo qual o handshake falhou no body da resposta do HTTP, mas muitas mensages nunca serão mostradas (os browsers não mostram isso). Se o servidor não reconhecer a versão do WebSockets, deve enviar um cabeçalho <code>Sec-WebSocket-Version</code> que contenha a(s) versão(versões) que o mesmo entenda. (Esse guia explica o v13, o mais novo). Agora, vamos continuar para o cabeçalho mais curioso, o <code>Sec-WebSocket-Key</code>.</p>
+
+<div class="note">
+<p><strong>Dica:</strong> Todos os browsers  vão enviar um <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Origin</code> header</a>. Você pode usar esse cabeçalho por segurança (verifique pelo de mesma origem, whitelisting/ blacklisting, etc.) e envie uma <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> se você não gostou do que viu. Sobretanto, fique ciente que os agentes non-browser podem apenas enviar uma falsa <code>Origin</code>. Muitas aplicações vão rejeitar requisições sem cabeçalho.</p>
+</div>
+
+<div class="note">
+<p><strong>Dica:</strong> A request-uri (<code>/chat</code> aqui) não tem significado definido na especificação. Muitas pessoas utilizam habilmente para que servidores lidem com muiltíplas aplicações WebSocket. Por exemplo, <code>example.com/chat</code> deve invocar um app de chat com multiplos usuários, enquanto <code>/game</code> no mesmo servidor poderia invocar um jogo multiplayer.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Regular HTTP status codes</a> podem apenas ser usados antes do handshake. Depois que o handshake sucede, você deve usar um conjunto de códigos diferentes (definidos na seção 7.4 da especificação).</p>
+</div>
+
+<h3 id="Resposta_Handshake_do_Servidor">Resposta Handshake do Servidor</h3>
+
+<p>Quanto o servidor receber a requisição de handshake, ele deve enviar um resposta especifica (odd-looking) que indica que o protocolo está sendo alterado de HTTP para WebSocket. Essa resposta se parece com isso (lembre-se cada final do cabeçalho com <code>\r\n</code> e coloque um <code>\r\n</code> extra depois do último):</p>
+
+<pre><strong>HTTP/1.1 101 Switching Protocols</strong>
+Upgrade: websocket
+Connection: Upgrade
+<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+</strong></pre>
+
+<p>Adicionalmente, o servidor pode decidir sobre os pedidos de extensão/subprotocolo aqui; veja <a href="#Miscellaneous">Miscellaneous</a> para mais detalhes. O <code>Sec-WebSocket-Accept</code> é uma parte interessante. O servidor deve deriva-lo do <code>Sec-WebSocket-Key</code> que o cliente enviou. Para obte-lo, concatene <span style="line-height: 1.5em;">o </span><code style="font-size: 14px;">Sec-WebSocket-Key</code><span style="line-height: 1.5em;"> do cliente e a string "</span><code style="font-size: 14px;">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code><span style="line-height: 1.5em;">" juntos (isso é uma "</span><a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a><span style="line-height: 1.5em;">"), pegue o </span><a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1 hash</a><span style="line-height: 1.5em;"> do resultado, e retorne o</span><span style="line-height: 1.5em;"> codigo </span><a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a><span style="line-height: 1.5em;"> do hash.</span></p>
+
+<div class="note">
+<p><strong>FYI:</strong> Esse processo, aparentemente complicado existe para que seja óbvio para o cliente se o servidor suporta ou não o WebSockets. Isso é importante por causa de problemas com segurança que aparecem se o servidor aceita a conexão WebSocket mas interpreta que os dados são uma requisição HTTP.</p>
+</div>
+
+<p>Então se a chave foi "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", o cabeçalho <code>Sec-WebSocket-Accept</code> aceito será "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Uma vez que o servidor envie estes cabeçalhos, o handshake esta completo e você pode começar a trocar dados!</p>
+
+<div class="note">
+<p>O servidor pode enviar outros cabeçalhos como Set-Cookie, ou perguntar por autenticação ou redirecionar via outros códigos de status, antes enviando  a resposta do handshake.</p>
+</div>
+
+<h3 id="Acompanhamento_dos_clientes">Acompanhamento dos clientes</h3>
+
+<p>Isso não está diretamente relacionado ao protocolo de WebSocket, mas vale apena mencionar aqui: seu servidor terá que acompanhar os soquetes dos clientes para que você não tenho que fazer o handshake novamente com clientes que já concluiram o handshake. O mesmo endereço IP do cliente pode tentar se conectar varias vezes (mas o servidor pode negar se tentarem fazer muitas conexões em razão de se defender de <a href="https://pt.wikipedia.org/wiki/Ataque_de_negação_de_serviço">ataques de negação de serviço</a>).</p>
+
+<h2 id="Trocando_Data_Frames">Trocando Data Frames</h2>
+
+<p>Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento — essa é a mágia do WebSocket. Entretanto, extrair informações desses chamados "frames" de dados não é um experiencia tão magica assim. Apesar de todos os <em>frames </em>seguirem um mesmo formato, os dados do cliente são enviados criptografados para o servidor, usando <a href="https://en.wikipedia.org/wiki/XOR_cipher">criptografia XOR</a> (com uma chave de 32 bits). A <a href="http://tools.ietf.org/html/rfc6455#section-5">seção 5 da especificação</a> do <a href="https://datatracker.ietf.org/doc/rfc6455/">protocolo de WebSocket</a> descreve isso em detalhes.</p>
+
+<h3 id="Formato">Formato</h3>
+
+<p>Cada <em>data frame</em> (do cliente para o servidor ou vice-versa) segue o mesmo formato:</p>
+
+<pre>Frame format:
+​​
+      0                   1                   2                   3
+      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+     +-+-+-+-+-------+-+-------------+-------------------------------+
+     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
+     | |1|2|3|       |K|             |                               |
+     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+     |     Extended payload length continued, if payload len == 127  |
+     + - - - - - - - - - - - - - - - +-------------------------------+
+     |                               |Masking-key, if MASK set to 1  |
+     +-------------------------------+-------------------------------+
+     | Masking-key (continued)       |          Payload Data         |
+     +-------------------------------- - - - - - - - - - - - - - - - +
+     :                     Payload Data continued ...                :
+     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+     |                     Payload Data continued ...                |
+     +---------------------------------------------------------------+</pre>
+
+<p>O bit de MASK simplesmente diz se a mensagem está codificada. Mensagens do cliente devem estar mascaradas, então seu servidor deve esperar que o valor de MASK seja 1. De fato, a <a href="http://tools.ietf.org/html/rfc6455#section-5.1">seção 5.1 da especificação</a> diz que seu servidor deve se desconectar de um cliente se este cliente enviar mensagens que não estão mascaradas. Quando enviando um <em>frame</em> para o cliente, não mascare a mensagem e não defina o bit MASK. Explicaremos o mascaramento mais tarde.</p>
+
+<div class="blockIndicator note">
+<p>Você tem que mascarar as mensagens mesmo quando usando secure socket (SSL).<br>
+ Os campos RSV de 1 à 3 do cabeçalho podem ser ignorados, eles são para extenções.</p>
+</div>
+
+<p>O campo <code>opcode</code> define como interpretar o <code>payload data</code>: <kbd>0x0</kbd> para continuo, <kbd>0x1</kbd> para texto (que sempre está codificadao em UTF-8), <kbd>0x2</kbd> para binário, e outros conhecidos como "control codes" seram discutidos posteriormente. Nessa versão de WebSockets, <kbd>0x3</kbd>, a <kbd>0x7</kbd> e <kbd>0xB</kbd> a <kbd>0xF</kbd> tem o mesmo significado.</p>
+
+<p>O bit FIN disso se é a ultima mensagem da serie. Se for <kbd>0</kbd>, então o servidor irá continuar esperando por mair partes da mensagem;  caso contrário, o servidor pode considerar a mensagem como enviada.</p>
+
+<p>Se falará mais sobre isso depois.</p>
+
+<h3 id="Decodificando_o_Payload_Length">Decodificando o Payload Length</h3>
+
+<p>Para ler o <code>payload data</code>, você deve saber quando parar de ler. Por isso é importante saber o tamanho do payload (payload length). Infelizmente,  conseguir essa informação é de certa forma complicado. Para obte-lá, seguimos esses passos:</p>
+
+<ol>
+ <li>Ler os bits 9-15 (inclusivo) e interpretar como um unsigned integer. Se o valor for de 125 ou menor, esse é o tamanho; temos a resposta. Se o valor é igual a 126, então vai para o passo 2, ou se for 127, então vai para o passo 3.</li>
+ <li>Ler os próximos 16 bits e interpretar como um unsined integer, esse é o tamanho; temos a resposta</li>
+ <li>Ler os próximos 64 bits e interpretar como um unsigned integer (o bit mais significante DEVE ser 0), esse é o tamanho; temos a resposta.</li>
+</ol>
+
+<h3 id="Lendo_e_Desmascarando_o_Dado">Lendo e Desmascarando o Dado</h3>
+
+<p>Se o bit <code>MASK</code> for definido (e deve estar, para mensagens cliente-para-servidor), leia os próximos 4 octetos (32 bits); isso é a chave da mascara. Uma vez que o <code>payload length</code> e o <code>masking key</code> são decodificados, você pode seguir em frente e ler o número de bytes do socket.</p>
+
+<p>Vamos chamar os dados de <strong>ENCODED</strong>, e a chave de <strong>MASK</strong>.</p>
+
+<p>Para conseguir o <strong>DECODED</strong>, faça um loop sobre os octetos de <strong>ENCODED</strong> e um XOR do (i módulo 4) ezimo octeto de <strong>MASK</strong>. Em pseudo-código (isso é para ser valida em JavaScript):</p>
+
+<pre>var DECODED = "";
+for (var i = 0; i &lt; ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+<span style="line-height: 1.5;">}</span></pre>
+
+<p>Agora você pode descobrir o que DECODED significa, dependendo da sua aplicação.</p>
+
+<h3 id="Fragmentação_de_Mensagens">Fragmentação de Mensagens</h3>
+
+<p>Os campos <code>FIN</code> e <code>opcode</code> trabalham juntos para enviar uma mensagens quebradas em mais de um <em>frame</em>. Isso é chamado de fragmentação. Fragmentação está disponível apenas sobre <code>opcode</code> <kbd>0x0</kbd> a <kbd>0x2</kbd>.</p>
+
+<p>Lembre que o <code>opcode</code> diz o que o <em>frame</em> deve fazer. Se for <kbd>0x1</kbd>, o payload um é texto. Se for <kbd>0x2</kbd>, o payload são dados binários. Entretanto, se for <kbd>0x0</kbd>, o <em>frame</em> é um<em>frame de continuação</em>. Isso significa que o servidor deve concatenar o <em>frame</em> de payload com o último frame recebido do cliente.</p>
+
+<p>Aqui está um exemplo, de como o servidor reage a um cliente enviando uma mensagem de texto. A primeira mensagem é enviada em um frame unico, enquanto a segunda mensagem é enviada através de tres frames. Os detalhes de <code>FIN</code> e <code>opcode</code> são mostrados apenas para o cliente:</p>
+
+<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
+<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
+<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
+<strong>Server:</strong> <em>(listening, new message containing text started)</em>
+<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
+<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
+<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
+<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+
+<p>Note que o primeiro <em>frame</em> que contém a mensagem inteira tem o <code>FIN igual a 1</code> e o <code>opcode igual a 0x1</code>, entao o servidor pode processar ou responder como achar melhor.<br>
+ O segundo frame enviado pelo cliente é uma mensagem de texto com payload <code>opcode igual a 0x1</code>, mas a mensagem inteira ainda não chegou (<code>FIN=0</code>). Todos as partes restantes da mensagem são enviados em frames continuos (<code>opcode=0x0</code>), e o frame final da mensagem é marcado com <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Seção 5.4 da especificação</a> descreve a fragmentação de mensagens.</p>
+
+<h2 id="Pings_e_Pongs_O_Heartbeat_do_WebSockets">Pings e Pongs: O Heartbeat do WebSockets</h2>
+
+<p>Em qualquer momento do handshake, tanto o cliente quanto o servidor podem enviar um ping para a outra parte. Quando o ping é rescebido, o destinatário deve responder com um pong assim que possível. Você pode usar isso para garantir que o cliente está conectado, por exemplo.</p>
+
+<p>Um ping ou um pong é um frame comum, entretanto é usado para controle. Pings tem o valor de opcode <kbd>0x9</kbd>, enquanto que pongs tem o opcode <kbd>0xA</kbd>. Quando você recebe um ping, envia de volta um pong com o mesmo exato <code>payload data</code> do ping (para pings e pongs, o <code>payload length</code> máximo é 125). Você também pode ter um pong sem nunca receber um ping; ignore isso caso ocorra.</p>
+
+<div class="blockIndicator note">
+<p>Se você receber mais de um ping antes de ter a chance de enviar um pong, você envia apenas um pong.</p>
+</div>
+
+<h2 id="Fechando_a_conexão">Fechando a conexão</h2>
+
+<p>Para fechar a conexão tanto cliente quanto servidor podem enviar um frame de controle com dados contendo a sequencia de controles especifica para iniciar o fim do handshake (detalhado na seção 5.5.1). Assim que receber esse tipo de frame, a outra parte envia um frame de fechamento em resposta. A primeira parte então fecha a conexão. Quais quer outros dados recebidos depois de fechar a conexão é descartado. </p>
+
+<h2 id="Diversos"><a name="Miscellaneous">Diversos</a></h2>
+
+<div class="note">
+<p>Códigos WebSocket, extensões, subprotocols, etc. são registrados na <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
+</div>
+
+<p>As extensões e subprotocolos do WebSocket são negociados via headers durante the handshake. Algumas vezes extensões e subprotocolos paracem muito similares para serem coisas diferentes, mas eles tem claras distinções. Extensões controlam os <strong>frame</strong> do WebSocket e <strong>modificam</strong> o payload, enquanto os subprotocolos estruturam o <strong>payload</strong> do WebSocket e <strong>nunca modificam</strong> nada. Extensões são opcionais e generalizadas (como comporessam); subprotocolos são mandatórios e localizados (como os usados para chat e para jogos MMORPG).</p>
+
+<h3 id="Extensões">Extensões</h3>
+
+<div class="note">
+<p><strong>Essa sessão precisa ser mais desenvolvida. Por favor edite se você tiver conhecimento sobre.</strong></p>
+</div>
+
+<p>Imagine um extensão que comprime um arquivo antes de ser enviado em um e-mail para alguem. Independente do que você faça, está enviando o <em>mesmo</em> dado de formas diferentes. O destinatário eventualmente terá os mesmos dados que a cópia local que você tem, mas foram enviadas de formas diferentes. Isso é o que extensões fazem. WebSockets definem um protocolo e um forma simples de envio de dados, mas uma extensão como um compressor pode enviar o mesmo dado em um formado menor.</p>
+
+<div class="note">
+<p>Extensões são explicadas nas sessões 5.8, 9, 11.3.2 e 11.4 da especificação.</p>
+</div>
+
+<h3 id="Subprotocols">Subprotocols</h3>
+
+<p>Pense em um subprotocolo como um <a href="https://pt.wikipedia.org/wiki/XML">esquema XML</a> personalizado ou <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. Você ainda está usando XML e sua sintaxe, mas também é restringido por uma estrutura em que concordou. Os subprotocolo WebSocket são exatamente assim. Eles não apresentam nada sofisticado, apenas estabelecem estrutura. Como um doctype ou esquema, ambas as partes devem concordar com o subprotocolo; diferente de um doctype ou esquema, o subprotocolo é implementado no servidor e não pode ser referenciado externamente pelo cliente.</p>
+
+<div class="note">
+<p>Subprotocolos são explicados nas sessões 1.9, 4.2, 11.3.4 e 11.5 da especificação.</p>
+</div>
+
+<p>Um cliente precisa solicitar um subprotocolo específico. Para fazer isso, ele enviará algo como isso <strong>como parte do handshake original</strong>:</p>
+
+<pre>GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+</pre>
+
+<p>ou, equivalentemente:</p>
+
+<pre>...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+</pre>
+
+<p>Agora, o servidor deve escolher um dos protocolos que o cliente sugeriu e suporta. Se houver mais de um, envie o primeiro que o cliente enviou. Imagine que nosso servidor possa usar <code>soap</code> e <code>wamp</code>. Em seguida, no handshake de resposta, ele enviará:</p>
+
+<pre>Sec-WebSocket-Protocol: soap
+
+</pre>
+
+<div class="warning">
+<p>O servidor não pode enviar mais de um cabeçalho <code>Sec-Websocket-Protocol</code>.<br>
+ Se o servidor não quiser usar nenhum subprotocolo, <strong>ele não deverá enviar nenhum cabeçalho <code>Sec-WebSocket-Protocol</code></strong>. O envio de um cabeçalho em branco está incorreto.<br>
+ O cliente pode fechar a conexão se não conseguir o subprotocolo desejado.</p>
+</div>
+
+<p>Se você deseja que seu servidor obedeça a certos subprotocolo, então naturalmente precisará de código extra no servidor. Vamos imaginar que estamos usando um subprotocolo <code>json</code>. Neste subprotocolo, todos os dados são transmitidos como JSON. Se o cliente solicitar esse protocolo e o servidor quiser usá-lo, o servidor precisará ter um analisador JSON. Na prática, isso fará parte de uma biblioteca, mas o servidor precisará transmitir os dados.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Para evitar o conflito de nomes, recomenda-se que o subprotocolo seja nomeado como parte da string do domínio. Se você está desenvolvendo um aplicativo de bate-papo personalizado que usa um formato proprietário exclusivo da Exemplo Inc., então você pode usar isso: <code>Sec-WebSocket-Protocol: chat.example.com</code>. Note que isso não é necessário, é apenas uma convenção opcional, e você pode usar qualquer string que desejar.</p>
+</div>
+
+<h2 id="Relacionado">Relacionado</h2>
+
+<ul>
+ <li><a href="https://github.com/alexhultman/libwshandshake">Biblioteca para o "<em>aperto de mão"</em> do WebSocket em C++</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Servidor Websocket em C#</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Escrevendo aplicações WebSocket do cliente</a></li>
+ <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Servidor Websocket em VB.NET</a></li>
+ <li><a href="https://datatracker.ietf.org/doc/rfc6455/">Especificação do protocolo (RFC 6455)</a></li>
+</ul>
diff --git a/files/pt-br/web/events/beforeunload/index.html b/files/pt-br/web/api/window/beforeunload_event/index.html
index 6d6034318c..6d6034318c 100644
--- a/files/pt-br/web/events/beforeunload/index.html
+++ b/files/pt-br/web/api/window/beforeunload_event/index.html
diff --git a/files/pt-br/web/events/domcontentloaded/index.html b/files/pt-br/web/api/window/domcontentloaded_event/index.html
index eb54671921..eb54671921 100644
--- a/files/pt-br/web/events/domcontentloaded/index.html
+++ b/files/pt-br/web/api/window/domcontentloaded_event/index.html
diff --git a/files/pt-br/web/events/load/index.html b/files/pt-br/web/api/window/load_event/index.html
index db04b1ecbe..db04b1ecbe 100644
--- a/files/pt-br/web/events/load/index.html
+++ b/files/pt-br/web/api/window/load_event/index.html
diff --git a/files/pt-br/web/api/window/window.localstorage/index.html b/files/pt-br/web/api/window/localstorage/index.html
index 8c7c379435..8c7c379435 100644
--- a/files/pt-br/web/api/window/window.localstorage/index.html
+++ b/files/pt-br/web/api/window/localstorage/index.html
diff --git a/files/pt-br/web/api/window/onscroll/index.html b/files/pt-br/web/api/window/onscroll/index.html
deleted file mode 100644
index e5e756482a..0000000000
--- a/files/pt-br/web/api/window/onscroll/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: window.onscroll
-slug: Web/API/Window/onscroll
-translation_of: Web/API/GlobalEventHandlers/onscroll
-translation_of_original: Web/API/Window/onscroll
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Summary" name="Summary">Sumário</h3>
-<p>Especifica a função a ser chamada quando é feito o scroll na janela.</p>
-<h3 id="Syntax" name="Syntax">Sintaxe</h3>
-<pre class="eval">window.onscroll = <em>funcRef</em>;
-</pre>
-<ul>
- <li><code>funcRef</code> é uma função de referência.</li>
-</ul>
-<h3 id="Example" name="Example">Exemplos</h3>
-<h4 id="Exemplo_1_Genérico">Exemplo 1: Genérico</h4>
-<pre class="brush: js">window.onscroll = function (oEvent) {
-  // executa um bloco de código ou funções, quando o scroll é feito na janela.
-}
-</pre>
-<h4 id="Examplo_2_Dectando_a_rolagem">Examplo 2: Dectando a rolagem</h4>
-<p>O exemplo a seguir, irá disparar um <code><a href="/pt-BR/docs/DOM/window.alert" title="/pt-BR/docs/DOM/window.alert">alerta</a></code> sempre que o usuário rolar a página .</p>
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;title&gt;onscroll test&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
-window.onscroll = scroll;
-
-function scroll () {
- alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset);
- // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão.
-}
-&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;p&gt;Redimensione a janela&lt;/p&gt;
-&lt;p&gt;para um tamanho pequeno,&lt;/p&gt;
-&lt;p&gt;e use a barra de rolagem&lt;/p&gt;
-&lt;p&gt;para mover ao redor do conteúdo da página&lt;/p&gt;
-&lt;p&gt;na janela.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<h4 id="Examplo_3_Mostra_um_link_no_topo_da_página_depois_da_rolagem.">Examplo 3: Mostra um link no topo da página depois da rolagem.</h4>
-<p>O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels</p>
-<p> </p>
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;title&gt;MDN Example&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
-var bAppended = false, oBookmark = document.createElement("div");
-oBookmark.id = "arrowUp";
-oBookmark.innerHTML = "&lt;a href=\"#\" title=\"Top of the page.\"&gt;&amp;uarr;&lt;\/a&gt;";
-
-onscroll = function() {
-  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
-  bAppended = nVScroll &gt; 500 ?
-    bAppended || (document.body.appendChild(oBookmark), true)
-    : bAppended &amp;&amp; (document.body.removeChild(oBookmark), false);
-};
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-#arrowUp {
-  position: fixed;
-  height: auto;
-  width: auto;
-  right: 10px;
-  top: 10px;
-  font-size: 48px;
-}
-#arrowUp a {
-  text-decoration: none;
-  color: black;
-  font-weight: bold;
-  font-family: serif;
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;p&gt;Conteúdo da página aqui!&lt;/p&gt;
-&lt;/body&gt;
-
-&lt;/html&gt;</pre>
-<h3 id="Notes" name="Notes">Notas</h3>
-<p>{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.<br>
- Esse bug foi corrigido no Gecko 1.8/Firefox 1.5</p>
-<p>Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.</p>
-<h3 id="Specification" name="Specification">Especificação</h3>
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li>
-</ul>
-<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}</p>
diff --git a/files/pt-br/web/api/window/url/index.html b/files/pt-br/web/api/window/url/index.html
deleted file mode 100644
index 1dec25bd24..0000000000
--- a/files/pt-br/web/api/window/url/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Window.URL
-slug: Web/API/Window/URL
-translation_of: Web/API/URL
-translation_of_original: Web/API/Window/URL
----
-<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p>
-
-<p>A propriedade <strong><code>Window.URL</code></strong> retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<p>Chamando um método estático:</p>
-
-<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre>
-
-<p>Construindo um novo objeto:</p>
-
-<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre>
-
-<h2 id="Especificação">Especificação</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url', 'URL')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>8.0<sup>[2]</sup></td>
-   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br>
-    {{CompatGeckoDesktop("19.0")}}</td>
-   <td>10.0</td>
-   <td>15.0<sup>[2]</sup></td>
-   <td>6.0<sup>[2]</sup><br>
-    7.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
-   <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br>
-    {{CompatGeckoMobile("19.0")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>15.0<sup>[2]</sup></td>
-   <td>6.0<sup>[2]</sup></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno <code>nsIDOMMozURLProperty</code> não padrão. Na prática, isso não fez diferença.</p>
-
-<p>[2] Implementado sob o nome não padronizado <code>webkitURL</code>.</p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{domxref("URL")}} API.</li>
-</ul>
diff --git a/files/pt-br/web/api/windowbase64/index.html b/files/pt-br/web/api/windowbase64/index.html
deleted file mode 100644
index f51b72c102..0000000000
--- a/files/pt-br/web/api/windowbase64/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: WindowBase64
-slug: Web/API/WindowBase64
-tags:
-  - API
-  - HTML-DOM
-  - Helper
-  - NeedsTranslation
-  - TopicStub
-  - WindowBase64
-translation_of: Web/API/WindowOrWorkerGlobalScope
-translation_of_original: Web/API/WindowBase64
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p>
-
-<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
-
-<h2 id="Properties">Properties</h2>
-
-<p><em>This helper neither defines nor inherits any properties.</em></p>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em>This helper does not inherit any methods.</em></p>
-
-<dl>
- <dt>{{domxref("WindowBase64.atob()")}}</dt>
- <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
- <dt>{{domxref("WindowBase64.btoa()")}}</dt>
- <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Firefox (Gecko)</th>
-   <th>Chrome</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatGeckoDesktop(1)}} [1]</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Android</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatGeckoMobile(1)}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
-</ul>
diff --git a/files/pt-br/web/api/windowbase64/atob/index.html b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html
index cb9058abe5..cb9058abe5 100644
--- a/files/pt-br/web/api/windowbase64/atob/index.html
+++ b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html
diff --git a/files/pt-br/web/api/windowtimers/cleartimeout/index.html b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html
index f03f43979f..f03f43979f 100644
--- a/files/pt-br/web/api/windowtimers/cleartimeout/index.html
+++ b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html
diff --git a/files/pt-br/web/api/windowtimers/index.html b/files/pt-br/web/api/windowtimers/index.html
deleted file mode 100644
index 8be6ca7e8b..0000000000
--- a/files/pt-br/web/api/windowtimers/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: WindowTimers
-slug: Web/API/WindowTimers
-translation_of: Web/API/WindowOrWorkerGlobalScope
-translation_of_original: Web/API/WindowTimers
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p>
-
-<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
-
-<h2 id="Properties">Properties</h2>
-
-<p><em>This interface do not define any property, nor inherit any.</em></p>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em>This interface do not inherit any method.</em></p>
-
-<dl>
- <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
- <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
- <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
- <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
- <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
- <dd>Schedules the execution of a function each X milliseconds.</dd>
- <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
- <dd>Sets a delay for executing a function.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Firefox (Gecko)</th>
-   <th>Chrome</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatGeckoDesktop(1)}}</td>
-   <td>1.0</td>
-   <td>4.0</td>
-   <td>4.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Android</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatGeckoMobile(1)}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-   <td rowspan="1">{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p> </p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
-</ul>
diff --git a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
index 81b8fb8d3e..81b8fb8d3e 100644
--- a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html
+++ b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
diff --git a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html
index b541e64bc1..b541e64bc1 100644
--- a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html
+++ b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html
diff --git a/files/pt-br/web/css/-moz-cell/index.html b/files/pt-br/web/css/-moz-cell/index.html
deleted file mode 100644
index 6e5b44d286..0000000000
--- a/files/pt-br/web/css/-moz-cell/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: '-moz-cell'
-slug: Web/CSS/-moz-cell
-translation_of: Web/CSS/cursor
-translation_of_original: Web/CSS/-moz-cell
----
-<div>{{CSSRef}} {{deprecated_header}}</div>
-
-<p><em>Não use esse valor! </em>Use o valor <code>cursor</code> {{cssxref("cursor#cell","cell")}} em seu lugar.</p>
diff --git a/files/pt-br/web/css/valor_atual/index.html b/files/pt-br/web/css/actual_value/index.html
index b7f9307a58..b7f9307a58 100644
--- a/files/pt-br/web/css/valor_atual/index.html
+++ b/files/pt-br/web/css/actual_value/index.html
diff --git a/files/pt-br/web/css/seletor_de_atributos/index.html b/files/pt-br/web/css/attribute_selectors/index.html
index 88881a61ea..88881a61ea 100644
--- a/files/pt-br/web/css/seletor_de_atributos/index.html
+++ b/files/pt-br/web/css/attribute_selectors/index.html
diff --git a/files/pt-br/web/css/-moz-box-ordinal-group/index.html b/files/pt-br/web/css/box-ordinal-group/index.html
index 3c3963b7e6..3c3963b7e6 100644
--- a/files/pt-br/web/css/-moz-box-ordinal-group/index.html
+++ b/files/pt-br/web/css/box-ordinal-group/index.html
diff --git a/files/pt-br/web/css/comentário/index.html b/files/pt-br/web/css/comments/index.html
index dabb46a04f..dabb46a04f 100644
--- a/files/pt-br/web/css/comentário/index.html
+++ b/files/pt-br/web/css/comments/index.html
diff --git a/files/pt-br/web/css/valor_computado/index.html b/files/pt-br/web/css/computed_value/index.html
index a4932b8d40..a4932b8d40 100644
--- a/files/pt-br/web/css/valor_computado/index.html
+++ b/files/pt-br/web/css/computed_value/index.html
diff --git a/files/pt-br/web/css/css_animations/usando_animações_css/index.html b/files/pt-br/web/css/css_animations/using_css_animations/index.html
index 4bdd91ad9f..4bdd91ad9f 100644
--- a/files/pt-br/web/css/css_animations/usando_animações_css/index.html
+++ b/files/pt-br/web/css/css_animations/using_css_animations/index.html
diff --git a/files/pt-br/web/css/tools/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html
index d350bce6b5..d350bce6b5 100644
--- a/files/pt-br/web/css/tools/border-image_generator/index.html
+++ b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html
diff --git a/files/pt-br/web/css/tools/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html
index a7db08eb69..a7db08eb69 100644
--- a/files/pt-br/web/css/tools/border-radius_generator/index.html
+++ b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html
diff --git a/files/pt-br/web/css/css_background_and_borders/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/index.html
index 59c2117194..59c2117194 100644
--- a/files/pt-br/web/css/css_background_and_borders/index.html
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/index.html
diff --git a/files/pt-br/web/guide/css/scaling_background_images/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
index d7c3ccfa3f..d7c3ccfa3f 100644
--- a/files/pt-br/web/guide/css/scaling_background_images/index.html
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
diff --git a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
index d0e4fa11f7..d0e4fa11f7 100644
--- a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
diff --git a/files/pt-br/web/css/box_model/index.html b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html
index 8c0db35cf6..8c0db35cf6 100644
--- a/files/pt-br/web/css/box_model/index.html
+++ b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html
diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
index cb658d4131..cb658d4131 100644
--- a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html
+++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
diff --git a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html b/files/pt-br/web/css/css_colors/color_picker_tool/index.html
index a98aaf9342..a98aaf9342 100644
--- a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html
+++ b/files/pt-br/web/css/css_colors/color_picker_tool/index.html
diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
index 05318caa79..05318caa79 100644
--- a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html
+++ b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
diff --git a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html
index e14ba15c2d..e14ba15c2d 100644
--- a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html
+++ b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html
diff --git a/files/pt-br/web/guide/css/understanding_z_index/index.html b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html
index 488ca0f600..488ca0f600 100644
--- a/files/pt-br/web/guide/css/understanding_z_index/index.html
+++ b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html
diff --git a/files/pt-br/web/css/seletores_css/index.html b/files/pt-br/web/css/css_selectors/index.html
index 644d9d87e9..644d9d87e9 100644
--- a/files/pt-br/web/css/seletores_css/index.html
+++ b/files/pt-br/web/css/css_selectors/index.html
diff --git a/files/pt-br/web/css/css_tipos/index.html b/files/pt-br/web/css/css_types/index.html
index 79256061ae..79256061ae 100644
--- a/files/pt-br/web/css/css_tipos/index.html
+++ b/files/pt-br/web/css/css_types/index.html
diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html
deleted file mode 100644
index 7880e00f6d..0000000000
--- a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: Cascata e herança
-slug: Web/CSS/Getting_Started/Cascading_and_inheritance
-tags:
-  - Guía
-  - Iniciante
-translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
-translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">Primeiros Passos (Tutorial CSS)</a>; Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.</span></p>
-
-<h2 class="clearLeft" id="Informação_Cascata_e_Herança">Informação: Cascata e Herança</h2>
-
-<p>O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.</p>
-
-<p>Existem três fontes principais de estilos que constituem a cascata. São elas:</p>
-
-<ul>
- <li>Os estilos padrões do navegador;</li>
- <li>Os estilos especificados pelos usarios que estão lendo o documento;</li>
- <li>Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais:
-  <ul>
-   <li>Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos</li>
-   <li>No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.</li>
-   <li>Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.</li>
-  </ul>
- </li>
-</ul>
-
-<p>O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-
-<p>Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.</p>
-
-<p>Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo <code>userContent.css</code> do seu navegador.</p>
-
-<p>Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.</p>
-</div>
-
-<p>Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.</p>
-
-<p>Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).</p>
-
-<p>Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.</p>
-
-<p>Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.</p>
-
-<p>Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.</p>
-
-<p>Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.</p>
-
-<p>Mais detalhes</p>
-
-<div class="tuto_details">
-<p>CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. </p>
-
-<p>Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.</p>
-
-<p>Se você quiser saber todos os detalhes da cascata e herança, consulte  <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na especificação do CSS</p>
-</div>
-
-<h2 id="Ação_Usando_herança">Ação: Usando herança</h2>
-
-<ol>
- <li>Edite o seu arquivo CSS.</li>
- <li>Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element:
-  <pre class="brush:css">p {color: blue; text-decoration: underline;}
-</pre>
- </li>
- <li>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.<br>
-
-  <p>Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.</p>
- </li>
-</ol>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
-</table>
-
-<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
- <caption>Antes</caption>
- <tbody>
-  <tr>
-   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <caption>Depois</caption>
- <tbody>
-  <tr>
-   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type">Desafio</div>
-Mude o seu estilo de modo que somente as letras vermelhas sublinhadas:
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
-
-<pre class="brush: css">p {color: blue; }
-strong {color: red; text-decoration: underline;}
-</pre>
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução do desafio.</a></div>
-
-<h2 id="Qual_o_próximo">Qual o próximo?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, &lt;p&gt; e &lt;strong&gt;, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a>.</p>
diff --git a/files/pt-br/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html
deleted file mode 100644
index 2ead5ccae7..0000000000
--- a/files/pt-br/web/css/getting_started/como_css_funciona/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Como o CSS funciona
-slug: Web/CSS/Getting_Started/Como_CSS_funciona
-tags:
-  - 'CSS:PrimeirosPassos'
-  - Guía
-  - Iniciante
-  - Web
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. </span></p>
-
-<h2 class="clearLeft" id="Informação_Como_o_CSS_funciona">Informação: Como o CSS funciona</h2>
-
-<p>Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:</p>
-
-<ol>
- <li>O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.</li>
- <li>O navegador exibe o conteúdo do DOM.</li>
-</ol>
-
-<p>Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando <em>tags</em>, que são sequências que começam com '&lt;' e terminam com '&gt;'. A maioria dos elementos possui <em>tags </em>emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '&lt;' e '&gt;'. Para a tag final, coloque um '/' depois do '&lt;' e antes do nome do elemento.</p>
-
-<p>Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.</p>
-
-<p>O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.</p>
-
-<p>Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-No seu documento de exemplo, a tag &lt;p&gt;  e seu final &lt;/p&gt; criam um recipiente:
-
-<pre class="brush:html">&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;
-</pre>
-
-<h2 id="Exemplo_em_tempo_real">Exemplo em tempo real</h2>
-
-<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
-
-<p>No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós '<em>strongs</em>' e os nós de texto. Os nós <em>'strong'</em>  são eles próprios pais, com nós de texto como filhos.</p>
-
-<pre><span style="color: black;">P</span>
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">C</span>"
-├─"<span style="color: black;">ascading</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-├─"<span style="color: black;">tyle</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-└─"<span style="color: black;">heets</span>"</pre>
-</div>
-
-<h2 id="Ação_Analisando_um_DOM">Ação: Analisando um DOM</h2>
-
-<h3 id="Utilizando_Inspetor_DOM">Utilizando Inspetor DOM</h3>
-
-<p>Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on <a href="/en/DOM_Inspector" title="en/DOM_Inspector">Inspetor DOM</a> do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).</p>
-
-<ol>
- <li>Use seu navegador Mozilla para abrir seu documento HTML de exemplo.</li>
- <li>Na barra de menu do seu navegador, escolha <strong>Ferramentas  &gt; Inspetor DOM</strong>, ou <strong>Ferramentas &gt; Desenvolvimento Web &gt; Inspetor DOM</strong>.
-  <div class="tuto_details">
-  <div class="tuto_type">Mais detalhes</div>
-
-  <p>Se o seu navegador Mozilla não ter o DOMi, você pode <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalá-lo a partir do site de Add-ons </a> e reiniciar seu navegador.  Depois, retorne para esse tutorial.</p>
-
-  <p>Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.</p>
-  </div>
- </li>
- <li>No DOMi, expanda o nó do seu documento clicando em suas flechas.
-  <p><strong>Nota: </strong> Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.</p>
-
-  <p>Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:</p>
-
-  <pre>│ ▼╴<span style="color: black;">P</span>
-│ │ │ ▼╴<span style="color: black;">STRONG</span>
-│ │ └<span style="color: darkblue;">#text</span>
-│ ├╴<span style="color: darkblue;">#text</span>
-│ ►╴<span style="color: black;">STRONG</span>
-│ │</pre>
-
-  <p>Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.</p>
-
-  <p>Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.</p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Desafio</div>
-
-<p>No DOMi, clique em um nó <em><strong><small>STRONG</small></strong></em>.</p>
-
-<p>Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.</p>
-
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para o desafio.</a></div>
-
-<h3 id="Usando_Raio-X_Goggles_da_Web">Usando Raio-X Goggles da Web</h3>
-
-<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web </a>exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.</p>
-
-<ol>
- <li>Vá para a página inicial do <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web</a>.</li>
- <li>Arraste o link do <em>bookmarklet </em>na página para a barra de ferramentas do seu navegador.</li>
- <li>Abra o seu documento HTML de exemplo.</li>
- <li>Ative o Raio-X Goggles da Web clicando no <em>bookmarklet </em>na sua barra de ferramentas.</li>
- <li>Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.</li>
-</ol>
-
-<h2 id="O_que_vem_depois">O que vem depois?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">próxima página</a> explica mais sobre essas interações.</p>
diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html
deleted file mode 100644
index 389962ab07..0000000000
--- a/files/pt-br/web/css/getting_started/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Iniciando com o CSS
-slug: Web/CSS/Getting_Started
-tags:
-  - CSS
-  - Guia(2)
-  - Guía
-  - Iniciante
-  - Web
-translation_of: Learn/CSS/First_steps
-translation_of_original: Web/Guide/CSS/Getting_started
----
-<p> </p>
-
-<h2 id="Introdução">Introdução</h2>
-
-<p>Esse tutorial é uma introdução ao <em>Cascading Style Sheets</em> (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:</p>
-
-<ul>
- <li>A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.</li>
-</ul>
-
-<ul>
- <li>A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.</li>
-</ul>
-
-<p>Esse tutorial é baseado na <a href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificação do CSS 2.1</a>.</p>
-
-<h3 id="Quem_deve_usar_esse_tutorial">Quem deve usar esse tutorial?</h3>
-
-<p>Esse tutorial é, principalmente, para iniciantes no CSS.</p>
-
-<p>Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.</p>
-
-<p>Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.</p>
-
-<p>Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.</p>
-
-<h3 id="O_que_você_precisa_saber_antes_de_começar">O que você precisa saber antes de começar?</h3>
-
-<p>Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.</p>
-
-<p>Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.</p>
-
-<p>Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, <strong>você pode ignorá-las</strong>. O software referenciado por esse tutorial inclui:</p>
-
-<ul>
- <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
-</ul>
-
-<p><strong>Nota: </strong>O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.</p>
-
-<h3 id="Como_usar_esse_tutorial">Como usar esse tutorial</h3>
-
-<p>Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.</p>
-
-<p>Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.</p>
-
-<p>Para testar seu entendimento, faça o desafio do fim de cada página. <strong>Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.</strong></p>
-
-<p>Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda <em>Mais detalhes</em> (<em>More details</em>). Utilize os links para encontrar informações de referência sobre o CSS.</p>
-
-<h2 id="Parte_I_do_Tutorial">Parte I do Tutorial</h2>
-
-<p>Uma guia básico passo a passo do CSS</p>
-
-<ol>
- <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">O que é o CSS</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Porque usar o CSS</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como o CSS funciona</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascata e herança</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Seletores</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">CSS legível</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Estilos de texto</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Cores</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Conteúdo</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Listas</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Caixas</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tabelas</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Mídia</a></strong></li>
-</ol>
-
-<h2 id="Parte_II_do_Tutorial">Parte II do Tutorial</h2>
-
-<p>Exemplos do uso do CSS juntamente com outras tecnologias</p>
-
-<ol>
- <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Gráficos SVG</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dados XML</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Ligações XBL</a></strong></li>
- <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfaces de usuário XUL</a></strong></li>
-</ol>
-
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html
deleted file mode 100644
index 544deb8960..0000000000
--- a/files/pt-br/web/css/getting_started/javascript/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: JavaScript e CSS
-slug: Web/CSS/Getting_Started/JavaScript
-translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
-translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
----
-<p>{{ CSSTutorialTOC() }}</p>
-<p>Esta é a pirmeira sessão da Parte II do <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">Tutorial de CSS</a>. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.</p>
-<p>Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.</p>
-<p>Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.</p>
-<p>Sessão Anterior (da Parte I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br>
-  Próxima sessão: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
-<h3 id="Information:_JavaScript" name="Information:_JavaScript">Informação: JavaScript</h3>
-<p>JavaScript é um <em>programming language</em>. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.</p>
-<p>JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica</p>
-<p>Há três formas de fazer isso:</p>
-<ul>
-  <li>Trabalhando com lista de documentos de stylesheets—por exemplo: adicionando, removendo ou adicionando uma stylesheet.</li>
-  <li>Trabalhando com as regras em uma stylesheet—por exemplo: adicionando, removendo ou modificando uma regra.</li>
-  <li>Trabalhando com um documento individual na DOM—modificando seu estilo independentemente do stylesheetsdo documento.</li>
-</ul>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
-  <caption>
-    Mais detalhes</caption>
-  <tbody>
-    <tr>
-      <td>Para mais informações sobre JavaScript, veja a página <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> nesta wiki.</td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">Ação: Uma demonstração de  JavaScript</h3>
-<p>Faça um novo documento em HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:</p>
-<div style="width: 48em;">
-  <pre class="brush:html;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-
-&lt;head&gt;
-&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
-&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
-&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;h1&gt;JavaScript sample&lt;/h1&gt;
-
-&lt;div id="square"&gt;&lt;/div&gt;
-
-&lt;button type="button" onclick="doDemo(this);"&gt;Click Me&lt;/button&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-<p>Crie um novo arquivo  CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p>
-<div style="width: 48em;">
-  <pre class="brush:css;">/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-</pre>
-</div>
-<p>Crie um novo arquivo de texto, <code>script5.js</code>. Coie e cole o conteúdo daqui:</p>
-<div style="width: 48em;">
-  <pre class="brush:js;">// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "#fa4";
-  button.setAttribute("disabled", "true");
-  setTimeout(clearDemo, 2000, button);
-}
-
-function clearDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "transparent";
-  button.removeAttribute("disabled");
-}
-</pre>
-</div>
-<p>Abra o documento no seu Browser e pressione o botão.</p>
-<p>Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:</p>
-<table>
-  <tbody>
-    <tr>
-      <td style="padding-right: 2em;">
-        <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-          <tbody>
-            <tr>
-              <td>
-                <p><strong>JavaScript demonstration</strong></p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-      <td>
-        <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-          <tbody>
-            <tr>
-              <td>
-                <p><strong>JavaScript demonstration</strong></p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<div class="note">
-  <strong>Notas importantes </strong>sobre esta demonstração:
-  <ul>
-    <li>Os links do documento HTML document linca a como usual, e também linca o script.</li>
-    <li>O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.</li>
-    <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li>
-    <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade CSS<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">background-color</code><span style="line-height: 1.5em;">. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.</span></li>
-    <li>Seu browser tem uma regra built-in CSS para<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">button{{ mediawiki.external('disabled=\"true\"') }}</code><span style="line-height: 1.5em;"> ela muda a aparência dos botões quando está disabilitado.</span></li>
-  </ul>
-</div>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
-  <caption>
-    Desafio</caption>
-  <tbody>
-    <tr>
-      <td>
-        <p>Mude o script e então o <span style="line-height: inherit;">square salta para a direita em 20 em quando muda as cores, e salta de volta depois.</span></p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veja a solução deste desafio.</a></p>
-<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">O que vem agora?</span></p>
-<p>Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Di</a>scussão.</p>
-<p>Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras <span style="line-height: inherit;">stylesheets) para selecionar elementos. A próxima página demonstra isso: </span><strong style="line-height: inherit;"><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>
diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html
deleted file mode 100644
index 72dc8dc227..0000000000
--- a/files/pt-br/web/css/getting_started/lists/index.html
+++ /dev/null
@@ -1,272 +0,0 @@
----
-title: Manipulando Listas
-slug: Web/CSS/Getting_Started/Lists
-translation_of: Learn/CSS/Styling_text/Styling_lists
-translation_of_original: Web/Guide/CSS/Getting_started/Lists
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}</p>
-
-<p><font><font>Este é o 10º seção do </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="EN-US / docs / Web / Guia / CSS / Introdução"><font><font>CSS Introdução</font></font></a><font><font> tutorial; </font><font>ele descreve como você pode usar CSS para especificar o aparecimento de listas. </font><font>Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.</font></font></p>
-
-<h2 class="clearLeft" id="Informação_Lists"><font><font>Informação: Lists</font></font></h2>
-
-<p><font><font>Se você aceitou o desafio na </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/ en-US / docs / Web / Guia / CSS / Getting_Started / Conteúdo"><font><font>última </font></font></a><font><font>seção, </font><font>em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.</font></font></p>
-
-<p><font><font>CSS proporciona propriedades especiais que são projetados para listas. </font><font>Geralmente é mais conveniente usar estas propriedades sempre que puder.</font></font></p>
-
-<p><font><font>Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.</font></font></p>
-
-<p><font><font>O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.</font></font></p>
-
-<h3 id="Listas_não_ordenadas"><font><font>Listas não ordenadas</font></font></h3>
-
-<p><font><font>Em uma lista </font></font><em><font><font>desordenada</font></font></em><font><font>, cada item da lista é marcado da mesma forma.</font></font></p>
-
-<p><font><font>CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:</font></font></p>
-
-<ul style="padding-left: 2em;">
- <li style="list-style-type: disc;"><code><font><font>disc</font></font></code></li>
- <li style="list-style-type: circle;"><code><font><font>circle</font></font></code></li>
- <li style="list-style-type: square;"><code><font><font>square</font></font></code></li>
-</ul>
-
-<p style="list-style-type: square;">        none</p>
-
-<p><font><font>Alternativamente, você pode especificar o URL de uma imagem.</font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Exemplo</font></font></div>
-
-<p><font><font>Essas regras especificam diferentes marcadores para diferentes classes de item da lista:</font></font></p>
-
-<pre class="brush:css"><font><font>li.open {list-style: circle;} </font></font><font><font>
-li.closed {list-style: disc;}</font></font>
-</pre>
-
-<p><font><font>Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):</font></font></p>
-
-<pre class="brush: html"><font><font>&lt;ul&gt; </font></font><font><font>
-  &lt;li class="open"&gt; Lorem ipsum &lt;/ li&gt; </font></font><font><font>
-  &lt;li class="closed"&gt; dolor sit &lt;/ li&gt;
-  &lt;li class="closed"&gt; Amet consectetuer &lt;/ li&gt;
-  &lt;li class="open"&gt; Magna aliquam &lt;/ li&gt;
-  &lt;li class="closed"&gt; Autem veleum &lt;/ li&gt;
-&lt;/ ul&gt;</font></font>
-</pre>
-
-<p><font><font>O resultado pode parecer:</font></font></p>
-
-<p><font><font>{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}</font></font></p>
-</div>
-
-<h3 id="Listas_ordenadas"><font><font>Listas ordenadas</font></font></h3>
-
-<p><font><font>Em uma lista<em>ordenada</em></font></font><font><font> , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.</font></font></p>
-
-<p><font><font>Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:</font></font></p>
-
-<ul style="padding-left: 2em;">
- <li><code>decimal</code></li>
- <li><code>lower-roman</code></li>
- <li><code>upper-roman</code></li>
- <li><code>lower-latin</code></li>
- <li><code>upper-latin</code></li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Exemplo</font></font></div>
-
-<p><font><font>Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe </font></font><code><font><font>informações, os itens são identificados com letras maiúsculas.</font></font></code></p>
-
-<pre><code>&lt;ol class="info"&gt;
-  &lt;li&gt;Lorem ipsum&lt;/li&gt;
-  &lt;li&gt;Dolor sit&lt;/li&gt;
-  &lt;li&gt;Amet consectetuer&lt;/li&gt;
-  &lt;li&gt;Magna aliquam&lt;/li&gt;
-  &lt;li&gt;Autem veleum&lt;/li&gt;
-&lt;/ol&gt;</code></pre>
-
-<pre class="brush:css"><font><font>ol.info {list-style: upper-latin;}
-</font></font></pre>
-
-<p><font><font>O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:</font></font></p>
-
-<p><font><font>{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}</font></font></p>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
-
-<p><font><font>O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. </font><font>Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. </font><font>Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.</font></font></p>
-
-<p><font><font>Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. </font><font>No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.</font></font></p>
-
-<p><font><font>Browsers diferem na maneira de implementar os estilos para listas. </font><font>Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</font></font></p>
-</div>
-
-<h3 id="Contadores"><font><font>Contadores</font></font></h3>
-
-<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
-<p><strong><font><font>Nota: </font></font></strong><font><font> Alguns navegadores não suportam contadores. </font><font>O </font></font><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html"><font><font>conteúdo CSS e compatibilidade do navegador</font></font></a><font><font> página no </font></font><a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/"><font><font>site de modo Quirks</font></font></a><font><font> contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. </font><font>Páginas individuais na </font></font><a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference"><font><font>referência CSS</font></font></a><font><font> neste local também têm tabelas de compatibilidade do navegador.</font></font></p>
-</div>
-
-<p><font><font>Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. </font><font>Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</font></font></p>
-
-<p><font><font>Para especificar a numeração, você precisa de um </font></font><em><font><font>contador</font></font></em><font><font> com um nome que você especificar.</font></font></p>
-
-<p><font><font>Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. </font><font>O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.</font></font></p>
-
-<p><font><font>Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.</font></font></p>
-
-<p><font><font>Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o </font></font><code><font><font>conteúdo</font></font></code><font><font> da propriedade (como você fez na página anterior, </font><font>Conteúdo) </font><font>.</font></font></p>
-
-<p><font><font>No valor do </font></font><code><font><font>conteúdo</font></font></code><font><font> de propriedade, especifique </font></font><code><font><font>counter ()</font></font></code><font><font> com o nome de seu contador. </font><font>Opcionalmente especifique um tipo. </font><font>Os tipos são os mesmos que na </font></font><strong><font><font>lista ordenada</font></font></strong><font><font> secção acima.</font></font></p>
-
-<p><font><font>Normalmente, o elemento que apresenta o contador também incrementa-lo.</font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Exemplo</font></font></div>
-
-<p><font><font>Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe </font><font>numeradas:</font></font></p>
-
-<pre class="brush:css"><font><font>h3.numbered {counter-reset: mynum;}
-</font></font></pre>
-
-<p> </p>
-
-<p><font><font>Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe </font><font>numeradas:</font></font></p>
-
-<pre class="brush: html"><font><font>&lt;p class = "numbered"&gt; Lorem ipsum &lt;/ p&gt;
-&lt;p class = "numbered"&gt; dolor sit &lt;/ p&gt;
-&lt;p class = "numbered"&gt; Amet consectetuer &lt;/ p&gt;
-&lt;p class = "numbered"&gt; Magna aliquam &lt;/ p&gt;
-&lt;p class = "numbered"&gt; Autem veleum &lt;/ p&gt;</font></font>
-</pre>
-
-<pre class="brush:css"><font><font>body </font></font><font><font>
-   {counter-reset: </font></font><font><font>
-mynum;} </font></font><font><font>
-p.numbered:before
-  {content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}</font></font>
-</pre>
-
-<p><font><font>O resultado se parece com isso:</font></font></p>
-
-<p><font><font>{{ EmbedLiveSample("Contadores", '300', '200', '') }}</font></font></p>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
-
-<p><font><font>Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.</font></font></p>
-
-<p><font><font>Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. </font><font>No exemplo acima, os contadores estão em negrito mas os itens da lista não são.</font></font></p>
-
-<p><font><font>Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. </font><font>Para mais detalhes, consulte </font></font><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters"><font><font>contadores automáticos e numeração</font></font></a><font><font> em CSS Specification.</font></font></p>
-</div>
-
-<h2 id="Listas_denominadas_Ação"><font><font>Listas denominadas: Ação</font></font></h2>
-
-<p><font><font>Crie um novo documento HTML, </font><font>doc2.html. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
-
-<pre class="brush:html;"><font><font>&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Sample document 2&lt;/title&gt;
-    &lt;link rel="stylesheet" href="style2.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-
-    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Arctic&lt;/li&gt;
-      &lt;li&gt;Atlantic&lt;/li&gt;
-      &lt;li&gt;Pacific&lt;/li&gt;
-      &lt;li&gt;Indian&lt;/li&gt;
-      &lt;li&gt;Southern&lt;/li&gt;
-    &lt;/ul&gt;
-
-    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
-    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
-    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
-    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
-    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
-    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</font></font>
-
-</pre>
-
-<p><font><font>Faça uma nova folha de estilo, </font><font>style2.css. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
-
-<pre class="brush:css;"><font><font>/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}</font></font>
-</pre>
-
-<p><font><font>Se o layout e comentário não são a seu gosto, alterá-los.</font></font></p>
-
-<p><font><font>Abra o documento no seu browser. </font><font>Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. </font><font>Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):</font></font></p>
-
-<p><font><font>{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}</font></font></p>
-
-<div class="tuto_example">
-<div class="tuto_type"><font><font>Desafios</font></font></div>
-
-<p><font><font>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:</font></font></p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
- <tbody>
-  <tr>
-   <td>
-    <p><strong>The oceans</strong></p>
-
-    <ul>
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<p><font><font>Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:</font></font></p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
- <tbody>
-  <tr>
-   <td>
-    <p><strong>(A) The oceans</strong></p>
-
-    <p><strong>. . .</strong></p>
-
-    <p><strong>(B) Numbered paragraphs</strong></p>
-
-    <p><strong>. . .</strong></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="EN-US / docs / Web / Guia / CSS / Introdução / desafio soluções # Lists"><font><font>Ver soluções para esses desafios.</font></font></a></p>
-
-<h2 id="Qual_o_proximo"><font><font>Qual o proximo?</font></font></h2>
-
-<p><font><font>{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. </font><font>A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, </font><font>caixas.</font></font></p>
diff --git a/files/pt-br/web/css/getting_started/oque_&eacute;_css/index.html b/files/pt-br/web/css/getting_started/oque_&eacute;_css/index.html
deleted file mode 100644
index 1ccc04f0ce..0000000000
--- a/files/pt-br/web/css/getting_started/oque_&eacute;_css/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: O que é CSS
-slug: Web/CSS/Getting_Started/Oque_&eacute;_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de <span class="seoSummary"> i<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">ntrodução as CSS </a> e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.</span></p>
-
-<h2 class="clearLeft" id="O_que_é_CSS">O que é CSS ?</h2>
-
-<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).</p>
-
-<p>Um <em>documento</em> é um conjunto de informações que são estruturadas utilizando uma <em>linguagem de marcação</em>.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Examples</div>
-
-<ul>
- <li>Um documento, é uma página da web como esta que você está lendo.<br>
-  A informação que você vê em uma página web  é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language).</li>
- <li>Dialogos, também chamados de Janelas Modais de um aplicativo,  são frequentemente documentos.<br>
-  Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.</li>
-</ul>
-</div>
-
-<p>Neste tutorial, temos boxes com o título <strong>Mais detalhes c</strong>omo o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.</p>
-
-<p>Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.</p>
-
-<p>Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:</p>
-
-<table style="background-color: inherit; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td><a href="/en/HTML" title="en/HTML">HTML</a></td>
-   <td>para paginas web</td>
-  </tr>
-  <tr>
-   <td><a href="/en/XML" title="en/XML">XML</a></td>
-   <td>para documentos estruturados em geral</td>
-  </tr>
-  <tr>
-   <td><a href="/en/SVG" title="en/SVG">SVG</a></td>
-   <td>para gráficos</td>
-  </tr>
-  <tr>
-   <td><a href="/en/XUL" title="en/XUL">XUL</a></td>
-   <td>para interfaces de usuários em Mozilla</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p>
-</div>
-
-<p><em>Apresentar</em> um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de <em>user agent</em> (UA), no Brasil <span style="background-color: rgb(244, 244, 244);"><em>agente de usuário</em></span>. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.</p>
-
-<p>Para mais definições formais sobre  terminologia relacionadas com CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definições</a> na especificação CSS.</p>
-</div>
-
-<h2 id="Ação_Criando_um_documento">Ação: Criando um documento</h2>
-
-<ol>
- <li>Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.</li>
- <li>Copie e cole o código HTML abaixo . Salve o arquivo usando o nome <code>doc1.html</code>
-  <pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Documento de exemplo&lt;/title&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar.
-  <p>Você deve ver o texto  com as letras iniciais em negrito, como este:</p>
-
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p>O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.</p>
- </li>
-</ol>
-
-<h2 id="O_que_veremos_depois">O que veremos depois?</h2>
-
-<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na <a href="/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">próxima seção</a> você usará CSS para especificar o estilo.</p>
diff --git a/files/pt-br/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html
deleted file mode 100644
index 453aa4c966..0000000000
--- a/files/pt-br/web/css/getting_started/porque_usar_css/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Por que usar CSS?
-slug: Web/CSS/Getting_Started/Porque_usar_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
----
-<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary">Esta segunda parte do  <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.</span></p>
-
-<h2 class="clearLeft" id="Informação_Por_que_usar_CSS">Informação: Por que usar CSS?</h2>
-
-<p>As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag &lt;head&gt; do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag &lt;head&gt; de seu documento.</p>
-
-<p>Uma folha de estilo externa, tem muitas vantagens.:</p>
-
-<ul>
- <li>Ajuda a evitar código repetido</li>
- <li>Facilita a manutenção</li>
- <li>Permite fazer mudança no site inteiro alterando apenas um arquivo.</li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-
-<p>Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..</p>
-
-<p>Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.</p>
-
-<p>Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.</p>
-</div>
-
-<p>Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.</p>
-
-<p>Por exemplo, você pode usar a tag &lt;b&gt; para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag &lt;body&gt;.</p>
-
-<p>Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.</p>
-</div>
-
-<h2 id="Ação_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2>
-
-<ol>
- <li><span id="result_box" lang="pt"><span class="hps">Crie outro</span> <span class="hps">arquivo de texto</span> <span class="hps">no mesmo</span> <span class="hps">diretório que o documento</span> <span class="hps">doc1.html</span> <span class="hps">você criou</span> <span class="hps">na primeira seção</span><span>.</span></span></li>
- <li>Salve seu documento como: <code>style1.css</code>. Este arquivo será sua folha de estilos.</li>
- <li>Em seu CSS, cole a linha abaixo, e salve o arquivo:
-  <pre class="brush: css">strong {color: red;}
-</pre>
- </li>
-</ol>
-
-<h3 id="Linkando_seu_documento_para_sua_folha_de_estilo">Linkando seu documento para sua folha de estilo</h3>
-
-<ol>
- <li>Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo:
-  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Documento Simples com CSS&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas:
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p>
-
-<div class="tuto_example" id="challenge">
-<div class="tuto_type">Desafio</div>
-
-<p>Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.</p>
-
-<p>Encontre mais cinco nomes de cores que as CSS trabalham.</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para este desafio.</a></div>
-
-<h2 id="O_que_veremos">O que veremos?</h2>
-
-<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">aprender mais</a> sobre como seu navegador trabalha e exibe um documento.</p>
diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html
deleted file mode 100644
index 3870c68936..0000000000
--- a/files/pt-br/web/css/getting_started/seletores/index.html
+++ /dev/null
@@ -1,430 +0,0 @@
----
-title: Seletores
-slug: Web/CSS/Getting_Started/Seletores
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.</span></p>
-
-<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2>
-
-<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p>
-
-<pre class="brush: css">strong {
-  color: red;
-}
-</pre>
-
-<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>A parte dentro das chaves é a <em>declaração</em>.</p>
-
-<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p>
-
-<p>O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.</p>
-
-<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p>
-</div>
-
-<p>Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.</p>
-
-<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p>
-
-<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
-
-<h3 id="Seletores_com_Classe">Seletores com Classe</h3>
-
-<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.</p>
-
-<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p>
-
-<h3 id="Seletores_com_ID">Seletores com ID</h3>
-
-<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p>
-
-<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Exemplo</div>
-Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>:
-
-<pre class="brush: html">&lt;p class="chave" id="principal"&gt;
-</pre>
-
-<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p>
-
-<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p>
-
-<pre class="brush: css">.chave {
-  color: green;
-}
-</pre>
-
-<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p>
-
-<pre class="brush: css">#principal {
-  font-weight: bolder;
-}
-</pre>
-</div>
-
-<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3>
-
-<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:</p>
-
-<dl>
- <dt><code>[disabled]</code></dt>
- <dd>Seleciona todos os elementos com o atributo "disabled".</dd>
- <dt><code>[type='button']</code></dt>
- <dd>Seleciona todos os elementos do tipo "button".</dd>
- <dt><code>[class~=key]</code></dt>
- <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd>
- <dt><code>[lang|=es]</code></dt>
- <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd>
- <dt>[title*="example" i]</dt>
- <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd>
- <dt><code>a[href^="https://"]</code></dt>
- <dd>Seleciona links seguros.</dd>
- <dt><code>img[src$=".png"]</code></dt>
- <dd>IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.</dd>
-</dl>
-
-<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3>
-
-<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p>
-
-<p>Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Syntax</div>
-
-<pre class="brush:css">selector:pseudo-class {
-  property: value;
-}
-</pre>
-</div>
-
-<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4>
-
-<ul>
- <li>{{ Cssxref(":link") }}</li>
- <li>{{ Cssxref(":visited") }}</li>
- <li>{{ Cssxref(":active") }}</li>
- <li>{{ Cssxref(":hover") }}</li>
- <li>{{ Cssxref(":focus") }}</li>
- <li>{{ Cssxref(":first-child") }}</li>
- <li>{{ Cssxref(":last-child") }}</li>
- <li>{{ Cssxref(":nth-child") }}</li>
- <li>{{ Cssxref(":nth-last-child") }}</li>
- <li>{{ Cssxref(":nth-of-type") }}</li>
- <li>{{ Cssxref(":first-of-type") }}</li>
- <li>{{ Cssxref(":last-of-type") }}</li>
- <li>{{ Cssxref(":empty") }}</li>
- <li>{{ Cssxref(":target") }}</li>
- <li>{{ Cssxref(":checked") }}</li>
- <li>{{ Cssxref(":enabled") }}</li>
- <li>{{ Cssxref(":disabled") }}</li>
-</ul>
-
-<h2 id="Informação_Especificidade">Informação: Especificidade</h2>
-
-<p>Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mais detalhes</div>
-
-<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p>
-</div>
-
-<p>Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.</p>
-
-<p>Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.</p>
-
-<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2>
-
-<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p>
-
-<table id="relselectors">
- <caption>Common selectors based on relationships</caption>
- <tbody>
-  <tr>
-   <td style="width: 10em;"><strong>Selector</strong></td>
-   <td><strong>Selects</strong></td>
-  </tr>
-  <tr>
-   <td><code>A E</code></td>
-   <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td>
-  </tr>
-  <tr>
-   <td><code>A &gt; E</code></td>
-   <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td>
-  </tr>
-  <tr>
-   <td><code>E:first-child</code></td>
-   <td>Any E element that is the <em>first child</em> of its parent</td>
-  </tr>
-  <tr>
-   <td><code>B + E</code></td>
-   <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td>
-  </tr>
- </tbody>
-</table>
-
-<p>You can combine these to express complex relationships.</p>
-
-<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Example</div>
-
-<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p>
-
-<pre class="brush: html">&lt;table id="data-table-1"&gt;
-...
-&lt;tr&gt;
-&lt;td&gt;Prefix&lt;/td&gt;
-&lt;td&gt;0001&lt;/td&gt;
-&lt;td&gt;default&lt;/td&gt;
-&lt;/tr&gt;
-...
-</pre>
-
-<p>These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:</p>
-
-<pre class="brush:css">    #data-table-1 td:first-child {text-decoration: underline;}
-    #data-table-1 td:first-child + td {text-decoration: line-through;}
-</pre>
-
-<p>The result looks like:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <table style="margin-right: 2em; width: 18em;">
-     <tbody>
-      <tr>
-       <td><u>Prefix</u></td>
-       <td><s>0001</s></td>
-       <td>default</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">More details</div>
-
-<p>In the usual way, if you make a selector more specific, then you increase its priority.</p>
-
-<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p>
-
-<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p>
-
-<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p>
-</div>
-
-<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2>
-
-<ol>
- <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li>
- <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again:
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p id="first"&gt;
-      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-    &lt;p id="second"&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Now edit your CSS file. Replace the entire contents with:
-  <pre class="brush:css">strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-</pre>
- </li>
- <li>Save the files and refresh your browser to see the result:
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p>You can try rearranging the lines in your CSS file to show that the order has no effect.</p>
-
-  <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p>
-
-  <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Challenges</div>
-
-<ol>
- <li>Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue:
-  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too:
-  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<ol>
- <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
-
-  <pre class="brush: css">#second { color: blue; }
-</pre>
-  A more specific selector, <code>p#second</code> also works.</li>
- <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
-  <pre class="brush: css">p { color: blue; }
-</pre>
- </li>
-</ol>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
-
-<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2>
-
-<ol>
- <li>Create an HTML file with following content:
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Now edit your CSS file. Replace the entire contents with:
-  <pre class="brush: css">a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-</pre>
- </li>
- <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect):
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2>
-
-<p>With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p>
-
-<pre class="brush: css">div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover &gt; ul {
-  display: block;
-}</pre>
-
-<p>to be applied to an HTML structure like the following:</p>
-
-<pre class="brush: html">&lt;div class="menu-bar"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
-      &lt;ul&gt;
-        &lt;li&gt;
-          &lt;a href="example.html"&gt;Link&lt;/a&gt;
-        &lt;/li&gt;
-        &lt;li&gt;
-          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-          &lt;ul&gt;
-            &lt;li&gt;
-              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-              &lt;ul&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-              &lt;/ul&gt;
-            &lt;/li&gt;
-            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-          &lt;/ul&gt;
-        &lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p>
-
-<h2 id="What_next">What next?</h2>
-
-<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/pt-br/web/css/hifens/index.html b/files/pt-br/web/css/hyphens/index.html
index c8e718562f..c8e718562f 100644
--- a/files/pt-br/web/css/hifens/index.html
+++ b/files/pt-br/web/css/hyphens/index.html
diff --git a/files/pt-br/web/css/imagem/index.html b/files/pt-br/web/css/image/index.html
index fe9631cb30..fe9631cb30 100644
--- a/files/pt-br/web/css/imagem/index.html
+++ b/files/pt-br/web/css/image/index.html
diff --git a/files/pt-br/web/css/valor_inicial/index.html b/files/pt-br/web/css/initial_value/index.html
index fea27bfe3c..fea27bfe3c 100644
--- a/files/pt-br/web/css/valor_inicial/index.html
+++ b/files/pt-br/web/css/initial_value/index.html
diff --git a/files/pt-br/web/css/modelo_layout/index.html b/files/pt-br/web/css/layout_mode/index.html
index 883cdbd4a4..883cdbd4a4 100644
--- a/files/pt-br/web/css/modelo_layout/index.html
+++ b/files/pt-br/web/css/layout_mode/index.html
diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html
new file mode 100644
index 0000000000..4b7f7f52d5
--- /dev/null
+++ b/files/pt-br/web/css/mask/index.html
@@ -0,0 +1,150 @@
+---
+title: mask
+slug: mask
+tags:
+  - CSS
+  - Compatibilidade Mobile
+  - Internet
+  - Layout
+  - Referencia
+  - SVG
+  - Web
+  - máscaras
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">A propriedade</span> <span class="hps">máscara</span> <span class="alt-edited hps">no</span> <span class="hps">CSS</span> <span class="hps">permite aos usuários</span> alterarem <span class="hps">a visibilidade de</span> <span class="hps">um item</span> <span class="hps">parcialmente ou</span> <span class="hps">totalmente</span> <span class="hps">escondendo o</span> <span class="hps">item.</span> <span class="alt-edited hps">Isso é obtido</span> <span class="hps">por qualquer</span> <span class="hps">mascaramento</span> <span class="hps">ou</span> <span class="hps">cortes na imagem</span> <span class="hps">em pontos específicos</span><span>.</span></span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush:css">/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.</p>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: css">.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td><span id="result_box" lang="pt"><span class="hps">Estende-se</span> <span class="hps">a sua utilização</span> <span class="hps">para</span> <span class="hps">elementos HTML</span><span>.</span><br>
+    <span class="hps">Estende</span> <span class="hps">sua sintaxe</span><span>, tornando-a</span> <span class="hps">uma simplificação para</span> <span class="hps">as novas</span> <span class="hps">propriedades</span> <span class="hps">da </span></span><code>mask-*</code> <span id="result_box" lang="pt"><span class="hps">definidos nessa</span> <span class="hps">especificação.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico (para o SVG)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [*]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Aplica-se a</span> <span class="hps">elementos</span> <span class="hps">HTML</span></span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} [*]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, <span class="short_text" id="result_box" lang="pt"><span class="hps">o espaço de cor</span> <span class="hps">padrão</span> <span class="hps">ao manusear</span> <span class="hps">máscaras é</span> <span class="hps">sRGB</span></span>; anteriormente, o padrão <span class="short_text" id="result_box" lang="pt"><span class="hps">(</span><span class="alt-edited hps">suportado apenas</span> <span class="hps">espaço de cor</span></span>) era linearRGB. <span id="result_box" lang="pt"><span class="hps">Isso muda</span> <span class="hps">a aparência de</span> <span class="hps">efeitos de máscara</span><span>, mas</span> <span class="hps">traz</span> o <span class="hps">Gecko</span> <span class="hps">em</span> <span class="hps">conformidade</span> <span class="hps">com a segunda edição</span> <span class="hps">da especificação</span> <span class="hps">SVG</span> <span class="hps">1.1.</span></span></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Aplicanto efeitos SVG no conteúdo HTML</a></li>
+ <li><a href="/en-US/docs/SVG">SVG</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/css/css_media_queries/index.html b/files/pt-br/web/css/media_queries/using_media_queries/index.html
index 4b9728eebd..4b9728eebd 100644
--- a/files/pt-br/web/guide/css/css_media_queries/index.html
+++ b/files/pt-br/web/css/media_queries/using_media_queries/index.html
diff --git a/files/pt-br/web/css/word-wrap/index.html b/files/pt-br/web/css/overflow-wrap/index.html
index c23f4b966d..c23f4b966d 100644
--- a/files/pt-br/web/css/word-wrap/index.html
+++ b/files/pt-br/web/css/overflow-wrap/index.html
diff --git a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html
index 273c7765e3..273c7765e3 100644
--- a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html
+++ b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html
diff --git a/files/pt-br/web/css/pseudo-elementos/index.html b/files/pt-br/web/css/pseudo-elements/index.html
index a457c9ac9a..a457c9ac9a 100644
--- a/files/pt-br/web/css/pseudo-elementos/index.html
+++ b/files/pt-br/web/css/pseudo-elements/index.html
diff --git a/files/pt-br/web/css/css_reference/index.html b/files/pt-br/web/css/reference/index.html
index 1afbf4890e..1afbf4890e 100644
--- a/files/pt-br/web/css/css_reference/index.html
+++ b/files/pt-br/web/css/reference/index.html
diff --git a/files/pt-br/web/css/elemento_substituido/index.html b/files/pt-br/web/css/replaced_element/index.html
index 22ba1b8ad0..22ba1b8ad0 100644
--- a/files/pt-br/web/css/elemento_substituido/index.html
+++ b/files/pt-br/web/css/replaced_element/index.html
diff --git a/files/pt-br/web/css/valor_resolvido/index.html b/files/pt-br/web/css/resolved_value/index.html
index a045149bc7..a045149bc7 100644
--- a/files/pt-br/web/css/valor_resolvido/index.html
+++ b/files/pt-br/web/css/resolved_value/index.html
diff --git a/files/pt-br/web/css/valor_espeficifco/index.html b/files/pt-br/web/css/specified_value/index.html
index 939aa09234..939aa09234 100644
--- a/files/pt-br/web/css/valor_espeficifco/index.html
+++ b/files/pt-br/web/css/specified_value/index.html
diff --git a/files/pt-br/web/css/sintaxe/index.html b/files/pt-br/web/css/syntax/index.html
index 4d6ff0bf1c..4d6ff0bf1c 100644
--- a/files/pt-br/web/css/sintaxe/index.html
+++ b/files/pt-br/web/css/syntax/index.html
diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/universal_selectors/index.html
index 15e64a08ca..15e64a08ca 100644
--- a/files/pt-br/web/css/seletor_universal/index.html
+++ b/files/pt-br/web/css/universal_selectors/index.html
diff --git a/files/pt-br/web/css/valor_usado/index.html b/files/pt-br/web/css/used_value/index.html
index 18c48dedb5..18c48dedb5 100644
--- a/files/pt-br/web/css/valor_usado/index.html
+++ b/files/pt-br/web/css/used_value/index.html
diff --git a/files/pt-br/web/css/sintexe_valor/index.html b/files/pt-br/web/css/value_definition_syntax/index.html
index d14bcaecdf..d14bcaecdf 100644
--- a/files/pt-br/web/css/sintexe_valor/index.html
+++ b/files/pt-br/web/css/value_definition_syntax/index.html
diff --git a/files/pt-br/web/css/modelo_visual/index.html b/files/pt-br/web/css/visual_formatting_model/index.html
index a37a0cc7b0..a37a0cc7b0 100644
--- a/files/pt-br/web/css/modelo_visual/index.html
+++ b/files/pt-br/web/css/visual_formatting_model/index.html
diff --git a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html
deleted file mode 100644
index c2f5f9f4ce..0000000000
--- a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Usando CSS media queries (consultas de mídia em CSS)
-slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS)
-tags:
-  - CSS
-  - Guía
-  - Iniciante
-  - media query
----
-<p><span class="seoSummary">Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.</span></p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<p>Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.</p>
-
-<p>Fonte:</p>
-
-<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries</a></p>
-
-<p> </p>
diff --git a/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html
index 632b54df75..632b54df75 100644
--- a/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html
+++ b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html
diff --git a/files/pt-br/web/guide/gráficos/index.html b/files/pt-br/web/guide/graphics/index.html
index 6abc792433..6abc792433 100644
--- a/files/pt-br/web/guide/gráficos/index.html
+++ b/files/pt-br/web/guide/graphics/index.html
diff --git a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html b/files/pt-br/web/guide/html/content_categories/index.html
index 7b55358b7b..7b55358b7b 100644
--- a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html
+++ b/files/pt-br/web/guide/html/content_categories/index.html
diff --git a/files/pt-br/web/guide/html/content_editable/index.html b/files/pt-br/web/guide/html/editable_content/index.html
index ed2a588e47..ed2a588e47 100644
--- a/files/pt-br/web/guide/html/content_editable/index.html
+++ b/files/pt-br/web/guide/html/editable_content/index.html
diff --git a/files/pt-br/web/guide/html/forms/form_validation/index.html b/files/pt-br/web/guide/html/forms/form_validation/index.html
deleted file mode 100644
index 7f9146d0a4..0000000000
--- a/files/pt-br/web/guide/html/forms/form_validation/index.html
+++ /dev/null
@@ -1,813 +0,0 @@
----
-title: Form data validation
-slug: Web/Guide/HTML/Forms/Form_validation
-translation_of: Learn/Forms/Form_validation
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div>
-
-<p class="summary">A validação de formulário nos ajuda a garantir que os usuários preencham os formulários no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a>.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Conhecimento em informática, uma compreensão razoável de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender o que é validação de formulário, por que é importante e aplicação de várias técnicas para implementá-lo.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="O_que_é_validação_de_formulário">O que é validação de formulário?</h2>
-
-<p>Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:</p>
-
-<ul>
- <li>"Sua senha precisa ter entre 8 e 30 caracteres e conter uma letra maiúscula, um símbolo e um número"</li>
- <li>"Por favor, digite seu número de telefone no formato xxx-xxxx" (ele impõe três números seguidos por um traço, seguido por quatro números)</li>
- <li>"Por favor insira um endereço de email válido" (se a sua entrada não estiver no formato "email@email.com")</li>
- <li>"Este campo é obrigatório" (você não pode deixar este campo em branco)</li>
-</ul>
-
-<p>Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.</p>
-
-<p><br>
- Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:</p>
-
-<ul>
- <li><strong>Nos queremos que o dado correto e no formato correto </strong> — nossa aplicação não irá trabalhar de forma correta se os dados dos nossos usuarios estivem armazenados em formato incorreto, ou quando esses dados são omitidos.</li>
- <li><strong>Quemos proteger os dados dos nossos usuários</strong> — Forçarnosos usuários a fornecer senhas seguras facilita na proteção das informações da conta do usuário.</li>
- <li><strong>Queremos proteger nos mesmos</strong> — Existem diversas maneiras de um usuário malicioso usar formulários desprotegidos para danificar nossa aplicação (veja <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).<br>
-  {{warning("Nunca confie nos dados passados do cliente para o servidor. Mesmo que seu formulário seja validado de maneira correta e previna a má formação de inputs no lado do cliente, um usuário malicioso ainda pode roubar o request da conexão.")}}</li>
-</ul>
-
-<h3 id="Different_types_of_form_validation">Different types of form validation</h3>
-
-<p>There are two different types of form validation which you'll encounter on the web:</p>
-
-<ul>
- <li><strong>Client-side validation</strong> is validation that occurs in the browser before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided:
-
-  <ul>
-   <li><strong>JavaScript</strong> validation is coded using JavaScript. It is completely customizable.</li>
-   <li><strong>Built-in form validation</strong> using HTML5 form validation features.  This generally does not require JavaScript. Built-in form validation has better performance, but it is not as customizable as JavaScript.</li>
-  </ul>
- </li>
- <li><strong>Server-side validation</strong> is validation which occurs on the server after the data has been submitted.  Server-side code is used to validate the data before it is saved into the database. If the data fails authentication, a response is sent back to the client to tell the user what corrections to make. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted.  However, server-side validation is your application's last line of defence against incorrect or even malicious data. All popular <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">server-side frameworks</a> have features for <strong>validating</strong> and <strong>sanitizing</strong> data (making it safe).</li>
-</ul>
-
-<p>In the real world, developers tend to use a combination of client-side and server-side validation.</p>
-
-<h2 id="Using_built-in_form_validation">Using built-in form validation</h2>
-
-<p>One of the features of <a href="/en-US/docs/HTML/HTML5">HTML5</a> is the ability to validate most user data without relying on scripts. This is done by using <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">validation attributes</a> on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all the specified rules, it is considered valid; if not, it is considered invalid.</p>
-
-<p>When an element is valid:</p>
-
-<ul>
- <li>The element matches the {{cssxref(":valid")}} CSS pseudo-class; this will let you apply a specific style to valid elements.</li>
- <li>If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).</li>
-</ul>
-
-<p>When an element is invalid:</p>
-
-<ul>
- <li>The element matches the {{cssxref(":invalid")}} CSS pseudo-class; this will let you apply a specific style to invalid elements.</li>
- <li>If the user tries to send the data, the browser will block the form and display an error message.</li>
-</ul>
-
-<h3 id="Validation_constraints_on_input_elements_—_starting_simple">Validation constraints on input elements — starting simple</h3>
-
-<p>In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.</p>
-
-<p>Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, and a live example below:</p>
-
-<div class="hidden">
-<h6 id="Hidden_code">Hidden code</h6>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
-  &lt;input id="choose" name="i_like"&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css notranslate">input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}</pre>
-</div>
-
-<p>{{EmbedLiveSample("Hidden_code", "100%", 50)}}</p>
-
-<p>To begin with, make a copy of <code>fruit-start.html</code> in a new directory on your hard drive.</p>
-
-<h3 id="The_required_attribute">The required attribute</h3>
-
-<p>The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).</p>
-
-<p>Add a <code>required</code> attribute to your input, as shown below:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
-  &lt;input id="choose" name="i_like" required&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>Also, take note of the CSS included in the example file:</p>
-
-<pre class="brush: css notranslate">input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}</pre>
-
-<p>This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:</p>
-
-<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p>
-
-<h3 id="Validating_against_a_regular_expression">Validating against a regular expression</h3>
-
-<p>Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as a variety of other uses in JavaScript).</p>
-
-<p>Regexs are quite complex, and we do not intend to teach you them exhaustively in this article. Below are some examples to give you a basic idea of how they work:</p>
-
-<ul>
- <li><code>a</code> — matches one character that is <code>a</code> (not <code>b</code>, not <code>aa</code>, etc.)</li>
- <li><code>abc</code> — matches <code>a</code>, followed by <code>b</code>, followed by <code>c</code>.</li>
- <li><code>a|b</code> — matches one character that is <code>a</code> or <code>b</code>.</li>
- <li><code>abc|xyz</code> — matches exactly <code>abc</code> or exactly <code>xyz</code> (but not <code>abcxyz</code>, or <code>a</code> or <code>y</code>, etc).</li>
- <li>There are many more possibilities that we don't need to cover here.</li>
-</ul>
-
-<p>Anyway, let's implement an example — update your HTML to add a <code>pattern</code> attribute, like so:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
-  &lt;input id="choose" name="i_like" required pattern="banana|cherry"&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<div class="hidden">
-<pre class="brush: css notranslate">input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}</pre>
-</div>
-
-<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p>
-
-<p>In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".</p>
-
-<p>At this point, try changing the value inside the <code>pattern</code> attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!</p>
-
-<div class="note">
-<p><strong>Note:</strong> Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the <code>email</code> type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the <code>url</code> type automatically require a properly-formed URL.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.</p>
-</div>
-
-<h3 id="Constraining_the_length_of_your_entries">Constraining the length of your entries</h3>
-
-<p>All text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.</p>
-
-<p>For number fields (i.e. <code>&lt;input type="number"&gt;</code>), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.</p>
-
-<p>Let's look at another example. Create a new copy of the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> file.</p>
-
-<p>Now delete the contents of the <code>&lt;body&gt;</code> element, and replace it with the following:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
-    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
-    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Submit&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<ul>
- <li>Here you'll see that we've given the <code>text</code> field a <code>minlength</code> and <code>maxlength</code> of 6 — the same length as banana and cherry. Entering less characters will show as invalid, and entering more is not possible in most browsers.</li>
- <li>We've also given the <code>number</code> field a <code>min</code> of 1 and a <code>max</code> of 10 — entered numbers outside this range will show as invalid, and you won't be able to use the increment/decrement arrows to move the value outside this range.</li>
-</ul>
-
-<div class="hidden">
-<pre class="notranslate">input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
-
-div {
-  margin-bottom: 10px;
-}</pre>
-</div>
-
-<p>Here is the example running live:</p>
-
-<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}</p>
-
-<div class="note">
-<p><strong>Note</strong>: <code>&lt;input type="number"&gt;</code> (and other types, like <code>range</code>) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).</p>
-</div>
-
-<h3 id="Full_example">Full example</h3>
-
-<p>Here is a full example to show off usage of HTML's built-in validation features:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;p&gt;
-    &lt;fieldset&gt;
-      &lt;legend&gt;Title&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
-      &lt;input type="radio" required name="title" id="r1" value="Mr"&gt;&lt;label for="r1"&gt;Mr.&lt;/label&gt;
-      &lt;input type="radio" required name="title" id="r2" value="Ms"&gt;&lt;label for="r2"&gt;Ms.&lt;/label&gt;
-    &lt;/fieldset&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
-    &lt;!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback --&gt;
-    &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/label&gt;
-    &lt;input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
-    &lt;datalist id="l1"&gt;
-      &lt;option&gt;Banana&lt;/option&gt;
-      &lt;option&gt;Cherry&lt;/option&gt;
-      &lt;option&gt;Apple&lt;/option&gt;
-      &lt;option&gt;Strawberry&lt;/option&gt;
-      &lt;option&gt;Lemon&lt;/option&gt;
-      &lt;option&gt;Orange&lt;/option&gt;
-    &lt;/datalist&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="t2"&gt;What's your e-mail?&lt;/label&gt;
-    &lt;input type="email" id="t2" name="email"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
-    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;button&gt;Submit&lt;/button&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css notranslate">body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p &gt; label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* required to properly style form
-   elements on WebKit based browsers */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}</pre>
-
-<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>
-
-<p>See <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">Validation-related attributes</a> for a complete list of attributes that can be used to constrain input values, and the input types that support them.</p>
-
-<h3 id="Customized_error_messages">Customized error messages</h3>
-
-<p>As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.</p>
-
-<p>These automated messages have two drawbacks:</p>
-
-<ul>
- <li>There is no standard way to change their look and feel with CSS.</li>
- <li>They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.</li>
-</ul>
-
-<table>
- <caption>French versions of feedback messages on an English page</caption>
- <thead>
-  <tr>
-   <th scope="col">Browser</th>
-   <th scope="col">Rendering</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Firefox 17 (Windows 7)</td>
-   <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td>
-  </tr>
-  <tr>
-   <td>Chrome 22 (Windows 7)</td>
-   <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td>
-  </tr>
-  <tr>
-   <td>Opera 12.10 (Mac OSX)</td>
-   <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td>
-  </tr>
- </tbody>
-</table>
-
-<p>To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.</p>
-
-<p>HTML5 provides the <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">constraint validation API</a> to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;label for="mail"&gt;I would like you to provide me an e-mail&lt;/label&gt;
-  &lt;input type="email" id="mail" name="mail"&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>In JavaScript, you call the <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> method:</p>
-
-<pre class="brush: js notranslate">var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I expect an e-mail, darling!");
-  } else {
-    email.setCustomValidity("");
-  }
-});</pre>
-
-<p>{{EmbedLiveSample("Customized_error_messages", "100%", 80)}}</p>
-
-<h2 id="Validating_forms_using_JavaScript">Validating forms using JavaScript</h2>
-
-<p>If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.</p>
-
-<h3 id="The_constraint_validation_API">The constraint validation API</h3>
-
-<p>More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on specific form element interfaces:</p>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></li>
- <li><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></li>
- <li><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></li>
- <li><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></li>
- <li><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></li>
- <li><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></li>
-</ul>
-
-<h4 id="Constraint_validation_API_properties">Constraint validation API properties</h4>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>validationMessage</code></td>
-   <td>A localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or the element's value satisfies its constraints.</td>
-  </tr>
-  <tr>
-   <td><code>validity</code></td>
-   <td>A {{domxref("ValidityState")}} object describing the validity state of the element. See that article for details of possible validity states.</td>
-  </tr>
-  <tr>
-   <td><code>willValidate</code></td>
-   <td>Returns <code>true</code> if the element will be validated when the form is submitted; <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Constraint_validation_API_methods">Constraint validation API methods</h4>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Method</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>checkValidity()</code></td>
-   <td>Returns <code>true</code> if the element's value has no validity problems; <code>false</code> otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLFormElement.reportValidity()")}}</td>
-   <td>Returns <code>true</code> if the element or its child controls satisfy validation constraints. When <code>false</code> is returned, cancelable {{event("invalid")}} events are fired for each invalid element and validation problems are reported to the user.</td>
-  </tr>
-  <tr>
-   <td><code>setCustomValidity(<em>message</em>)</code></td>
-   <td>Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.<br>
-    <br>
-    If the argument is the empty string, the custom error is cleared.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>For legacy browsers, it's possible to use a <a href="https://hyperform.js.org/" rel="external">polyfill such as Hyperform </a> to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.</p>
-
-<h4 id="Example_using_the_constraint_validation_API">Example using the constraint validation API</h4>
-
-<p>Let's see how to use this API to build custom error messages. First, the HTML:</p>
-
-<pre class="brush: html notranslate">&lt;form novalidate&gt;
-  &lt;p&gt;
-    &lt;label for="mail"&gt;
-      &lt;span&gt;Please enter an email address:&lt;/span&gt;
-      &lt;input type="email" id="mail" name="mail"&gt;
-      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
-    &lt;/label&gt;
-  &lt;/p&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.</p>
-
-<p>The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.</p>
-
-<h5 id="CSS">CSS</h5>
-
-<p>This CSS styles our form and the error output to look more attractive.</p>
-
-<pre class="brush: css notranslate">/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}</pre>
-
-<h5 id="JavaScript">JavaScript</h5>
-
-<p>The following JavaScript code handles the custom error validation.</p>
-
-<pre class="brush: js notranslate">// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // Each time the user types something, we check if the
-  // email field is valid.
-  if (email.validity.valid) {
-    // In case there is an error message visible, if the field
-    // is valid, we remove the error message.
-    error.innerHTML = ""; // Reset the content of the message
-    error.className = "error"; // Reset the visual state of the message
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Each time the user tries to send the data, we check
-  // if the email field is valid.
-  if (!email.validity.valid) {
-
-    // If the field is not valid, we display a custom
-    // error message.
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-    // And we prevent the form from being sent by canceling the event
-    event.preventDefault();
-  }
-}, false);</pre>
-
-<p>Here is the live result:</p>
-
-<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p>
-
-<p>The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.</p>
-
-<h3 id="Validating_forms_without_a_built-in_API">Validating forms without a built-in API</h3>
-
-<p>Sometimes, such as with legacy browsers or <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">custom widgets</a>, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.</p>
-
-<p>To validate a form, you have to ask yourself a few questions:</p>
-
-<dl>
- <dt>What kind of validation should I perform?</dt>
- <dd>You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.</dd>
- <dt>What should I do if the form does not validate?</dt>
- <dd>This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?</dd>
- <dt>How can I help the user to correct invalid data?</dt>
- <dd>In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read:
- <ul>
-  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
-  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
-  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li>
-  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
- </ul>
- </dd>
-</dl>
-
-<h4 id="An_example_that_doesnt_use_the_constraint_validation_API">An example that doesn't use the constraint validation API</h4>
-
-<p>In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-  &lt;p&gt;
-    &lt;label for="mail"&gt;
-        &lt;span&gt;Please enter an email address:&lt;/span&gt;
-        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
-        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
-    &lt;/label&gt;
-  &lt;p&gt;
-  &lt;!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element --&gt;
-  &lt;button type="submit"&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> is an independent specification that's not specifically related to HTML5.</p>
-
-<h5 id="CSS_2">CSS</h5>
-
-<p>Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.</p>
-
-<pre class="brush: css notranslate">/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}</pre>
-
-<h5 id="JavaScript_2">JavaScript</h5>
-
-<p>The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.</p>
-
-<pre class="brush: js notranslate">// There are fewer ways to pick a DOM node with legacy browsers
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-var emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // A callback that returns `false` stops the callback chain
-    // and interrupts the execution of the event callback.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
-  // Here, we test if the field is empty (remember, the field is not required)
-  // If it is not, we check if its content is a well-formed e-mail address.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Some legacy browsers do not support the event.preventDefault() method
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});</pre>
-
-<p>The result looks like this:</p>
-
-<p>{{EmbedLiveSample("An_example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p>
-
-<p>As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:</p>
-
-<ul>
- <li>Standalone library
-  <ul>
-   <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li>
-  </ul>
- </li>
- <li>jQuery plug-in:
-  <ul>
-   <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li>
-  </ul>
- </li>
-</ul>
-
-<h4 id="Remote_validation">Remote validation</h4>
-
-<p>In some cases, it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a username. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the username rather than asking the user to send the data, then send back the form with an error.</p>
-
-<p>Performing such a validation requires taking a few precautions:</p>
-
-<ul>
- <li>It requires exposing an API and some data publicly; be sure it is not sensitive data.</li>
- <li>Network lag requires performing asynchronous validation. This requires some UI work in order to be sure that the user will not be blocked if the validation is not performed properly.</li>
-</ul>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:</p>
-
-<ul>
- <li>Display explicit error messages.</li>
- <li>Be permissive about the input format.</li>
- <li>Point out exactly where the error occurs (especially on large forms).</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
diff --git a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html b/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html
deleted file mode 100644
index 76e202e685..0000000000
--- a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html
+++ /dev/null
@@ -1,786 +0,0 @@
----
-title: How to build custom form widgets
-slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets
-translation_of: Learn/Forms/How_to_build_custom_form_controls
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
-
-<p class="summary">There are many cases where <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">available HTML form widgets</a> are just nThere are many cases where available HTML form widgets are just not enough. If you want to <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">perform advanced styling</a> on some widgets such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you have no choice but to build your own widgets.</p>
-
-<p>In this article, we will see how to build such a widget. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element.</p>
-
-<div class="note">
-<p><strong>Note:</strong> We'll focus on building the widgets, not on how to make the code generic and reusable; that would involve some non-trival JavaScript code and DOM manipulation in an unknown context, and that is out of the scope of this article.</p>
-</div>
-
-<h2 id="Design_structure_and_semantics">Design, structure, and semantics</h2>
-
-<p>Before building a custom widget, you should start by figuring out exactly what you want. This will save you some precious time. In particular, it's important to clearly define all the states of your widget. To do this, it's good to start with an existing widget whose states and behavior are well known, so that you can simply mimic those as much as possible.</p>
-
-<p>In our example, we will rebuild the {{HTMLElement("select")}} element. Here is the result we want to achieve:</p>
-
-<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
-
-<p>This screenshot shows the three main states of our widget: the normal state (on the left); the active state (in the middle) and the open state (on the right).</p>
-
-<p>In terms of behavior, we want our widget to be usable with a mouse as well as with a keyboard, just like any native widget. Let's start by defining how the widget reaches each state:</p>
-
-<dl>
- <dt>The widget is in its normal state when:</dt>
- <dd>
- <ul>
-  <li>the page loads</li>
-  <li>the widget was active and the user clicks anywhere outside the widget</li>
-  <li>the widget was active and the user moves the focus to another widget using the keyboard</li>
- </ul>
-
- <div class="note">
- <p><strong>Note:</strong> Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">Option+Tab combination</a>.</p>
- </div>
- </dd>
- <dt>The widget is in its active state when:</dt>
- <dd>
- <ul>
-  <li>the user clicks on it</li>
-  <li>the user hits the tab key and it gains focus</li>
-  <li>the widget was in its open state and the user clicks on the widget.</li>
- </ul>
- </dd>
- <dt>The widget is in its open state when:</dt>
- <dd>
- <ul>
-  <li>the widget is in any other state than open and the user clicks on it</li>
- </ul>
- </dd>
-</dl>
-
-<p>Once we know how to change states, it is important to define how to change the widget's value:</p>
-
-<dl>
- <dt>The value changes when:</dt>
- <dd>
- <ul>
-  <li>the user clicks on an option when the widget is in the open state</li>
-  <li>the user hits the up or down arrow keys when the widget is in its active state</li>
- </ul>
- </dd>
-</dl>
-
-<p>Finally, let's define how the widget's options will behave:</p>
-
-<ul>
- <li>When the widget is opened, the selected option is highlighted</li>
- <li>When the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state</li>
-</ul>
-
-<p>For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the widget is in its open state? The answer is... nothing. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the widget's behavior are different from the ones who implement it.</p>
-
-<p>Another fun example: what will happen if the user hits the up or down arrow keys while the widget is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. On the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the widget is in its opened state (we have only defined what should happen when the widget is opened, but nothing after that).</p>
-
-<p>In our example, the missing specifications are obvious so we will handle them, but it can be a real problem on exotic new widgets, for which nobody has the slightest idea of what the right behavior is. So it's always good to spend time in this design stage, because if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. If you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to <a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing">perform user tests</a>. This process is called UX Design. If you want to learn more about this topic, you should check out the following helpful resources:</p>
-
-<ul>
- <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
- <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
- <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
-</ul>
-
-<div class="note">
-<p><strong>Note: </strong>Also, in most systems there is a way to open the {{HTMLElement("select")}} element to look at all the available choices (this is the same as clicking the {{HTMLElement("select")}} element with a mouse). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the <code>click</code> event.</p>
-</div>
-
-<h3 id="Defining_the_HTML_structure_and_semantics">Defining the HTML structure and semantics</h3>
-
-<p>Now that the widget's basic functionality has been decided upon, it's time to start building our widget. The first step is to define its HTML structure and to give it some basic semantics. Here is what we need to rebuild a {{HTMLElement("select")}} element:</p>
-
-<pre class="brush: html">&lt;!-- This is our main container for our widget.
-     The tabindex attribute is what allows the user to focus the widget.
-     We'll see later that it's better to set it through JavaScript. --&gt;
-&lt;div class="select" tabindex="0"&gt;
-
-  &lt;!-- This container will be used to display the current value of the widget --&gt;
-  &lt;span class="value"&gt;Cherry&lt;/span&gt;
-
-  &lt;!-- This container will contain all the options available for our widget.
-       Because it's a list, it makes sense to use the ul element. --&gt;
-  &lt;ul class="optList"&gt;
-    &lt;!-- Each option only contains the value to be displayed, we'll see later
-         how to handle the real value that will be sent with the form data --&gt;
-    &lt;li class="option"&gt;Cherry&lt;/li&gt;
-    &lt;li class="option"&gt;Lemon&lt;/li&gt;
-    &lt;li class="option"&gt;Banana&lt;/li&gt;
-    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
-    &lt;li class="option"&gt;Apple&lt;/li&gt;
-  &lt;/ul&gt;
-
-&lt;/div&gt;</pre>
-
-<p>Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we will not bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the widget. For example if you wish to implement the equivalent of the {{HTMLElement("optgroup")}} element.</p>
-
-<h3 id="Creating_the_look_and_feel_using_CSS">Creating the look and feel using CSS</h3>
-
-<p>Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.</p>
-
-<h4 id="Required_styles">Required styles</h4>
-
-<p>The required styles are those necessary to handle the three states of our widget.</p>
-
-<pre class="brush: css">.select {
-  /* This will create a positioning context for the list of options */
-  position: relative;
-
-  /* This will make our widget become part of the text flow and sizable at the same time */
-  display : inline-block;
-}</pre>
-
-<p>We need an extra class <code>active</code> to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.</p>
-
-<pre class="brush: css">.select .active,
-.select:focus {
-  outline: none;
-
-  /* This box-shadow property is not exactly required, however it's so important to be sure
-     the active state is visible that we use it as a default value, feel free to override it. */
-  box-shadow: 0 0 3px 1px #227755;
-}</pre>
-
-<p>Now, let's handle the list of options:</p>
-
-<pre class="brush: css">/* The .select selector here is syntactic sugar to be sure the classes we define are
-   the ones inside our widget. */
-.select .optList {
-  /* This will make sure our list of options will be displayed below the value
-     and out of the HTML flow */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}</pre>
-
-<p>We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.</p>
-
-<pre class="brush: css">.select .optList.hidden {
-  /* This is a simple way to hide the list in an accessible way,
-     we will talk more about accessibility in the end */
-  max-height: 0;
-  visibility: hidden;
-}</pre>
-
-<h4 id="Beautification">Beautification</h4>
-
-<p>So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.</p>
-
-<pre class="brush: css">.select {
-  /* All sizes will be expressed with the em value for accessibility reasons
-     (to make sure the widget remains resizable if the user uses the
-     browser's zoom in a text-only mode). The computations are made
-     assuming 1em == 16px which is the default value in most browsers.
-     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* We need extra room for the down arrow we will add */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* The first declaration is for browsers that do not support linear gradients.
-     The second declaration is because WebKit based browsers haven't unprefixed it yet.
-     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* Because the value can be wider than our widget, we have to make sure it will not
-     change the widget's width */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* And if the content overflows, it's better to have a nice ellipsis. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}</pre>
-
-<p>We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the <code>select</code> class.</p>
-
-<pre class="brush: css">.select:after {
-  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}</pre>
-
-<p>Next, let's style the list of options:</p>
-
-<pre class="brush: css">.select .optList {
-  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
-
-  /* this will reset the default style of the ul element */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* This will ensure that even if the values are smaller than the widget,
-     the list of options will be as large as the widget itself */
-  min-width : 100%;
-
-  /* In case the list is too long, its content will overflow vertically
-     (which will add a vertical scrollbar automatically) but never horizontally
-     (because we haven't set a width, the list will adjust its width automatically.
-     If it can't, the content will be truncated) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}</pre>
-
-<p>For the options, we need to add a <code>highlight</code> class to be able to identify the value the user will pick (or has picked).</p>
-
-<pre class="brush: css">.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}</pre>
-
-<p>So here's the result with our three states:</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Basic state</th>
-   <th scope="col" style="text-align: center;">Active state</th>
-   <th scope="col" style="text-align: center;">Open state</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
-   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
-   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
-  </tr>
-  <tr>
-   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Bring_your_widget_to_life_with_JavaScript">Bring your widget to life with JavaScript</h2>
-
-<p>Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.</p>
-
-<div class="warning">
-<p><strong>Warning:</strong> The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.</p>
-</div>
-
-<div class="note">
-<p><strong>Note:</strong> Creating reusable widgets is something that can be a bit tricky. The <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component draft</a> is one of the answers to this specific issue. <a href="http://x-tags.org/" rel="external" title="http://x-tags.org/">The X-Tag project</a> is a test implementation of this specification; we encourage you to take a look at it.</p>
-</div>
-
-<h3 id="Why_isn't_it_working">Why isn't it working?</h3>
-
-<p>Before we start, it's important to remember something very important about JavaScript: inside a browser, <strong>it's an unreliable technology</strong>. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:</p>
-
-<ul>
- <li>The user has turned off JavaScript: This is the most unusual case ever; very few people turn off JavaScript nowadays.</li>
- <li>The script is not loading. This is one of the most common cases, especially in the mobile world where the network is not very reliable.</li>
- <li>The script is buggy. You should always consider this possibility.</li>
- <li>The script is in conflict with a third party script. This can happen with tracking scripts or any bookmarklets the user uses.</li>
- <li>The script is in conflict with, or is affected by, a browser extension (such as Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension or Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> extension).</li>
- <li>The user is using a legacy browser, and one of the features you require is not supported. This will happen frequently when you make use of cutting-edge APIs.</li>
-</ul>
-
-<p>Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.</p>
-
-<p>In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.</p>
-
-<p>First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.</p>
-
-<pre class="brush: html">&lt;body class="no-widget"&gt;
-  &lt;form&gt;
-    &lt;select name="myFruit"&gt;
-      &lt;option&gt;Cherry&lt;/option&gt;
-      &lt;option&gt;Lemon&lt;/option&gt;
-      &lt;option&gt;Banana&lt;/option&gt;
-      &lt;option&gt;Strawberry&lt;/option&gt;
-      &lt;option&gt;Apple&lt;/option&gt;
-    &lt;/select&gt;
-
-    &lt;div class="select"&gt;
-      &lt;span class="value"&gt;Cherry&lt;/span&gt;
-      &lt;ul class="optList hidden"&gt;
-        &lt;li class="option"&gt;Cherry&lt;/li&gt;
-        &lt;li class="option"&gt;Lemon&lt;/li&gt;
-        &lt;li class="option"&gt;Banana&lt;/li&gt;
-        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
-        &lt;li class="option"&gt;Apple&lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/div&gt;
-  &lt;/form&gt;
-
-&lt;/body&gt;</pre>
-
-<p>Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.</p>
-
-<pre class="brush: css">.widget select,
-.no-widget .select {
-  /* This CSS selector basically says:
-     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
-     - or we have not changed the body class, therefore the body class is still "no-widget",
-       so the elements whose class is "select" must be hidden */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}</pre>
-
-<p>Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the <code>no-widget</code> class and add the <code>widget</code> class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.</p>
-
-<pre class="brush: js">window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});</pre>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Without JS</th>
-   <th scope="col" style="text-align: center;">With JS</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
-   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
-  </tr>
-  <tr>
-   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note:</strong> If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.</p>
-</div>
-
-<h3 id="Making_the_job_easier">Making the job easier</h3>
-
-<p>In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).</p>
-
-<p>If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a> library for example).</p>
-
-<p>The features we plan to use are the following (ordered from the riskiest to the safest):</p>
-
-<ol>
- <li>{{domxref("element.classList","classList")}}</li>
- <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
- <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
- <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
-</ol>
-
-<p>Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. This is important because <code>Array</code> objects support the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an <code>Array</code> and because <code>forEach</code> is so convenient to use, we can easily add the support of <code>forEach</code> to {{domxref("NodeList")}} in order to make our life easier, like so:</p>
-
-<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}</pre>
-
-<p>We weren't kidding when we said it's easy to do.</p>
-
-<h3 id="Building_event_callbacks">Building event callbacks</h3>
-
-<p>The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.</p>
-
-<pre class="brush: js">// This function will be used each time we want to deactivate a custom widget
-// It takes one parameter
-// select : the DOM node with the `select` class to deactivate
-function deactivateSelect(select) {
-
-  // If the widget is not active there is nothing to do
-  if (!select.classList.contains('active')) return;
-
-  // We need to get the list of options for the custom widget
-  var optList = select.querySelector('.optList');
-
-  // We close the list of option
-  optList.classList.add('hidden');
-
-  // and we deactivate the custom widget itself
-  select.classList.remove('active');
-}
-
-// This function will be used each time the user wants to (de)activate the widget
-// It takes two parameters:
-// select : the DOM node with the `select` class to activate
-// selectList : the list of all the DOM nodes with the `select` class
-function activeSelect(select, selectList) {
-
-  // If the widget is already active there is nothing to do
-  if (select.classList.contains('active')) return;
-
-  // We have to turn off the active state on all custom widgets
-  // Because the deactivateSelect function fulfill all the requirement of the
-  // forEach callback function, we use it directly without using an intermediate
-  // anonymous function.
-  selectList.forEach(deactivateSelect);
-
-  // And we turn on the active state for this specific widget
-  select.classList.add('active');
-}
-
-// This function will be used each time the user wants to open/closed the list of options
-// It takes one parameter:
-// select : the DOM node with the list to toggle
-function toggleOptList(select) {
-
-  // The list is kept from the widget
-  var optList = select.querySelector('.optList');
-
-  // We change the class of the list to show/hide it
-  optList.classList.toggle('hidden');
-}
-
-// This function will be used each time we need to highlight an option
-// It takes two parameters:
-// select : the DOM node with the `select` class containing the option to highlight
-// option : the DOM node with the `option` class to highlight
-function highlightOption(select, option) {
-
-  // We get the list of all option available for our custom select element
-  var optionList = select.querySelectorAll('.option');
-
-  // We remove the highlight from all options
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // We highlight the right option
-  option.classList.add('highlight');
-};</pre>
-
-<p>That's all you need in order to handle the various states of the custom widget.</p>
-
-<p>Next, we bind these functions to the appropriate events:</p>
-
-<pre class="brush: js">// We handle the event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-
-    // as well as all its `option` elements
-    var optionList = select.querySelectorAll('.option');
-
-    // Each time a user hovers their mouse over an option, we highlight the given option
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Note: the `select` and `option` variable are closures
-        // available in the scope of our function call.
-        highlightOption(select, option);
-      });
-    });
-
-    // Each times the user click on a custom select element
-    select.addEventListener('click', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We toggle the visibility of the list of options
-      toggleOptList(select);
-    });
-
-    // In case the widget gain focus
-    // The widget gains the focus each time the user clicks on it or each time
-    // they use the tabulation key to access the widget
-    select.addEventListener('focus', function (event) {
-      // Note: the `select` and `selectList` variable are closures
-      // available in the scope of our function call.
-
-      // We activate the widget
-      activeSelect(select, selectList);
-    });
-
-    // In case the widget loose focus
-    select.addEventListener('blur', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We deactivate the widget
-      deactivateSelect(select);
-    });
-  });
-});</pre>
-
-<p>At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Live example</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Handling_the_widget's_value">Handling the widget's value</h3>
-
-<p>Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.</p>
-
-<p>The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.</p>
-
-<p>As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:</p>
-
-<pre class="brush: js">// This function updates the displayed value and synchronizes it with the native widget.
-// It takes two parameters:
-// select : the DOM node with the class `select` containing the value to update
-// index  : the index of the value to be selected
-function updateValue(select, index) {
-  // We need to get the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  // We also need  to get the value placeholder of our custom widget
-  var value = select.querySelector('.value');
-
-  // And we need the whole list of options
-  var optionList = select.querySelectorAll('.option');
-
-  // We set the selected index to the index of our choice
-  nativeWidget.selectedIndex = index;
-
-  // We update the value placeholder accordingly
-  value.innerHTML = optionList[index].innerHTML;
-
-  // And we highlight the corresponding option of our custom widget
-  highlightOption(select, optionList[index]);
-};
-
-// This function returns the current selected index in the native widget
-// It takes one parameter:
-// select : the DOM node with the class `select` related to the native widget
-function getIndex(select) {
-  // We need to access the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};</pre>
-
-<p>With these two functions, we can bind the native widgets to the custom ones:</p>
-
-<pre class="brush: js">// We handle event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // We make our custom widget focusable
-    select.tabIndex = 0;
-
-    // We make the native widget no longer focusable
-    select.previousElementSibling.tabIndex = -1;
-
-    // We make sure that the default selected value is correctly displayed
-    updateValue(select, selectedIndex);
-
-    // Each time a user clicks on an option, we update the value accordingly
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // When the user hits the down arrow, we jump to the next option
-      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
-
-      // When the user hits the up arrow, we jump to the previous option
-      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});</pre>
-
-<p>In the code above, it's worth noting the use of the <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.</p>
-
-<p>With that, we're done! Here's the result:</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Live example</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td>
-  </tr>
- </tbody>
-</table>
-
-<p>But wait a second, are we really done?</p>
-
-<h2 id="Make_it_accessible">Make it accessible</h2>
-
-<p>We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!</p>
-
-<p>Fortunately, there is a solution and it's called <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA stands for "Accessible Rich Internet Application", and it's <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C specification</a> specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.</p>
-
-<h3 id="The_role_attribute">The <code>role</code> attribute</h3>
-
-<p>The key attribute used by <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute. The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the <code>option</code> role).</p>
-
-<p>It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role <code>grid</code>, and the {{HTMLElement("ul")}} element matches the role <code>list</code>. Because we use a {{HTMLElement("ul")}} element, we want to make sure the <code>listbox</code> role of our widget will supersede the <code>list</code> role of the {{HTMLElement("ul")}} element. To that end, we will use the role <code>presentation</code>. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.</p>
-
-<p>To support the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role, we just have to update our HTML like this:</p>
-
-<pre class="brush: html">&lt;!-- We add the role="listbox" attribute to our top element --&gt;
-&lt;div class="select" role="listbox"&gt;
-  &lt;span class="value"&gt;Cherry&lt;/span&gt;
-  &lt;!-- We also add the role="presentation" to the ul element --&gt;
-  &lt;ul class="optList" role="presentation"&gt;
-    &lt;!-- And we add the role="option" attribute to all the li elements --&gt;
-    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;</pre>
-
-<div class="note">
-<p><strong>Note:</strong> Including both the <code>role</code> attribute and a <code>class</code> attribute is only necessary if you want to support legacy browsers that do not support the <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p>
-</div>
-
-<h3 id="The_aria-selected_attribute">The <code>aria-selected</code> attribute</h3>
-
-<p>Using the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute is not enough. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: <code>aria-selected</code>.</p>
-
-<p>The <code>aria-selected</code> attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our <code>updateValue()</code> function:</p>
-
-<pre class="brush: js">function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // We make sure that all the options are not selected
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // We make sure the chosen option is selected
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};</pre>
-
-<p>Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Live example</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).</p>
-
-<p>Here are a few libraries you should consider before coding your own:</p>
-
-<ul>
- <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
- <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
- <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
- <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">And many more…</a></li>
-</ul>
-
-<p>If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
-
-<p> </p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
-
-<p> </p>
diff --git a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html b/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html
deleted file mode 100644
index 33a562813c..0000000000
--- a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html
+++ /dev/null
@@ -1,304 +0,0 @@
----
-title: Como estruturar um formulário HTML
-slug: Web/Guide/HTML/Forms/How_to_structure_an_HTML_form
-tags:
-  - Beginner
-  - CodingScripting
-  - Example
-  - Forms
-  - Guide
-  - HTML
-  - Learn
-  - Structure
-  - Web
-translation_of: Learn/Forms/How_to_structure_a_web_form
----
-<div>
-<p>{{LearnSidebar}}</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p>
-</div>
-
-<p class="summary">Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-Requisitos:</th>
-   <td>Leitura sobre computação básica e <a href="/docs/Learn/HTML/Introduction_to_HTML">entendimento básico de HTML.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender como estruturar formulários HTML e entregar a eles semântica de forma a torná-los úteis e acessíveis.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e <a href="/pt-BR/docs/Learn/Accessibility">acessível</a>.</p>
-
-<h2 id="O_elemento_&lt;form>">O elemento &lt;form&gt; </h2>
-
-<p>O elemento {{HTMLElement("form")}} é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos {{HTMLElement("form")}} e de implementar ganchos especiais para torná-los mais fáceis de usar.</p>
-
-<p>Nós já vimos isto em um artigo anterior:</p>
-
-<div class="note"><strong>Nota:</strong> É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.</div>
-
-<p>Note que, sempre é possível usar um widget de formulário fora de um elemento {{HTMLElement("form")}} mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.</p>
-
-<div class="note">
-<p><strong>Nota: </strong>O HTML 5 introduziu o atributo <code>form</code> no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um {{ HTMLElement("form") }}. Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.</p>
-</div>
-
-<h2 id="Os_elementos_&lt;fieldset>_e_&lt;legend>">Os elementos &lt;fieldset&gt; e &lt;legend&gt;</h2>
-
-<p>O elemento {{HTMLElement ("fieldset")}} é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento {{HTMLElement ("fieldset")}} pode ser rotulado com um elemento {{HTMLElement ("legend")}}. O elemento {{HTMLElement ("legend")}} descreve formalmente a finalidade do elemento {{HTMLElement ("fieldset")}} ao qual está incluído.</p>
-
-<p>Muitas tecnologias assistivas usarão o elemento {{HTMLElement ("legend")}} como se fosse parte da etiqueta de cada widget dentro do elemento {{HTMLElement ("fieldset")}} correspondente. Por exemplo, alguns leitores de tela, como <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> ou <a href="http://www.nvda-project.org/">NVDA</a>, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.</p>
-
-<p>Aqui está um pequeno exemplo:</p>
-
-<pre class="brush:html; notranslate">&lt;form&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Fruit juice size&lt;/legend&gt;
-    &lt;p&gt;
-      &lt;input type="radio" name="size" id="size_1" value="small" /&gt;
-      &lt;label for="size_1"&gt;Small&lt;/label&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="radio" name="size" id="size_2" value="medium" /&gt;
-      &lt;label for="size_2"&gt;Medium&lt;/label&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="radio" name="size" id="size_3" value="large" /&gt;
-      &lt;label for="size_3"&gt;Large&lt;/label&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
-
-<p>Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.</p>
-
-<p>O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento {{HTMLElement ("fieldset")}}. Existem outros casos de uso e, em geral, o elemento {{HTMLElement ("fieldset")}} também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento {{HTMLElement ("fieldset")}} é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.</p>
-
-<h2 id="O_elemento_&lt;label>">O elemento &lt;label&gt; </h2>
-
-<p>Como vimos no artigo anterior, o elemento {{HTMLElement ("label")}} é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:</p>
-
-<pre class="notranslate"><code>&lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" id="name" name="user_name"&gt;</code></pre>
-
-<p>Com o &lt;label&gt; associado corretamente ao &lt;input&gt; por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".</p>
-
-<p>Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.</p>
-
-<p>Observe que um widget pode ser aninhado dentro de seu elemento &lt;label&gt;, assim:</p>
-
-<pre class="notranslate"><code>&lt;label for="name"&gt;
-  Name: &lt;input type="text" id="name" name="user_name"&gt;
-&lt;/label&gt;</code></pre>
-
-<p>Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.</p>
-
-<h3 id="Labels_são_clicáveis_também_!.">Labels são clicáveis também !.</h3>
-
-<p>Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.</p>
-
-<p>Por exemplo:</p>
-
-<pre class="notranslate"><code>&lt;form&gt;
-  &lt;p&gt;
-    &lt;label for="taste_1"&gt;I like cherry&lt;/label&gt;
-    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="1"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="taste_2"&gt;I like banana&lt;/label&gt;
-    &lt;input type="checkbox" id="taste_2" name="taste_banana" value="2"&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</code></pre>
-
-<div class="blockIndicator note">
-<p><strong>Nota: Você pode encontrar este exemplo em</strong> <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">ver ao vivo também</a>).</p>
-</div>
-
-<h3 id="Múltiplos_labels">Múltiplos labels</h3>
-
-<p>Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento {{htmlelement ("label")}}.</p>
-
-<p>Vamos considerar este exemplo:</p>
-
-<pre class="notranslate"><code>&lt;p&gt;Required fields are followed by &lt;abbr title="required"&gt;*&lt;/abbr&gt;.&lt;/p&gt;
-
-&lt;!-- So this: --&gt;
-&lt;div&gt;
-  &lt;label for="username"&gt;Name:&lt;/label&gt;
-  &lt;input type="text" name="username"&gt;
-  &lt;label for="username"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
-&lt;/div&gt;
-
-&lt;!-- would be better done like this: --&gt;
-&lt;div&gt;
-  &lt;label for="username"&gt;
-    &lt;span&gt;Name:&lt;/span&gt;
-    &lt;input id="username" type="text" name="username"&gt;
-    &lt;abbr title="required"&gt;*&lt;/abbr&gt;
-  &lt;/label&gt;
-&lt;/div&gt;
-
-&lt;!-- But this is probably best: --&gt;
-&lt;div&gt;
-  &lt;label for="username"&gt;Name: &lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
-  &lt;input id="username" type="text" name="username"&gt;
-&lt;/div&gt;</code></pre>
-
-<p>The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "<em>star</em>" or "<em>required</em>", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).</p>
-
-<ul>
- <li>In the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. The multiple <code>&lt;label&gt;</code>elements confuse the screenreader.</li>
- <li>In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the input has a label associated with it.</li>
- <li>The third example is best — the actual label is read out all together, and the label read out with the input is "name star edit text".</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.</p>
-</div>
-
-<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">see it live also</a>). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!</p>
-
-<h2 dir="ltr" id="Estruturas_comuns_HTML_usadas_com_formulários">Estruturas comuns HTML usadas com formulários</h2>
-
-<p dir="ltr" id="tw-target-text">Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.</p>
-
-<p>Como você pode ver nos exemplos, é comum envolver um <em>label</em> e seu <em>widget</em> com um elemento {{HTMLElement("div")}}. Os elementos {{HTMLElement("p")}} também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários <em>checkboxes</em> ou <em>radio buttons</em>).</p>
-
-<p>Além do elemento {{HTMLElement("fieldset")}}, uma prática comum também é usar títulos HTML (por exemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}) e seção (por exemplo, {{htmlelement("section")}}) para estruturar um formulário complexo.</p>
-
-<p>Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.</p>
-
-<p>Temos cada seção desacoplada da funcionalidade contida nos elementos de {{htmlelement("section")}} e um {{htmlelement("fieldset")}} para conter os <em>radio buttons</em>.</p>
-
-<h3 id="Active_learning_building_a_form_structure">Active learning: building a form structure</h3>
-
-<p>Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a>). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.</p>
-
-<ol>
- <li>To start with, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">blank template file</a> and the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS for our payment form</a> in a new directory on your computer.</li>
- <li>First of all, apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}:
-  <pre class="notranslate"><code>&lt;link href="payment-form.css" rel="stylesheet"&gt;</code></pre>
- </li>
- <li>Next, start your form off by adding the outer {{htmlelement("form")}} element:
-  <pre class="notranslate"><code>&lt;form&gt;
-
-&lt;/form&gt;</code></pre>
- </li>
- <li>Inside the <code>&lt;form&gt;</code> tags, start by adding a heading and paragraph to inform users how required fields are marked:
-  <pre class="notranslate"><code>&lt;h1&gt;Payment form&lt;/h1&gt;
-&lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;</code></pre>
- </li>
- <li>Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. Last, we have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, plus a password input for entering a password. Add this code to your form now:
-  <pre class="notranslate"><code>&lt;section&gt;
-    &lt;h2&gt;Contact information&lt;/h2&gt;
-    &lt;fieldset&gt;
-      &lt;legend&gt;Title&lt;/legend&gt;
-      &lt;ul&gt;
-          &lt;li&gt;
-            &lt;label for="title_1"&gt;
-              &lt;input type="radio" id="title_1" name="title" value="M." &gt;
-              Mister
-            &lt;/label&gt;
-          &lt;/li&gt;
-          &lt;li&gt;
-            &lt;label for="title_2"&gt;
-              &lt;input type="radio" id="title_2" name="title" value="Ms."&gt;
-              Miss
-            &lt;/label&gt;
-          &lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/fieldset&gt;
-    &lt;p&gt;
-      &lt;label for="name"&gt;
-        &lt;span&gt;Name: &lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="text" id="name" name="username"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="mail"&gt;
-        &lt;span&gt;E-mail: &lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="email" id="mail" name="usermail"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="pwd"&gt;
-        &lt;span&gt;Password: &lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="password" id="pwd" name="password"&gt;
-    &lt;/p&gt;
-&lt;/section&gt;</code></pre>
- </li>
- <li>Now we'll turn to the second <code>&lt;section&gt;</code> of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a <code>&lt;p&gt;</code>. The first is a drop down menu ({{htmlelement("select")}}) for selecting credit card type. the second is an <code>&lt;input&gt;</code> element of type number, for entering a credit card number. The last one is an <code>&lt;input&gt;</code> element of type <code>date</code>, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section:
-  <pre class="notranslate"><code>&lt;section&gt;
-    &lt;h2&gt;Payment information&lt;/h2&gt;
-    &lt;p&gt;
-      &lt;label for="card"&gt;
-        &lt;span&gt;Card type:&lt;/span&gt;
-      &lt;/label&gt;
-      &lt;select id="card" name="usercard"&gt;
-        &lt;option value="visa"&gt;Visa&lt;/option&gt;
-        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
-        &lt;option value="amex"&gt;American Express&lt;/option&gt;
-      &lt;/select&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="number"&gt;
-        &lt;span&gt;Card number:&lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="number" id="number" name="cardnumber"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="date"&gt;
-        &lt;span&gt;Expiration date:&lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-        &lt;em&gt;formatted as yyyy/mm/dd&lt;/em&gt;
-      &lt;/label&gt;
-      &lt;input type="date" id="date" name="expiration"&gt;
-    &lt;/p&gt;
-&lt;/section&gt;</code></pre>
- </li>
- <li>The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type <code>submit</code>, for submitting the form data. Add this to the bottom of your form now:
-  <pre class="notranslate"><code>&lt;p&gt; &lt;button type="submit"&gt;Validate the payment&lt;/button&gt; &lt;/p&gt;</code></pre>
- </li>
-</ol>
-
-<p>You can see the finished form in action below (also find it on GitHub — see our payment-form.html <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> and <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">running live</a>):</p>
-
-<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.</p>
-
-<h2 id="See_Also">See Also</h2>
-
-<ul>
- <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
diff --git a/files/pt-br/web/guide/html/forms/index.html b/files/pt-br/web/guide/html/forms/index.html
deleted file mode 100644
index 15bd243566..0000000000
--- a/files/pt-br/web/guide/html/forms/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Formulários da Web - Trabalhando com dados do usuário
-slug: Web/Guide/HTML/Forms
-tags:
-  - Aprender
-  - Funcionalidades
-  - Guía
-  - HTML
-  - Iniciante
-  - Web
-  - formulários
-translation_of: Learn/Forms
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary"><span class="seoSummary">Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms.</span> HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  <span>nem sempre é óbvio como usá-los em seu pleno potencia</span>l. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!</p>
-
-<h2 id="Pré-requisitos">Pré-requisitos</h2>
-
-<p>Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p>
-
-<div class="note">
-<p><strong>Dica</strong>: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/pt-BR/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guias_básicos">Guias básicos</h2>
-
-<p>Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.</p>
-
-<dl>
- <dt><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Meu primeiro formulário HTML</a></dt>
- <dd>O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.</dd>
- <dt><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Como estruturar um formulário HTML</span></a></dt>
- <dd><span>Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.</span></dd>
- <dt><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Os form widgets nativos </span></a></dt>
- <dd>Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.</dd>
- <dt><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados</span></a></dt>
- <dd><span>Este artigo mostra o que acontece quando um usuário submete (envia) um formulário </span>—<span> para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.</span></dd>
- <dt><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados nos formulários HTML</a></dt>
- <dd>Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.</dd>
-</dl>
-
-<h2 id="Guias_avançados">Guias avançados</h2>
-
-<p>Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.</p>
-
-<dl>
- <dt><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Como criar widgets HTML form personalizados</a></dt>
- <dd>Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.</dd>
- <dt><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando HTML forms através do JavaScript</a></dt>
- <dd>Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)</dd>
- <dt><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formulários HTML para browsers antigos</a></dt>
- <dd>Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.</dd>
- <dt><a href="/pt-BR/docs/HTML/Forms_in_HTML">Novidades em formulários no HTML5</a></dt>
- <dd>Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.</dd>
-</dl>
-
-<h2 id="Guias_de_estilização_de_formulários">Guias de estilização de formulários</h2>
-
-<p>Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre <a href="/pt-BR/docs/Aprender/CSS">CSS</a>, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilizando formulários HTML</a></dt>
- <dd>Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.</dd>
- <dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avançados para HTML forms</a></dt>
- <dd>Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.</dd>
- <dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabela de compatibilidade das Propriedades dos widgets</a></dt>
- <dd>Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.</dd>
-</dl>
-
-<h2 id="Avaliações">Avaliações</h2>
-
-<p>A definir.</p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/pt-BR/docs/Web/HTML/Element#Formulários">Referência de elementos de formulário HTML</a></li>
-</ul>
diff --git a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html b/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html
deleted file mode 100644
index 31ef58aa7c..0000000000
--- a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html
+++ /dev/null
@@ -1,270 +0,0 @@
----
-title: Meu primeiro formulário HTML
-slug: Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML
-translation_of: Learn/Forms/Your_first_form
----
-<p>Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o <a href="/pt-BR/docs/HTML/Introduction">básico de HTML</a> e <a href="/pt-BR/docs/Web/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">CSS</a>.</p>
-
-<h2 id="Antes_de_começarmos">Antes de começarmos</h2>
-
-<h3 id="O_que_são_formulários_HTML">O que são formulários HTML?</h3>
-
-<p>Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.</p>
-
-<p>Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.</p>
-
-<h3 id="O_que_você_precisa_para_trabalhar_com_formulários">O que você precisa para trabalhar com formulários?</h3>
-
-<p>Você não precisa de nada mais do que o que é requisitado para trabalhar com HTML: Um editor de texto e um navegador. É claro, que se você esta acostumado a usá-los você pode ter vantagens de uma IDE completa como <a href="http://www.microsoft.com/visualstudio" rel="external" title="http://www.microsoft.com/visualstudio">Visual Studio</a>, <a href="http://www.eclipse.org" rel="external" title="http://www.eclipse.org">Eclipse</a>, <a href="http://www.aptana.com/" rel="external" title="http://www.aptana.com/">Aptana</a>, etc., mas cabe somente a você.</p>
-
-<p>A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: <a href="/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data">Envio e recuperação de dados do formulário</a>.</p>
-
-<h2 id="Desenhando_seu_formulário">Desenhando seu formulário</h2>
-
-<p>Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: <strong>peça apenas o que é absolutamente necessário</strong>.<br>
- A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo  cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:</p>
-
-<ul>
- <li>A Smashing Magazine tem <a href="http://uxdesign.smashingmagazine.com/tag/forms/">ótimos artigos sobre UX</a> nos formulários, mas talvez o mais importante é o <a href="https://translate.google.com/translate?sl=en&amp;tl=pt&amp;js=y&amp;prev=_t&amp;hl=pt-BR&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.smashingmagazine.com%2Ftag%2Fforms%2F&amp;edit-text=&amp;act=url">Extenso Guia para a usabilidade em formulários Web</a>.</li>
- <li>UXMatters também é um recurso muito atencioso com bons conselhos de <a href="https://translate.google.com/translate?sl=en&amp;tl=pt&amp;js=y&amp;prev=_t&amp;hl=pt-BR&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.uxmatters.com%2Fmt%2Farchives%2F2012%2F05%2F7-basic-best-practices-for-buttons.php&amp;edit-text=&amp;act=url">melhores práticas básicas </a>para conceitos complexos, tais como <a href="https://translate.google.com/translate?hl=pt-BR&amp;sl=en&amp;tl=pt&amp;u=http%3A%2F%2Fwww.uxmatters.com%2Fmt%2Farchives%2F2010%2F03%2Fpagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">formulários de várias páginas </a>.</li>
-</ul>
-
-<p>Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.</p>
-
-<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p>
-
-<p>O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.</p>
-
-<h2 id="Sujar_as_mãos_com_HTML">Sujar as mãos com HTML</h2>
-
-<p><br>
- Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos {{HTMLElement("form")}} , {{HTMLElement("label")}} , {{HTMLElement("input")}} , {{HTMLElement("textarea")}} , e {{HTMLElement("button")}} .</p>
-
-<h3 id="O_Elemento_HTMLElement(form)">O Elemento {{HTMLElement("form")}} </h3>
-
-<p>Todos formulários HTML começam com um elemento {{HTMLElement("form")}} como este:</p>
-
-<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
-
-&lt;/form&gt;</pre>
-
-<p>Este elemento define um formulário. É um elemento de container como um elemento {{HTMLElement ("div")}} ou {{HTMLElement ("p")}} , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo <code><em>action </em></code>e o atributo <code><em>method</em></code>.</p>
-
-<ul>
- <li>O atributo <em><strong>action </strong></em>define o local (uma URL) em que os dados recolhidos do formulário devem ser enviados.</li>
- <li>O atributo <em><strong>method</strong></em> define qual o método HTTP para enviar os dados (ele pode ser "<strong>GET</strong>" ou "<strong>POST</strong>" (veja as diferenças <a href="http://www.comocriarsites.com/html/como-funciona-os-metodos-get-e-post-diferencas/">aqui</a>).</li>
-</ul>
-
-<p>Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo <a href="/pt-BR/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviando e recebendo dados de um formulário</a></p>
-
-<h3 id="Adicionar_campos_com_os_elementos_HTMLElement(label)_HTMLElement(input)_e_HTMLElement(textarea)">Adicionar campos com os elementos {{HTMLElement("label")}} , {{HTMLElement("input")}} , e {{HTMLElement("textarea")}} </h3>
-
-<p>O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").</p>
-
-<p>Em termos de código HTML, teremos algo assim:</p>
-
-<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
-    &lt;div&gt;
-        &lt;label for="nome"&gt;Nome:&lt;/label&gt;
-        &lt;input type="text" id="nome" /&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;label for="email"&gt;E-mail:&lt;/label&gt;
-        &lt;input type="email" id="email" /&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
-        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
-    &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Os elementos  {{HTMLElement ("div")}} estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo <em><strong>for</strong></em> em todos os elementos {{HTMLElement ("label")}} ; é uma maneira para vincular uma <strong><em>label</em></strong> à um campo do formulário. Este atributo faz referência ao <em><strong>id</strong></em> do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>(en).</p>
-
-<p>No  elemento {{HTMLElement ("input")}} , o atributo mais importante é o atributo <code><em><strong>type</strong></em></code>. Esse atributo é extremamente importante porque define a forma como o elemento  {{HTMLElement ("input")}} se comporta. Ele pode mudar radicalmente o elemento,  então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a>. Em nosso exemplo, nós usamos somente o  <code><strong>type<em>=</em></strong>"<em><strong>text</strong></em>",</code> valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o <code><strong>type<em>=</em></strong>"<strong><em>email</em></strong>"</code> que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados de formulário</a>.</p>
-
-<p>Por último, mas não menos importante, observe a sintaxe de <code><strong>&lt;input /&gt;</strong> </code> e <code><strong>&lt;textarea&gt; &lt;/ textarea&gt;</strong>.</code> Esta é uma das esquisitices do HTML. A tag<strong> <code>&lt;input /&gt;</code> </strong>é um elemento que se  auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "<strong>/</strong>" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo {{HTMLElement ("textarea")}} não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento {{HTMLElement ("input")}} você tem que usar o atributo <code><em><strong>value</strong></em> </code>como este:</p>
-
-<pre class="brush:html;">&lt;input type="text" value="Por padrão, este elemento será preenchido com este texto " /&gt;</pre>
-
-<p>Pelo contrário, se você deseja definir o valor padrão de um elemento {{HTMLElement ("textarea")}} , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento {{HTMLElement ("textarea")}} , como abaixo:</p>
-
-<pre class="brush:html;">&lt;textarea&gt;Por padrão, este elemento será preenchido com este texto &lt;/textarea&gt;</pre>
-
-<h3 id="E_um_elemento_HTMLElement(button)_para_concluir">E um elemento {{HTMLElement("button")}} para concluir</h3>
-
-<p>O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento {{HTMLElement ("button")}} :</p>
-
-<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
-    &lt;div&gt;
-        &lt;label for="name"&gt;Nome:&lt;/label&gt;
-        &lt;input type="text" id="name" /&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
-        &lt;input type="email" id="mail" /&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
-        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
-    &lt;/div&gt;
-    &lt;div class="button"&gt;
-        &lt;button type="submit"&gt;Enviar sua mensagem&lt;/button&gt;
-    &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Um botão pode ser de três tipos: <strong><code>submit</code></strong>, <strong><code>reset</code></strong>, ou <strong><code>button</code></strong>.</p>
-
-<ul>
- <li>Um clique sobre um botão de <strong><code>submit</code> </strong>envia os dados do formulário para a página de web definida pelo atributo <code><strong>action </strong></code>do elemento {{HTMLElement ("form")}} .</li>
- <li>Um clique sobre um botão de <strong><code>reset </code></strong>redefine imediatamente todos os campos do formulário para o seu valor padrão. De um ponto de vista na usabilidade do usuário(UX), isso é considerado uma má prática.</li>
- <li>Um clique em um botão do tipo <code><strong>button</strong></code> faz ...ops, nada! Isso soa bobo, mas é incrivelmente útil para construir botões personalizados com JavaScript, ou seja, ele pode assumir qualquer comportamento através desta linguagem.</li>
-</ul>
-
-<p>Note que você também pode usar o elemento  {{HTMLElement ("input")}} com o tipo correspondente para produzir um botão. A principal diferença com o elemento {{HTMLElement ("button")}} é que o elemento {{HTMLElement ("input")}} permite apenas texto sem formatação como seu valor, enquanto que o elemento  {{HTMLElement ("button")}} permite que o conteúdo HTML completo como seu valor.</p>
-
-<h2 id="Vamos_deixar_um_pouco_mais_legal_com_CSS">Vamos deixar um pouco mais legal com CSS</h2>
-
-<p>Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.</p>
-
-<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p>
-
-<p>Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:</p>
-
-<p>Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:</p>
-
-<pre class="brush:css;">form {
-    /* Apenas para centralizar o form na página */
-    margin: 0 auto;
-    width: 400px;
-    /* Para ver as bordas do formulário */
-    padding: 1em;
-    border: 1px solid #CCC;
-    border-radius: 1em;
-}</pre>
-
-<p>Então, adicionaremos algum espaço entre cada conjunto de campos do form:</p>
-
-<pre class="brush:css;">form div + div {
-    margin-top: 1em;
-}</pre>
-
-<p>Agora vamos focar nas <strong><code><em>labels</em></code></strong>. Para fazer o nosso formulário mais legível, é considerada a melhor prática ter todas as etiquetas do mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinhá-los para a direita, mas em alguns casos, o alinhamento à esquerda pode ficar bem também.</p>
-
-<pre class="brush:css;">label {
-    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}</pre>
-
-<p>Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios  campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre  estilização de formulários HTML, leia o artigo <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a>.</p>
-
-<p>Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:</p>
-
-<pre class="brush:css;">input, textarea {
-    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
-    font: 1em sans-serif;
-
-    /* Para dar o mesmo tamanho a todos os campo de texto */
-    width: 300px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    /* Para harmonizar o look &amp; feel das bordas nos campos de texto*/
-    border: 1px solid #999;
-}</pre>
-
-<p>Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.</p>
-
-<pre class="brush:css;">input:focus, textarea:focus {
-    /* Dar um pouco de destaque nos elementos ativos */
-    border-color: #000;
-}</pre>
-
-<p>Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento  {{HTMLElement ("textarea")}} é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a <code><em>label </em></code>e o campo, temos que alterar a propriedade  <em>vertical-align</em> do {{HTMLElement ("textarea")}} para <em>top</em>.</p>
-
-<p>Observe também o uso da propriedade de <em>resize</em>, que é uma forma de permitir que os usuários redimensionar um elemento {{HTMLElement ("textarea")}}.</p>
-
-<pre class="brush:css;">textarea {
-    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
-    vertical-align: top;
-
-    /* Para dar espaço suficiente para digitar algum texto */
-    height: 5em;
-
-    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
-    resize: vertical;
-}</pre>
-
-<p>Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma {{HTMLElement ("div")}} com uma classe css <em><code>button</code></em>. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma {{HTMLElement ("label")}}. Isso é feito utilizando <code><em><strong>padding </strong></em></code>e <code><em><strong>margin</strong></em></code>.</p>
-
-<pre class="brush:css;">.button {
-    /* Para posicionar os botões para a mesma posição dos campos de texto */
-    padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
-}
-button {
-    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
-    margin-left: .5em;
-}</pre>
-
-<p>Agora o nosso formulário parece muito mais bonito.</p>
-
-<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p>
-
-<h2 id="sect1"> </h2>
-
-<h2 id="Enviar_os_dados_para_seu_servidor_web">Enviar os dados para seu servidor web</h2>
-
-<p>A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.</p>
-
-<p>O elemento {{HTMLElement("form")}} definirá onde e como enviar os dados, graças ao atribudo <em><strong>action</strong></em> e ao atributo <em><strong>method</strong></em></p>
-
-<p>Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.</p>
-
-<p>Então, para nomear seus dados, você precisará usar o atributo <em><strong><code>name </code></strong></em>em cada campo do formulário que irá recolher uma parte específica dos dados:</p>
-
-<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
-    &lt;div&gt;
-        &lt;label for="nome"&gt;Nome:&lt;/label&gt;
-        &lt;input type="text" id="nome" name="usuario_nome" /&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;label for="email"&gt;E-mail:&lt;/label&gt;
-        &lt;input type="email" id="email" name="usuario_email" /&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
-        &lt;textarea id="msg" name="usuario_msg"&gt;&lt;/textarea&gt;
-    &lt;/div&gt;
-
-    &lt;div class="button"&gt;
-        &lt;button type="submit"&gt;Enviar sua mensagem&lt;/button&gt;
-    &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario_nome", "usuario_email" e "usuario_msg" e os dados serão enviados para a URL "<em><strong>/pagina-processa-dados-do-form</strong></em>" com o método HTTP:  <strong>POST </strong>.</p>
-
-<p>No lado do servidor, o script na URL "<em><strong>/pagina-processa-dados-do-form</strong></em>" receberá os dados como uma lista de itens 3 de chave/valor contidos na solicitação HTTP. A forma como o script  vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados de formulário</span></a>.</p>
-
-<p> </p>
-
-<h2 id="Conclusão">Conclusão</h2>
-
-<p>Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.</p>
-
-<table style="height: 267px; width: 772px;">
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Live example</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}</td>
-  </tr>
-  <tr>
-  </tr>
- </tbody>
-</table>
-
-<p>Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui <a href="/pt-BR/docs/Web/Guide/HTML/Forms">e os outros artigos deste guia</a> irá ajudá-lo a dominar o resto.</p>
diff --git a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html b/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html
deleted file mode 100644
index ebefe55869..0000000000
--- a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html
+++ /dev/null
@@ -1,701 +0,0 @@
----
-title: Os widgets nativos
-slug: Web/Guide/HTML/Forms/Os_widgets_nativos
-tags:
-  - Aprender
-  - Contrôles
-  - Exemplos
-  - Guía
-  - HTML
-  - Iniciantes
-  - Intermediário
-  - Web
-translation_of: Learn/Forms/Basic_native_form_controls
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
-
-<p class="summary">Veremos agora, detalhadamente, a funcionalidade dos diferentes widgets dos formulários, observando as opções disponíveis para coletar diferentes tipos de dados. Este guia é um tanto exaustivo, cobrindo todos os widgets de formulários nativos disponíveis.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Alfabetização básica em informática e um <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">entendimento básico de HTML.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender quais são os widgets nativos de formulário disponiveis nos navegadores para coletar dados, e como implementa-los usando HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<p><span class="tlid-translation translation" lang="pt"><span title="">Aqui vamos nos concentrar nos widgets de formulário baseados em navegador, mas como os formulários HTML são muito limitados e a qualidade da implementação pode ser muito diferente de navegador para navegador, os desenvolvedores da Web às vezes criam seus próprios widgets de formulários </span></span>— Veja <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a> <span class="tlid-translation translation" lang="pt"><span title="">posteriormente neste mesmo módulo para obter mais idéias sobre isso.</span></span></p>
-
-<div class="note">
-<p><strong>Nota</strong>: A maioria dos recursos discutidos neste artigo possui <span class="tlid-translation translation" lang="pt"><span title="">amplo suporte nos navegadores</span></span>; destacaremos as exceções existentes. Se você quiser mais detalhes, consulte nosso artigo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">referência aos elementos de formulário HTML</a>, <span class="tlid-translation translation" lang="pt"><span title="">e, em particular, nossa extensa referência de </span></span><a href="/en-US/docs/Web/HTML/Element/input">tipos &lt;input&gt;</a>.</p>
-</div>
-
-<h2 id="Atributos_comuns">Atributos comuns</h2>
-
-<p><span class="tlid-translation translation" lang="pt"><span title="">Muitos dos elementos usados para definir widgets de formulário têm seus próprios atributos</span></span>. Entretanto, <span class="tlid-translation translation" lang="pt"><span title="">há um conjunto de atributos comuns a todos os elementos do formulário</span></span>, os quais permitem certo controle sobre os widgets. <span class="tlid-translation translation" lang="pt"><span title="">Aqui está uma lista desses atributos comuns</span></span>:</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Nome do atributo</th>
-   <th scope="col">Valor padrão</th>
-   <th scope="col">Descrição</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>autofocus</code></td>
-   <td>(falso)</td>
-   <td>Este é um atributo booleano que permite especificar automaticamente qual elemento deverá ter o foco quando a página carregar, a menos que o usuário a substitua, por exemplo <span class="tlid-translation translation" lang="pt"><span title=""> digitando sobre um controle diferente</span></span>. <span class="tlid-translation translation" lang="pt"><span title="">Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado</span></span>.</td>
-  </tr>
-  <tr>
-   <td><code>disabled</code></td>
-   <td>(<em>falso</em>)</td>
-   <td>Este é um atributo booleano que indica <span class="tlid-translation translation" lang="pt"><span title="">que o usuário não pode interagir com este elemento</span></span>. Se este atributo não estiver especificado, o elemento, então, herda a configuração do elemento que o contém, por exemplo, {{HTMLElement("fieldset")}}; se o elemento que o contém não possuir o atributo <code>disabled</code>, então o elemento é ativado.</td>
-  </tr>
-  <tr>
-   <td><code>form</code></td>
-   <td></td>
-   <td><span class="tlid-translation translation" lang="pt"><span title="">O elemento do formulário ao qual o widget está associado</span></span>. O valor do atributo deve ser o atributo <code>id</code> de um {{HTMLElement("form")}} no mesmo documento. <span class="tlid-translation translation" lang="pt"><span title="">Em teoria, permite colocar um widget fora de um elemento</span></span> {{HTMLElement("form")}}. <span class="tlid-translation translation" lang="pt"><span title="">Na prática, no entanto, não há navegador que suporte esse recurso.</span></span></td>
-  </tr>
-  <tr>
-   <td><code>name</code></td>
-   <td></td>
-   <td><span class="tlid-translation translation" lang="pt"><span title="">O nome do elemento. Este atributo é</span><span title=""> enviado com os dados do formulário.</span></span></td>
-  </tr>
-  <tr>
-   <td><code>value</code></td>
-   <td></td>
-   <td>O Valor inicial do elemento.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Text_input_fields">Text input fields</h2>
-
-<p>Text {{htmlelement("input")}} fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs. We've already seen a few simple examples</p>
-
-<div class="note">
-<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p>
-</div>
-
-<p>All text fields share some common behaviors:</p>
-
-<ul>
- <li>They can be marked as {{htmlattrxref("readonly","input")}} (the user cannot modify the input value) or even {{htmlattrxref("disabled","input")}} (the input value is never sent with the rest of the form data).</li>
- <li>They can have a {{htmlattrxref("placeholder","input")}}; this is text that appears inside the text input box that describes the purpose of the box briefly.</li>
- <li>They can be constrained in {{htmlattrxref("size","input")}} (the physical size of the box) and <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> (the maximum number of characters that can be entered into the box).</li>
- <li>They can benefit from <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, if the browser supports it.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its <code>type</code> attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.</p>
-</div>
-
-<h3 id="Single_line_text_fields">Single line text fields</h3>
-
-<p>A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to <code>text</code> (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, <code>text</code> is the default value). The value <code>text</code> for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify <code>type="date"</code> and the browser doesn't support native date pickers).</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can find examples of all the single line text field types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">see it live also</a>).</p>
-</div>
-
-<p>Here is a basic single line text field example:</p>
-
-<pre class="brush: html">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
-
-<p>Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.</p>
-
-<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p>
-
-<p>HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p>
-
-<h4 id="E-mail_address_field">E-mail address field</h4>
-
-<p>This type of field is set with the value <code>email</code> for the {{htmlattrxref("type","input")}} attribute:</p>
-
-<pre class="brush: html">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
-
-<p>When this <code>type</code> is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:</p>
-
-<p><img alt="An invalid email input showing the message Please enter an email address." src="https://mdn.mozillademos.org/files/14781/email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
-
-<p>It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.</p>
-
-<p>On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p>
-</div>
-
-<h4 id="Password_field">Password field</h4>
-
-<p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p>
-
-<pre class="brush: html">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
-
-<p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p>
-
-<p>Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.</p>
-
-<p>Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>.</p>
-
-<h4 id="Search_field">Search field</h4>
-
-<p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p>
-
-<pre class="brush: html">&lt;input type="search" id="search" name="search"&gt;</pre>
-
-<p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p>
-
-<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p>
-
-<h4 id="Phone_number_field">Phone number field</h4>
-
-<p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p>
-
-<pre class="brush: html">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
-
-<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p>
-
-<h4 id="URL_field">URL field</h4>
-
-<p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p>
-
-<pre class="brush: html">&lt;input type="url" id="url" name="url"&gt;</pre>
-
-<p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p>
-
-<div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.</div>
-
-<div class="note">
-<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p>
-</div>
-
-<h3 id="Multi-line_text_fields">Multi-line text fields</h3>
-
-<p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p>
-
-<pre class="brush: html">&lt;textarea cols="30" rows="10"&gt;&lt;/textarea&gt;</pre>
-
-<p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p>
-
-<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p>
-
-<div class="note">
-<p><strong>Note</strong>: You can find an example of a multi-line text field on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">see it live also</a>). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to <code>none</code> using <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
-</div>
-
-<p>{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):</p>
-
-<table>
- <caption>Attributes for the {{HTMLElement("textarea")}} element</caption>
- <thead>
-  <tr>
-   <th scope="col">Attribute name</th>
-   <th scope="col">Default value</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{htmlattrxref("cols","textarea")}}</td>
-   <td><code>20</code></td>
-   <td>The visible width of the text control, in average character widths.</td>
-  </tr>
-  <tr>
-   <td>{{htmlattrxref("rows","textarea")}}</td>
-   <td></td>
-   <td>The number of visible text lines for the control.</td>
-  </tr>
-  <tr>
-   <td>{{htmlattrxref("wrap","textarea")}}</td>
-   <td><code>soft</code></td>
-   <td>Indicates how the control wraps text. Possible values are: <code>hard</code> or <code>soft</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.</p>
-
-<p>There are two key related points to note here:</p>
-
-<ul>
- <li>If you want to define a default value for an {{HTMLElement("input")}} element, you have to use the <code>value</code> attribute; for a {{HTMLElement("textarea")}} element on the other hand you put the default text between the starting tag and the closing tag of the {{HTMLElement("textarea")}}.</li>
- <li>Because of its nature, the {{HTMLElement("textarea")}} element only accepts text content; this means that any HTML content put inside a {{HTMLElement("textarea")}} is rendered as if it was plain text content.</li>
-</ul>
-
-<h2 id="Drop-down_content">Drop-down content</h2>
-
-<p>Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the <strong>select box</strong>, and <strong>autocomplete box</strong>. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.</p>
-
-<div class="note">
-<p>Note: You can find examples of all the drop-down box types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">see it live also</a>).</p>
-</div>
-
-<h3 id="Select_box">Select box</h3>
-
-<p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p>
-
-<pre class="brush: html">&lt;select id="simple" name="simple"&gt;
-  &lt;option&gt;Banana&lt;/option&gt;
-  &lt;option&gt;Cherry&lt;/option&gt;
-  &lt;option&gt;Lemon&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p>
-
-<pre class="brush: html">&lt;select id="groups" name="groups"&gt;
-  &lt;optgroup label="fruits"&gt;
-    &lt;option&gt;Banana&lt;/option&gt;
-    &lt;option selected&gt;Cherry&lt;/option&gt;
-    &lt;option&gt;Lemon&lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="vegetables"&gt;
-    &lt;option&gt;Carrot&lt;/option&gt;
-    &lt;option&gt;Eggplant&lt;/option&gt;
-    &lt;option&gt;Potato&lt;/option&gt;
-  &lt;/optgroup&gt;
-&lt;/select&gt;</pre>
-
-<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p>
-
-<p>If an {{HTMLElement("option")}} element is set with a <code>value</code> attribute, that attribute's value is sent when the form is submitted. If the <code>value</code> attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.</p>
-
-<p>On the {{HTMLElement("optgroup")}} element, the <code>label</code> attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.</p>
-
-<h3 id="Multiple_choice_select_box">Multiple choice select box</h3>
-
-<p>By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> and clicking multiple values).</p>
-
-<p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p>
-
-<pre class="brush: html">&lt;select multiple id="multi" name="multi"&gt;
-  &lt;option&gt;Banana&lt;/option&gt;
-  &lt;option&gt;Cherry&lt;/option&gt;
-  &lt;option&gt;Lemon&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p>
-
-<div class="note"><strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div>
-
-<h3 id="Autocomplete_box">Autocomplete box</h3>
-
-<p>You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.</p>
-
-<p>The data list is then bound to a text field (usually an <code>&lt;input&gt;</code> element) using the {{htmlattrxref("list","input")}} attribute.</p>
-
-<p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p>
-
-<pre class="brush: html">&lt;label for="myFruit"&gt;What's your favorite fruit?&lt;/label&gt;
-&lt;input type="text" name="myFruit" id="myFruit" list="mySuggestion"&gt;
-&lt;datalist id="mySuggestion"&gt;
-  &lt;option&gt;Apple&lt;/option&gt;
-  &lt;option&gt;Banana&lt;/option&gt;
-  &lt;option&gt;Blackberry&lt;/option&gt;
-  &lt;option&gt;Blueberry&lt;/option&gt;
-  &lt;option&gt;Lemon&lt;/option&gt;
-  &lt;option&gt;Lychee&lt;/option&gt;
-  &lt;option&gt;Peach&lt;/option&gt;
-  &lt;option&gt;Pear&lt;/option&gt;
-&lt;/datalist&gt;</pre>
-
-<div class="note"><strong>Note:</strong> According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div>
-
-<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div>
-
-<div></div>
-
-<h4 id="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4>
-
-<p>The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.</p>
-
-<p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p>
-
-<pre class="brush:html;">&lt;label for="myFruit"&gt;What is your favorite fruit? (With fallback)&lt;/label&gt;
-&lt;input type="text" id="myFruit" name="fruit" list="fruitList"&gt;
-
-&lt;datalist id="fruitList"&gt;
-  &lt;label for="suggestion"&gt;or pick a fruit&lt;/label&gt;
-  &lt;select id="suggestion" name="altFruit"&gt;
-    &lt;option&gt;Apple&lt;/option&gt;
-    &lt;option&gt;Banana&lt;/option&gt;
-    &lt;option&gt;Blackberry&lt;/option&gt;
-    &lt;option&gt;Blueberry&lt;/option&gt;
-    &lt;option&gt;Lemon&lt;/option&gt;
-    &lt;option&gt;Lychee&lt;/option&gt;
-    &lt;option&gt;Peach&lt;/option&gt;
-    &lt;option&gt;Pear&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/datalist&gt;
-</pre>
-
-<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Safari 6</th>
-   <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td>
-  </tr>
-  <tr>
-   <th scope="row">Firefox 18</th>
-   <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Checkable_items">Checkable items</h2>
-
-<p>Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.</p>
-
-<p>It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">see it live also</a>).</p>
-</div>
-
-<p>For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. </p>
-
-<p>You also need to provide values for these kinds of inputs inside the <code>value</code> attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of <code>on</code>.</p>
-
-<h3 id="Check_box">Check box</h3>
-
-<p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p>
-
-<pre class="brush: html">&lt;input type="checkbox" checked id="carrots" name="carrots" value="carrots"&gt;
-</pre>
-
-<p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p>
-
-<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p>
-
-<h3 id="Radio_button">Radio button</h3>
-
-<p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p>
-
-<pre class="brush: html">&lt;input type="radio" checked id="soup" name="meal"&gt;</pre>
-
-<p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p>
-
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;What is your favorite meal?&lt;/legend&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;label for="soup"&gt;Soup&lt;/label&gt;
-      &lt;input type="radio" checked id="soup" name="meal" value="soup"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      &lt;label for="curry"&gt;Curry&lt;/label&gt;
-      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
-      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/fieldset&gt;</pre>
-
-<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p>
-
-<h2 id="Buttons">Buttons</h2>
-
-<p>Within HTML forms, there are three kinds of button:</p>
-
-<dl>
- <dt>Submit</dt>
- <dd>Sends the form data to the server. For {{HTMLElement("button")}} elements, omitting the <code>type</code> attribute (or an invalid value of <code>type</code>) results in a submit button.</dd>
- <dt>Reset</dt>
- <dd>Resets all form widgets to their default values.</dd>
- <dt>Anonymous</dt>
- <dd>Buttons that have no automatic effect but can be customized using JavaScript code.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">see it live also</a>).</p>
-</div>
-
-<p>A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:</p>
-
-<h3 id="submit">submit</h3>
-
-<pre class="brush: html">&lt;button type="submit"&gt;
-    This a &lt;br&gt;&lt;strong&gt;submit button&lt;/strong&gt;
-&lt;/button&gt;
-
-&lt;input type="submit" value="This is a submit button"&gt;</pre>
-
-<h3 id="reset">reset</h3>
-
-<pre class="brush: html">&lt;button type="reset"&gt;
-    This a &lt;br&gt;&lt;strong&gt;reset button&lt;/strong&gt;
-&lt;/button&gt;
-
-&lt;input type="reset" value="This is a reset button"&gt;</pre>
-
-<h3 id="anonymous">anonymous</h3>
-
-<pre class="brush: html">&lt;button type="button"&gt;
-    This an &lt;br&gt;&lt;strong&gt;anonymous button&lt;/strong&gt;
-&lt;/button&gt;
-
-&lt;input type="button" value="This is an anonymous button"&gt;</pre>
-
-<p>Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:</p>
-
-<ul>
- <li>As you can see from the examples, {{HTMLElement("button")}} elements let you use HTML content in their labels, which are inserted inside the opening and closing <code>&lt;button&gt;</code> tags. {{HTMLElement("input")}} elements on the other hand are empty elements; their labels are inserted inside <code>value</code> attributes, and therefore only accept plain text content.</li>
- <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a <code>value</code> attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.</li>
-</ul>
-
-<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p>
-
-<p>Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.</p>
-
-<h2 id="Advanced_form_widgets">Advanced form widgets</h2>
-
-<p>In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/advanced-examples.html">advanced-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html">see it live also</a>).</p>
-</div>
-
-<h3 id="Numbers">Numbers</h3>
-
-<p>Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.</p>
-
-<p>It's also possible to:</p>
-
-<ul>
- <li>Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</li>
- <li>Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.</li>
-</ul>
-
-<h4 id="Example">Example</h4>
-
-<pre class="brush: html">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
-
-<p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p>
-
-<p><code>number</code> inputs are not supported in versions of Internet Explorer below 10.</p>
-
-<h3 id="Sliders">Sliders</h3>
-
-<p>Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.</p>
-
-<p>A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.</p>
-
-<h4 id="Example_2">Example</h4>
-
-<pre class="brush: html">&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;</pre>
-
-<p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p>
-
-<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p>
-
-<pre class="brush: html">&lt;label for="beans"&gt;How many beans can you eat?&lt;/label&gt;
-&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;
-&lt;span class="beancount"&gt;&lt;/span&gt;</pre>
-
-<p>This can be implemented using some simple JavaScript:</p>
-
-<pre class="brush: js">var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}</pre>
-
-<p>Here we store references to the range input and the span in two variables, then we immediately set the span's <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, we set up an <code>oninput</code> event handler so that every time the range slider is moved, the span <code>textContent</code> is updated to the new input value.</p>
-
-<p><code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
-
-<h3 id="Date_and_time_picker">Date and time picker</h3>
-
-<p>Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.</p>
-
-<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.</p>
-
-<h4 id="datetime-local"><code>datetime-local</code></h4>
-
-<p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p>
-
-<pre class="brush: html">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
-
-<h4 id="month"><code>month</code></h4>
-
-<p>This creates a widget to display and pick a month with a year.</p>
-
-<pre class="brush: html">&lt;input type="month" name="month" id="month"&gt;</pre>
-
-<h4 id="time"><code>time</code></h4>
-
-<p>This creates a widget to display and pick a time value.</p>
-
-<pre class="brush: html">&lt;input type="time" name="time" id="time"&gt;</pre>
-
-<h4 id="week"><code>week</code></h4>
-
-<p>This creates a widget to display and pick a week number and its year.</p>
-
-<pre class="brush: html">&lt;input type="week" name="week" id="week"&gt;</pre>
-
-<p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p>
-
-<pre class="brush: html">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
-&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"&gt;</pre>
-
-<p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p>
-
-<h3 id="Color_picker">Color picker</h3>
-
-<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.</p>
-
-<p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p>
-
-<pre class="brush: html">&lt;input type="color" name="color" id="color"&gt;</pre>
-
-<p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p>
-
-<h2 id="Other_widgets">Other widgets</h2>
-
-<p>There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p>
-</div>
-
-<h3 id="File_picker">File picker</h3>
-
-<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p>
-
-<p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p>
-
-<h4 id="Example_3">Example</h4>
-
-<p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p>
-
-<pre class="brush: html">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
-
-<h3 id="Hidden_content">Hidden content</h3>
-
-<p>It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>hidden</code>.</p>
-
-<p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p>
-
-<pre class="brush: html">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;</pre>
-
-<h3 id="Image_button">Image button</h3>
-
-<p>The <strong>image button</strong> control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).</p>
-
-<p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p>
-
-<pre class="brush: html">&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
-
-<p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p>
-
-<ul>
- <li>The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.x</em>".</li>
- <li>The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.y</em>".</li>
-</ul>
-
-<p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p>
-
-<pre>http://foo.com?pos.x=123&amp;pos.y=456</pre>
-
-<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p>
-
-<h3 id="Meters_and_progress_bars">Meters and progress bars</h3>
-
-<p>Meters and progress bars are visual representations of numeric values.</p>
-
-<h4 id="Progress">Progress</h4>
-
-<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p>
-
-<pre class="brush: html">&lt;progress max="100" value="75"&gt;75/100&lt;/progress&gt;</pre>
-
-<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p>
-
-<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
-
-<h4 id="Meter">Meter</h4>
-
-<p>A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p>
-
-<ul>
- <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
-  <ul>
-   <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values).</li>
-   <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values).</li>
-   <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values).</li>
-  </ul>
- </li>
- <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
-  <ul>
-   <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.</li>
-   <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.</li>
-   <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li>
-  </ul>
- </li>
-</ul>
-
-<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p>
-
-<ul>
- <li>If the current value is in the prefered part of the range, the bar is green.</li>
- <li>If the current value is in the average part of the range, the bar is yellow.</li>
- <li>If the current value is in the worst part of the range, the bar is red.</li>
-</ul>
-
-<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p>
-
-<pre class="brush: html">&lt;meter min="0" max="100" value="75" low="33" high="66" optimum="50"&gt;75&lt;/meter&gt;</pre>
-
-<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
-
-<p>Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.</p>
-
-<h2 id="See_also">See also</h2>
-
-<p>To dig into the different form widgets, there are some useful external resources you should check out:</p>
-
-<ul>
- <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> by Wufoo</li>
- <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
-
-
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
diff --git a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html b/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html
deleted file mode 100644
index c6eaaee29b..0000000000
--- a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html
+++ /dev/null
@@ -1,251 +0,0 @@
----
-title: Sending form data
-slug: Web/Guide/HTML/Forms/Sending_and_retrieving_form_data
-translation_of: Learn/Forms/Sending_and_retrieving_form_data
----
-<p>Em muitos casos, a finalidade de <a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Form</a> Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.</p>
-
-<h2 id="Para_onde_vão_os_dados">Para onde vão os dados?</h2>
-
-<p>Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.</p>
-
-<h3 id="Sobre_a_arquitetura_cliente_servidor">Sobre a arquitetura cliente / servidor</h3>
-
-<p>A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>, etc.), usando o <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a>. O servidor responde a solicitação usando o mesmo protocolo.</p>
-
-<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="height: 141px; width: 400px;"></p>
-
-<p>No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.</p>
-
-<h3 id="No_lado_do_cliente_definindo_como_enviar_os_dados">No lado do cliente: definindo como enviar os dados</h3>
-
-<p>O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}.</p>
-
-<h4 id="o_atributo_htmlattrxref(actionform)">o atributo {{htmlattrxref("action","form")}}</h4>
-
-<p>Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.</p>
-
-<h5 id="Exemplos">Exemplos</h5>
-
-<p>Neste exemplo, os dados são enviados para http://foo.com:</p>
-
-<pre class="brush: html">&lt;form action="http://foo.com"&gt;</pre>
-
-<p class="brush: html">Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:</p>
-
-<pre class="brush: html">&lt;form action="/somewhere_else"&gt;</pre>
-
-<p class="brush: html">Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")}}   faz com que os dados sejam enviados para a página que inclui o formulário:</p>
-
-<pre class="brush: html">&lt;form&gt;</pre>
-
-<p class="brush: html">Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário.</p>
-
-<pre class="brush: html">&lt;form action="#"&gt;</pre>
-
-<div class="note">
-<p><strong>Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.</strong></p>
-</div>
-
-<h4 id="o_atributo_htmlattrxref(methodform)">o atributo {{htmlattrxref("method","form")}}</h4>
-
-<p>Este atributo define como os dados são enviados. o <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> </p>
-
-<p>Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.</p>
-
-<p>Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.</p>
-
-<h5 id="O_método_GET">O método GET</h5>
-
-<p>O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.</p>
-
-<h6 id="Exemplo_Considere_o_seguinte_formulário">Exemplo<br>
- Considere o seguinte formulário:</h6>
-
-<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
-  &lt;input name="say" value="Hi"&gt;
-  &lt;input name="to" value="Mom"&gt;
-  &lt;button&gt;Envie meus cumprimentos&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>Com o método GET, a solicitação HTTP tem esta aparência:</p>
-
-<pre>GET /?say=Hi&amp;to=Mom HTTP/1.1
-Host: foo.com</pre>
-
-<h5 id="O_método_POST">O método POST</h5>
-
-<p>O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.</p>
-
-<h6 id="Exemplo">Exemplo</h6>
-
-<p>Considere esta forma (a mesma acima):</p>
-
-<pre class="brush: html">&lt;form action="http://foo.com" method="post"&gt;
-  &lt;input name="say" value="Hi"&gt;
-  &lt;input name="to" value="Mom"&gt;
-  &lt;button&gt;Send my greetings&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>Quando enviado usando o método POST, o pedido HTTP se parece com isto:</p>
-
-<pre>POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&amp;to=Mom</pre>
-
-<p>O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.</p>
-
-<p>Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a> ou o <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:</p>
-
-<ol>
- <li>Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.</li>
- <li>Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.</li>
-</ol>
-
-<h3 id="No_lado_do_servidor_recuperar_os_dados">No lado do servidor: recuperar os dados</h3>
-
-<p>Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.</p>
-
-<h4 id="Exemplo_PHP_Bruto">Exemplo: PHP Bruto</h4>
-
-<p>O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.</p>
-
-<pre class="brush: php">&lt;?php
-  // The global $_POST variable allows you to access the data sent with the POST method
-  // To access the data sent with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;</pre>
-
-<p>Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:</p>
-
-<pre>Oi Mãe</pre>
-
-<h4 id="Example_Python_Bruto">Example: Python Bruto</h4>
-
-<p>This example uses Python to do the same thing--display the provided data on a web page. It uses the <a href="http://docs.python.org/3/library/cgi.html" rel="external" title="http://docs.python.org/3/library/cgi.html">CGI Python package</a> to access the form data.</p>
-
-<pre class="brush: python">#!/usr/bin/env python
-import html
-import cgi
-import cgitb; cgitb.enable()     # for troubleshooting
-
-print("Content-Type: text/html") # HTTP header to say HTML is following
-print()                          # blank line, end of headers
-
-form = cgi.FieldStorage()
-say  = html.escape(form["say"].value);
-to   = html.escape(form["to"].value);
-
-print(say, " ", to)</pre>
-
-<p>O resultado é o mesmo que com o PHP:</p>
-
-<pre>Oi Mãe</pre>
-
-<h4 id="Outros_idiomas_e_frameworks">Outros idiomas e frameworks</h4>
-
-<p>Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:</p>
-
-<ul>
- <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> Para PHP</li>
- <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> Para Python</li>
- <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> Para Ruby</li>
- <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> Para Java</li>
- <li>etc.</li>
-</ul>
-
-<p>Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.</p>
-
-<h2 id="Um_caso_especial_enviar_arquivos">Um caso especial: enviar arquivos</h2>
-
-<p>Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.</p>
-
-<h3 id="o_htmlattrxref(enctypeform)_atributo">o {{htmlattrxref("enctype","form")}} atributo</h3>
-
-<p>Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."</p>
-
-<p>Mas se você quiser enviar arquivos, você precisa fazer duas coisas:</p>
-
-<ul>
- <li>Colocou o {{htmlattrxref("method","form")}} Atributo para POST porque o conteúdo do arquivo não pode ser colocado dentro de um parâmetro de URL usando um formulário.</li>
- <li>Defina o valor de {{htmlattrxref("enctype","form")}} Para multipart / form-data porque os dados serão divididos em várias partes, uma para cada arquivo mais uma para o texto do corpo do formulário que pode ser enviado com eles.</li>
-</ul>
-
-<p>Por exemplo:</p>
-
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;input type="file" name="myFile"&gt;
-  &lt;button&gt;Send the file&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<div class="note">
-<p><strong>Nota: Alguns navegadores suportam</strong>{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.</p>
-</div>
-
-<div class="warning">
-<p><strong>Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.</strong></p>
-</div>
-
-<h2 id="Preocupações_com_segurança">Preocupações com segurança</h2>
-
-<p>Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.</p>
-
-<h3 id="Falhas_de_segurança_comuns">Falhas de segurança comuns</h3>
-
-<p>Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:</p>
-
-<h4 id="XSS_e_CSRF">XSS e CSRF</h4>
-
-<p>Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.</p>
-
-<p>O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">same origin policy</a>. O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.</p>
-
-<p>CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).</p>
-
-<p>Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.</p>
-
-<p>To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim. <span style="line-height: 1.5;"> Almost all frameworks on the market today implement a minimal filter that removes the HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} and {{HTMLElement("object")}} elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.</span></p>
-
-<h4 id="SQL_injection">SQL injection</h4>
-
-<p>SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">one of the main vector attacks against web sites</a>.</p>
-
-<p>The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> on a PHP/MySQL infrastructure).</p>
-
-<h4 id="HTTP_header_injection_and_email_injection">HTTP header injection and email injection</h4>
-
-<p>These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.</p>
-
-<p>These attacks are mostly silent, and can turn your server into a <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p>
-
-<h3 id="Be_paranoid_Never_trust_your_users">Be paranoid: Never trust your users</h3>
-
-<p>So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.</p>
-
-<p>All data that comes to your server must be checked and sanitized. Always. No exception.</p>
-
-<ul>
- <li>Escape potentially dangerous characters. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this.</li>
- <li>Limit the incoming amount of data to allow only what's necessary.</li>
- <li>Sandbox uploaded files (store them on a different server and allow access to the file only through a different subdomain or even better through a fully different domain name).</li>
-</ul>
-
-<p>You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">perform client side data validation</a> but the server can't trust this validation because it has no way to truly know what really happens on the client side.</p>
-
-<h2 id="See_also">See also</h2>
-
-<p>If you want to learn more about securing a web application, you can dig into these resources:</p>
-
-<ul>
- <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li>
- <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li>
-</ul>
diff --git a/files/pt-br/web/html/html5/index.html b/files/pt-br/web/guide/html/html5/index.html
index e39b45444a..e39b45444a 100644
--- a/files/pt-br/web/html/html5/index.html
+++ b/files/pt-br/web/guide/html/html5/index.html
diff --git a/files/pt-br/web/html/html5/introduction_to_html5/index.html b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html
index 465d67760d..465d67760d 100644
--- a/files/pt-br/web/html/html5/introduction_to_html5/index.html
+++ b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html
diff --git a/files/pt-br/web/guide/html/using_data_attributes/index.html b/files/pt-br/web/guide/html/using_data_attributes/index.html
deleted file mode 100644
index 20daf02206..0000000000
--- a/files/pt-br/web/guide/html/using_data_attributes/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-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>
diff --git a/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html
new file mode 100644
index 0000000000..09ec86b3a2
--- /dev/null
+++ b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html
@@ -0,0 +1,416 @@
+---
+title: Seções e estrutura de um documento HTML5
+slug: Sections_and_Outlines_of_an_HTML5_document
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div class="warning">
+<p><strong>Importante</strong>: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou <em>user agents</em> de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a  entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.</p>
+</div>
+
+<p>A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.</p>
+
+<h2 id="Estrutura_de_um_documento_em_HTML4">Estrutura de um documento em HTML4</h2>
+
+<p>A estrutura de um documento, ou seja, a estrutura semântica do que está entre <span style="font-family: courier new;">&lt;body&gt;</span> e <span style="font-family: courier new;">&lt;/body&gt;</span>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.</p>
+
+<p>Então a seguinte marcação:</p>
+
+<pre class="brush: html notranslate">&lt;div class="section" id="elefantes-da-floresta" &gt;
+&lt;h1&gt;Elefantes da floresta&lt;/h1&gt;
+&lt;p&gt;Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
+<em>...esta seção continua...</em>
+&lt;div class="subsection" id="floresta-habitat"&gt;
+&lt;h2&gt;Habitat&lt;/h2&gt;
+&lt;p&gt;Os elefantes da floresta não vivem em árvores mas sim entre elas.
+<em>...esta subseção continua...</em>
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :</p>
+
+<pre class="notranslate">1. Elefantes da floresta
+   1.1 Habitat
+</pre>
+
+<p>Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Elefantes da floresta&lt;/h1&gt;
+&lt;p&gt;Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
+<em>...esta seção continua...</em>
+&lt;h2&gt;Habitat&lt;/h2&gt;
+&lt;p&gt;Os elefantes da floresta não vivem em árvores mas sim entre elas.
+<em>...esta subseção continua...</em>
+&lt;h2&gt;Dieta&lt;/h2&gt;
+&lt;h1&gt;Esquilo da mongólia&lt;/h1&gt;
+</pre>
+
+<p>leva à:</p>
+
+<pre class="notranslate">1. Elefantes da floresta
+   1.1 Habitat
+   1.2 Dieta
+2. Esquilo da mongólia
+</pre>
+
+<h2 id="Problemas_resolvidos_pelo_HTML5">Problemas resolvidos pelo HTML5</h2>
+
+<p>A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:</p>
+
+<ol>
+ <li>O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo <strong>class</strong> torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para <a href="https://pt.wikipedia.org/wiki/Tecnologia_assistiva">tecnologias assistivas</a>, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O  {{HTMLElement("section")}}, o elemento de Seção do HTML. </li>
+ <li>Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Heading_Elements">elementos de cabeçalho</a> de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.</li>
+ <li>No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.</li>
+ <li>Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.</li>
+</ol>
+
+<h2 id="sect1"></h2>
+
+<p>Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.</p>
+
+<h2 id="The_HTML5_Outline_Algorithm">The HTML5 Outline Algorithm</h2>
+
+<h3 id="Definindo_seções_em_HTML5">Definindo seções em HTML5</h3>
+
+<p>Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }}  é parte de uma seção. Seções em  HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }},  {{ HTMLElement("section") }},  {{ HTMLElement("article") }},  {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }},  {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. </p>
+
+<div class="note"><strong>Nota: </strong>Cada seção pode ter sua própria hierarquia de cabeçalho  {{ HTMLElement("h1") }}. Veja <a href="/en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">D</a><a href="/en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">efinindo cabeçalhos com HTML5</a>.</div>
+
+<p>Exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt;Elefantes da floresta&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;Introdução&lt;/h1&gt;
+    &lt;p&gt;Nesta seção, nós discutimos os menores elefantes florestais conhecidos.&lt;p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;<span><span>Habitat</span><span>&lt;/</span><span>h1</span><span>&gt;
+    </span></span><span><span>&lt;</span><span>P</span><span>&gt;</span><span>Elefantes florestais não vivem em árvores mas entre eles.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;Bloco publicitário&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 O Exemplo de empresa&lt;/p&gt;
+&lt;/footer&gt;</span></span>
+</pre>
+
+<p>Esse <a href="https://tableless.com.br/produtividade-editores-e-snippets/">snippet</a> HTML define duas seções de nível superior:</p>
+
+<pre class="brush: html notranslate"><span> &lt;section&gt;
+  &lt;h1&gt; Elefantes da floresta &lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt; Introdução &lt;/h1&gt;
+    &lt;p&gt; Nesta seção, discutiremos os elefantes da floresta menos conhecidos.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt; Habitat &lt;/h1&gt;
+    &lt;p&gt;Os elefantes da floresta não vivem em árvores, mas entre eles.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt; bloco de publicidade&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt; (c) 2010 A empresa exemplo&lt;/p&gt;
+&lt;/footer&gt;</span></pre>
+
+<p>A primeira seção possui três subseções:</p>
+
+<pre class="brush: html notranslate"><span>&lt;section&gt;
+   &lt;h1&gt;Forest elephants&lt;/h1&gt;
+ </span><span>  &lt;section&gt;
+     &lt;h1&gt;Introduction&lt;/h1&gt;
+     &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+   &lt;/section&gt;
+ </span><span>  &lt;section&gt;
+     &lt;h1&gt;<span><span>Habitat</span><span>&lt;/</span><span>h1</span><span>&gt;
+     </span></span><span><span>&lt;</span><span>P</span><span>&gt;</span><span>Forest elephants do not live in trees but among them.
+   &lt;/section&gt;
+  </span><span> &lt;aside&gt;
+     &lt;p&gt;advertising block
+   &lt;/aside&gt;
+ </span><span>&lt;/section&gt;
+ &lt;footer&gt;
+   &lt;p&gt;(c) 2010 The Example company
+ &lt;/footer&gt;</span></span></span></pre>
+
+<p>Isso leva à seguinte estrutura:</p>
+
+<pre class="notranslate">1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+   1.3 Section (aside)
+</pre>
+
+<h3 id="Definindo_cabeçalho_com_HTML5">Definindo cabeçalho com HTML5</h3>
+
+<p>Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.</p>
+
+<p>Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:</p>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+<span>     </span><em>...this section continues...</em>
+  &lt;section&gt;
+     &lt;h2&gt;Habitat&lt;/h2&gt;
+     &lt;p&gt;Forest elephants do not live in trees but among them.
+<span>        </span><em>...this subsection continues...</em>
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+  &lt;p&gt;In this section, we discuss the famous mongolian gerbils.
+<span>     </span><em>...this section continues...</em>
+&lt;/section&gt;
+</pre>
+
+<p>leva ao seguinte esboço:</p>
+
+<pre class="notranslate">1. Elefantes da floresta
+   1.1 Habitat
+2. Gerbos da Mongólia</pre>
+
+<p>Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)</p>
+
+<h3 id="Seção_implícita">Seção implícita</h3>
+
+<p>Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.</p>
+
+<p>Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:</p>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt; Elefantes da floresta &lt;/h1&gt;
+  &lt;p&gt; Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+    ... esta seção continua ...
+  &lt;h3 class = "subseção implícita"&gt; Habitat &lt;/h3&gt;
+    &lt;p&gt;Os elefantes da floresta não vivem em árvores, mas entre elas.
+      ... esta subseção continua ...&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<p>levando ao seguinte esboço:</p>
+
+<pre class="notranslate">1. Elefantes da floresta
+   1.1 Habitat (definido implicitamente pelo elemento h3)
+</pre>
+
+<p>Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:</p>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt; Elefantes da floresta &lt;/h1&gt;
+  &lt;p&gt; Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+    ... esta seção continua ...
+  &lt;h1 class = "seção implícita"&gt; Gerbos da Mongólia &lt;/h1&gt;
+  &lt;p&gt;Os gerbos da Mongólia são pequenos mamíferos fofos.
+    ... esta seção continua ...&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<p>levando ao seguinte esboço:</p>
+
+<pre class="notranslate">1. Elefantes da floresta
+2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)
+</pre>
+
+<p>Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;h1&gt; Mamíferos &lt;/h1&gt;
+  &lt;h2&gt; Baleias &lt;/h2&gt;
+  &lt;p&gt; Nesta seção, discutimos as baleias nadadoras.
+    ... esta seção continua ...&lt;/p&gt;
+  &lt;section&gt;
+    &lt;h3&gt; Elefantes da floresta &lt;/h3&gt;
+    &lt;p&gt; Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
+      ... esta seção continua ...&lt;/p&gt;
+    &lt;h3&gt; Gerbos da Mongólia &lt;/h3&gt;
+      &lt;p&gt; Hordas de gerbos se espalharam muito além da Mongólia.
+        ... esta subseção continua ...&lt;/p&gt;
+    &lt;h2&gt; Répteis &lt;/h2&gt;
+      &lt;p&gt;Répteis são animais com sangue frio.
+        ... esta subseção continua ...&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<p>levando ao seguinte esboço:</p>
+
+<pre class="notranslate">1. Mamíferos
+   1.1 Baleias (definidos implicitamente pelo elemento h2)
+   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
+   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
+   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)
+
+</pre>
+
+<p>Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.</p>
+
+<p>Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.</p>
+
+<h3 id="Sobrepondo_seções_implícitas">Sobrepondo seções implícitas</h3>
+
+<p> Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:</p>
+
+<ul>
+ <li>uma seção sobre um livro ou filme que possui um título secundário:
+  <pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt; Justine &lt;/h1&gt;
+  &lt;h2&gt; Os Infortúnios da Virtude &lt;/h2&gt;
+&lt;/section&gt;</pre>
+
+  <p>leva ao seguinte esboço:</p>
+
+  <pre class="notranslate">1. Justine
+   1.1 Os Infortúnios da Virtude
+</pre>
+ </li>
+ <li>o cabeçalho secundário pode ser usado para uma lista de tags:
+  <pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt; Seção e esboços de um documento &lt;/h1&gt;
+  &lt;h2&gt; HTML, HTML5, seções, contornos &lt;/h2&gt;
+&lt;/section&gt;</pre>
+
+  <p>levando ao seguinte esboço:</p>
+
+  <pre class="notranslate">1. Seção e linhas gerais de um documento
+   1.1 HTML, HTML5, Seções, Esboços</pre>
+ </li>
+</ul>
+
+<p>Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:</p>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;hgroup&gt;
+    &lt;h1&gt;Justine&lt;/h1&gt;
+    &lt;h2&gt;Les Malheurs de la vertu&lt;/h2&gt;
+  &lt;/hgroup&gt;
+&lt;/section&gt;
+</pre>
+
+<p>leads to the following outline:</p>
+
+<pre class="notranslate">1. Justine
+</pre>
+
+<h3 id="Caminhos_de_seção"><a>Caminhos de seção</a></h3>
+
+<p> Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.</p>
+
+<p>Exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h1&gt; Elefantes da floresta &lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt; Introdução &lt;/h2&gt;
+    &lt;p&gt; Nesta seção, discutiremos os elefantes da floresta menos conhecidos&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt; Habitat &lt;/h2&gt;
+    &lt;p&gt;Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
+      veja o que os cientistas estão dizendo em "&lt;cite&gt; O elefante da floresta em Bornéu &lt;/cite&gt;":
+    &lt;blockquote&gt;
+      &lt;h1&gt; Bornéu&lt;/h1&gt;
+      &lt;p&gt; O elemento florestal vive em Bornéu ...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>Este exemplo resulta no seguinte esboço:</p>
+
+<pre class="notranslate">1. Elefantes da floresta
+   1.1 Introdução
+   1.2 Habitat
+</pre>
+
+<p>Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.</p>
+
+<h3 id="Seções_de_fora_da_estrutura">Seções de fora da estrutura</h3>
+
+<p>O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:</p>
+
+<ol>
+ <li>O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.</li>
+ <li>O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.</li>
+ <li>O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.</li>
+ <li>O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.</li>
+</ol>
+
+<h2 id="Endereços_e_horário_de_publicação_nos_elementos_de_seção">Endereços e horário de publicação nos elementos de seção</h2>
+
+<p>O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.</p>
+
+<p>Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.</p>
+
+<p>Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.</p>
+
+<h2 id="Usando_elementos_HTML5_em_navegadores_não-HTML5">Usando elementos HTML5 em navegadores não-HTML5</h2>
+
+<p>Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface <a href="https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM">DOM (Document Object Model)</a> especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:</p>
+
+<pre class="brush: css notranslate">section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+</pre>
+
+<p>É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.</p>
+
+<p>Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:</p>
+
+<pre class="brush: html notranslate">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    <code class="js">document.createElement(<span class="js__string">"header"</span> );
+    document.createElement(<span class="js__string">"footer" </span>);
+    document.createElement(<span class="js__string">"section"</span>);
+    document.createElement(<span class="js__string">"aside"</span>  );
+    document.createElement(<span class="js__string">"nav"</span>    );
+    document.createElement(<span class="js__string">"article"</span>);
+    document.createElement(<span class="js__string">"hgroup"</span> );
+    document.createElement(<span class="js__string">"time"</span>   );
+  &lt;/script&gt;
+</code><code class="html"><span class="html__ie_style">&lt;![endif]--&gt;</span></code>
+</pre>
+
+<p>Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:</p>
+
+<pre class="brush: html notranslate">&lt;noscript&gt;
+  &lt;strong&gt; Aviso! &lt;/strong&gt;
+  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
+  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
+&lt;/noscript&gt;
+</pre>
+
+<p>Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um <strong>plano b</strong> adequado para o caso em que este último navegador está configurado para não usar scripts :</p>
+
+<pre class="brush: html notranslate">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    <code class="js">document.createElement(<span class="js__string">"header"</span> );
+    document.createElement(<span class="js__string">"footer" </span>);
+    document.createElement(<span class="js__string">"section"</span>);
+    document.createElement(<span class="js__string">"aside"</span>  );
+    document.createElement(<span class="js__string">"nav"</span>    );
+    document.createElement(<span class="js__string">"article"</span>);
+    document.createElement(<span class="js__string">"hgroup"</span> );
+    document.createElement(<span class="js__string">"time"</span>   );
+  &lt;/script&gt;</code>
+<code class="html"><span class="html__ie_style">  &lt;noscript&gt;
+     &lt;strong&gt;Aviso !&lt;/strong&gt;
+     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
+     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
+  &lt;/noscript&gt;</span></code>
+<code class="html"><span class="html__ie_style">&lt;![endif]-<span style="font-family: courier new,andale mono,monospace;">-<span style="font-family: monospace;">&gt;</span></span></span> </code>
+</pre>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.</p>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<div class="noinclude">
+<p>{{ languages( {"es": "/es/Secciones_y_esquema_de_un_documento_HTML_5", "ja": "ja/Sections_and_Outlines_of_an_HTML5_document"}) }}</p>
+</div>
diff --git a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html b/files/pt-br/web/guide/introduction_to_web_development/index.html
index 46944374f5..46944374f5 100644
--- a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html
+++ b/files/pt-br/web/guide/introduction_to_web_development/index.html
diff --git a/files/pt-br/web/guide/mobile/mobile-friendliness/index.html b/files/pt-br/web/guide/mobile/mobile-friendliness/index.html
new file mode 100644
index 0000000000..4fd3c49a1a
--- /dev/null
+++ b/files/pt-br/web/guide/mobile/mobile-friendliness/index.html
@@ -0,0 +1,30 @@
+---
+title: Site Móvel Amigável
+slug: Web_Development/Mobile/Mobile-friendliness
+translation_of: Web/Guide/Mobile/Mobile-friendliness
+---
+<h2 id="O_que_é_site_móvel_amigável">O que é site móvel amigável?</h2>
+<p>Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.</p>
+<h3 id="Goal_1_(Presentation)"><strong>Goal #1 (Presentation)</strong></h3>
+<p><em>“Make websites that work well on a variety of screen sizes.”</em></p>
+<p>These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements <a class="external" href="http://www.lukew.com/ff/entry.asp?1085" title="Touch Target Sizes">sized for a touchscreen</a> would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.</p>
+<h3 id="Goal_2_(Content)"><strong>Goal #2 (Content)</strong></h3>
+<p><em>“Adjust your content for mobile users.”<img align="right" alt="alaska_air_mobile_and_desktop-300x225.png" class="internal rwrap" src="/@api/deki/files/5892/=alaska_air_mobile_and_desktop-300x225.png"></em></p>
+<p>Think about what your users want to do at your site if they are on a phone. A great example of this is <a class="external" href="http://www.alaskaair.com/" title="Alaska Air">Alaska Air’s website</a>. Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.</p>
+<h3 id="Goal_3_(Performance)"><strong>Goal #3 (Performance)</strong></h3>
+<p><em>“Give your users a smooth experience, even on a slow connection.”</em></p>
+<p>Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="Best Practices for Speeding Up Your Web Site">good performance practices</a>, only sending the user the bits they will actually need.</p>
+<h3 id="Know_your_audience"><strong>Know your audience</strong></h3>
+<p>While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.</p>
+<h2 id="Approaches_to_mobile_Web_development">Approaches to mobile Web development</h2>
+<p>The following approaches aim to achieve each of these goals by different means.</p>
+<ul>
+  <li><a href="/en/Web_development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Separate sites</a></li>
+  <li><a href="/en/Web_development/Mobile/Responsive_design" title="en/Web development/Mobile/Responsive design">Responsive design</a></li>
+  <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">A hybrid approach</a></li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_document_information">Original document information</h3>
+  <p>Originally published on 4 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/">Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?</a>", by Jason Grlicky.</p>
+</div>
+<p> </p>
diff --git a/files/pt-br/web/guide/mobile/separate_sites/index.html b/files/pt-br/web/guide/mobile/separate_sites/index.html
new file mode 100644
index 0000000000..2ca783fbc9
--- /dev/null
+++ b/files/pt-br/web/guide/mobile/separate_sites/index.html
@@ -0,0 +1,30 @@
+---
+title: Sites separados para celular e desktop
+slug: Web_Development/Mobile/Sites_separados
+translation_of: Web/Guide/Mobile/Separate_sites
+---
+<p>The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.</p>
+<h2 id="The_good">The good</h2>
+<p>The first option is the most popular by far: use <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">user-agent detection</a> to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">three goals of mobile web development</a> at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.</p>
+<p>Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!</p>
+<h2 id="The_bad">The bad</h2>
+<p>Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.</p>
+<p>Even more important than that, though, is the fact that user-agent detection is <a class="external" href="http://css-tricks.com/browser-detection-is-bad/" title="Browser Detection is Bad">inherently flawed</a>, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.</p>
+<h2 id="When_it_is_right_to_choose_this_option">When it is right to choose this option</h2>
+<p><img align="right" alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png">Firstly, if your target audience includes users on older or low-end <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">feature phones</a>, it is worth noting that you may need to employ this strategy <a class="external" href="http://www.passani.it/gap/#adaptation" title="Mobile Adaptation">to some degree</a> no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like <a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a> or the older <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a>.</p>
+<p>This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">most practical choice</a>. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.</p>
+<p>Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.</p>
+<h2 id="Examples">Examples</h2>
+<p>Most of the major Web applications you see in the wild have chosen this path, including <a class="external" href="http://m.facebook.com/">Facebook</a>, <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, and <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>. In fact, Mozilla picked this strategy for the mobile versions of <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) and <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the <a class="link-https" href="https://github.com/jbalogh/zamboni/">github repository for AMO</a> or <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>.</p>
+<h2 id="Approaches_to_mobile_Web_development">Approaches to mobile Web development</h2>
+<p>See the following articles for background and other approaches to developing for mobile platforms.</p>
+<ul>
+  <li><a href="/en/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">What is mobile-friendliness?</a></li>
+  <li><a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">Responsive design</a></li>
+  <li><a href="/en-US/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">A hybrid approach</a></li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_document_information">Original document information</h3>
+  <p>This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">Approaches to Mobile Web Development Part 2 – Separate Sites</a>", by Jason Grlicky.</p>
+</div>
+<p> </p>
diff --git a/files/pt-br/web/html/attributes/index.html b/files/pt-br/web/html/attributes/index.html
new file mode 100644
index 0000000000..cac8b527ec
--- /dev/null
+++ b/files/pt-br/web/html/attributes/index.html
@@ -0,0 +1,578 @@
+---
+title: Atributos
+slug: HTML/Attributes
+translation_of: Web/HTML/Attributes
+---
+<p> </p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nome do Atributo</th>
+   <th>Elementos</th>
+   <th>Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>accept</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Lista de tipos que o servidor aceita, tipicamente um tipo de arquivo.</td>
+  </tr>
+  <tr>
+   <td>accept-charset</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Lista de conjunto de caracteres suportados.</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Define um atalho no teclado para ativar ou adicionar foco ao elemento.</td>
+  </tr>
+  <tr>
+   <td>action</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>A URI de um programa que processa a informação submetida através do formulário.</td>
+  </tr>
+  <tr>
+   <td>align</td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>Especifica o alinhamento horizontal do elemento.</td>
+  </tr>
+  <tr>
+   <td>alt</td>
+   <td>
+    <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p>
+   </td>
+   <td>Texto alternativo caso uma imagem não possa ser exibida.</td>
+  </tr>
+  <tr>
+   <td>async</td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Indica que o script deve ser executado assíncrono.</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Indica se controles  neste formulário podem por padrão ter seus valores completados automaticamente pelo navegador.</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>O elemento deve ser focado automaticamente após a página ser carregada.</td>
+  </tr>
+  <tr>
+   <td>autoplay</td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>O aúdio ou vídeo deve ser reproduzido assim que possível.</td>
+  </tr>
+  <tr>
+   <td>bgcolor</td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>Cor do plano de fundo do elemento.</p>
+    <p>Nota: Este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("background-color") }} em vez disso.</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>border</td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>A largura da borda.</p>
+    <p>Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("border") }} em vez disso.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>buffered</td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Contém o intervalo de tempo da mídia que já foi carregada.</td>
+  </tr>
+  <tr>
+   <td>challenge</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>A challenge string that is submitted along with the public key.</td>
+  </tr>
+  <tr>
+   <td>charset</td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>Declara a codificação dos caracteres da página ou do script.</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>Indica se o elemento deve ser checado no carregamento da página.</td>
+  </tr>
+  <tr>
+   <td>cite</td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>Contêm uma URI que aponta para a fonte da citação ou alteração.</td>
+  </tr>
+  <tr>
+   <td>class</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Frequentemente usado com CSS para estilizar os elementos com propriedades comuns.</td>
+  </tr>
+  <tr>
+   <td>code</td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Especifica a URL do arquivo de classe do miniaplicativo que será carregado e executado.</td>
+  </tr>
+  <tr>
+   <td>codebase</td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Este atributo fornece a URL absoluta ou relativa do diretório onde os arquivos .class do miniaplicativo são armazenados.</td>
+  </tr>
+  <tr>
+   <td>color</td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>Este atributo define a cor do texto usando o nome de uma cor ou uma cor especificada em hexadecimal através do formato #RRGGBB.</p>
+    <p>Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("color") }} em vez disso.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>cols</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Define o número de colunas numa area de texto.</td>
+  </tr>
+  <tr>
+   <td>colspan</td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>O atributo colspan define o número de colunas que uma célula deve conter.</td>
+  </tr>
+  <tr>
+   <td>content</td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Um valor associado com <code>http-equiv</code> ou <code>name</code> dependendo do contexto.</td>
+  </tr>
+  <tr>
+   <td>contenteditable</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Indica se o conteúdo do elemento é editável.</td>
+  </tr>
+  <tr>
+   <td>contextmenu</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Define o ID de um elemento {{ HTMLElement("menu") }} que servirá como o menu de contexto de um outro elemento.</td>
+  </tr>
+  <tr>
+   <td>controls</td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indica se o navegador deve mostrar ou não os controles de reprodução ao usuário.</td>
+  </tr>
+  <tr>
+   <td>coords</td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>Uma escolha de valores especificando as coordenadas da região hot-spot.</td>
+  </tr>
+  <tr>
+   <td>data</td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Especifica a URL do recurso.</td>
+  </tr>
+  <tr>
+   <td>datetime</td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>
+    <p>Indica a data e o horário associados ao elemento.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>default</td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Indica que a faixa deve estar habilitada a não ser que as preferências do usuário indiquem algo diferente.</td>
+  </tr>
+  <tr>
+   <td>defer</td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Indica que o script deve ser executado após a página ter sido analisada.</td>
+  </tr>
+  <tr>
+   <td>dir</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Defina a direção do texto. Os valores permitidos são ltr (Esquerda para direita) e rtl (Direita para esquerda)</td>
+  </tr>
+  <tr>
+   <td>dirname</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica se o usuário pode ou não interagir com o elemento.</td>
+  </tr>
+  <tr>
+   <td>draggable</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Define se o elemento pode ser arrastado.</td>
+  </tr>
+  <tr>
+   <td>dropzone</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Indica que o elemento aceita a soltagem de conteúdo nele.</td>
+  </tr>
+  <tr>
+   <td>enctype</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Define o tipo de conteúdo da data do formulário quando o <code>method</code> é POST.</td>
+  </tr>
+  <tr>
+   <td>for</td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Descreve elementos na qual pertencem a este.</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica o formulário que é o proprietário do elemento.</td>
+  </tr>
+  <tr>
+   <td>headers</td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>IDs dos elementos <code>&lt;th&gt;</code> na qual se aplicam a este elemento.</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, isto é um atributo legado, em cujo caso  a propriedade CSS {{ Cssxref("height") }} deveria ser usado em vez. Em outros casos, assim como {{ HTMLElement("canvas") }}, a altura deve ser especificado com esse atributo.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>hidden</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Indica a relevância de um elemento.</td>
+  </tr>
+  <tr>
+   <td>high</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica o menor limite da faixa superior.</td>
+  </tr>
+  <tr>
+   <td>href</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td> A URL de um recurso ligado.</td>
+  </tr>
+  <tr>
+   <td>hreflang</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Especifica o idioma de um recurso ligado.</td>
+  </tr>
+  <tr>
+   <td>http-equiv</td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>icon</td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>Especifica uma imagem na qual represente o comando.</td>
+  </tr>
+  <tr>
+   <td>id</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Frequentemente usado com CSS para estilizar um elemento específico. O valor deste atributo deve ser único.</td>
+  </tr>
+  <tr>
+   <td>ismap</td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Indica que a imagem é parte de um mapa de imagem "sever-side".</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>keytype</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Especifica o tipo de chave gerada.</td>
+  </tr>
+  <tr>
+   <td>kind</td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Especifica o tipo de caminho de texto.</td>
+  </tr>
+  <tr>
+   <td>label</td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Especifica um título "user-releadable" de um caminho de texto.</td>
+  </tr>
+  <tr>
+   <td>lang</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Define o idioma usado no elemento.</td>
+  </tr>
+  <tr>
+   <td>language</td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Define o idioma do script usado no elemento.</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifica uma lista de opções pré definidas para sugerir ao usuário.</td>
+  </tr>
+  <tr>
+   <td>loop</td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>Indica se a mídia deveria começar tocando do começo quando ela é finalizada.</td>
+  </tr>
+  <tr>
+   <td>low</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica o maior limite da menor distância.</td>
+  </tr>
+  <tr>
+   <td>manifest</td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>Especifica a URL do cache manifest do documento. documento</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Indica o valor máximo permitido.</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Define o núemro máximo de caracteres permitido no elemento.</td>
+  </tr>
+  <tr>
+   <td>media</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>Especifica uma sugestão da mídia para qual recurso ligado foi designado.</td>
+  </tr>
+  <tr>
+   <td>method</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.</td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Indica o valor mínimo permitido.</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indica se múltiplos valores podem ser inseridos em uma entrada do tipo <code>email</code> ou <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>Nome do elemento. Por exemplo usado pelo servidor para identificar os campos no envio do formulário.</td>
+  </tr>
+  <tr>
+   <td>novalidate</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Este atributo indica que o formulário não deveria ser validado quando enviado.</td>
+  </tr>
+  <tr>
+   <td>open</td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>Indica se os detalhes serão mostrados no carregamento da página.</td>
+  </tr>
+  <tr>
+   <td>optimum</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica o valor numérico optimal.</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Define uma espreção regular na qual o valor do elemento será validado de encontro.</td>
+  </tr>
+  <tr>
+   <td>ping</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Fornece uma sugestão ao usuário de o que pode ser inserido no campo.</td>
+  </tr>
+  <tr>
+   <td>poster</td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>Uma URL indicando uma poster frame para mostrar desde que o usuário toque ou busque.</td>
+  </tr>
+  <tr>
+   <td>preload</td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indica se todo o recurso, partes dele ou nada deveria ser pré carregado.</td>
+  </tr>
+  <tr>
+   <td>pubdate</td>
+   <td>{{ HTMLElement("time") }}</td>
+   <td>
+    <p>Indica se esta data e tempo é a data no mais próximo</p>
+    <p>elemento antecessor{{ HTMLElement("article") }}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>radiogroup</td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica se o elemento pode ser editado.</td>
+  </tr>
+  <tr>
+   <td>rel</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Especifica o relacionamento do objeto alvo para o objeto ligado.</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica se este elemento é requerido para preencher ou não.</td>
+  </tr>
+  <tr>
+   <td>reversed</td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Indica se a lista deveria ser mostrada em uma ordem decrescente em vez de uma crescente.</td>
+  </tr>
+  <tr>
+   <td>rows</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Define o número de linhas em uma área de texto.</td>
+  </tr>
+  <tr>
+   <td>rowspan</td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Define o número de linhas que uma célula de tabela deveria abranger mais.</td>
+  </tr>
+  <tr>
+   <td>sandbox</td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>spellcheck</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Indica se o spell de checagem está permitido para o elemento.</td>
+  </tr>
+  <tr>
+   <td>scope</td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>scoped</td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>seamless</td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>selected</td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Define o valor na qual será selecionado no carregamento da página.</td>
+  </tr>
+  <tr>
+   <td>shape</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Define a largura do elemento (em pixels). Se o elemento de atributo <code>type</code> é <code>text</code> ou <code>password</code> então este é o número de caracteres.</td>
+  </tr>
+  <tr>
+   <td>sizes</td>
+   <td>{{ HTMLElement("link") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>span</td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td> URL de um conteúdo incorporável.</td>
+  </tr>
+  <tr>
+   <td>srcdoc</td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>srclang</td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>start</td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Define o primeiro número se não for 1.</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>style</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Define estilos CSS na qual ultrapassarão estilos previamente configurados.</td>
+  </tr>
+  <tr>
+   <td>summary</td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>tabindex</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Ultrapassa a ordem de tabulação padrão do navegador e segue o especificado como alternativa.</td>
+  </tr>
+  <tr>
+   <td>target</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>title</td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>Texto a ser mostrado em uma dica quando suspenso sobre um elemento.</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>Define o tipo de elemento.</td>
+  </tr>
+  <tr>
+   <td>usemap</td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>value</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>Define o valor padrão na qual será mostrado no elemento no carregar da página.</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, este é um atributo legado, no caso da propriedade CSS {{ Cssxref("width") }} deveria ser usado ao em vez. em outros casos, tal como {{ HTMLElement("canvas") }}, a largura deve ser especificada com este atributo.</td>
+  </tr>
+  <tr>
+   <td>wrap</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Indica se o texto deveria ser enrolado.</td>
+  </tr>
+ </tbody>
+</table>
+<p>{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}</p>
diff --git a/files/pt-br/web/html/elementos_block-level/index.html b/files/pt-br/web/html/block-level_elements/index.html
index 3feed31681..3feed31681 100644
--- a/files/pt-br/web/html/elementos_block-level/index.html
+++ b/files/pt-br/web/html/block-level_elements/index.html
diff --git a/files/pt-br/web/html/cors_imagens_habilitadas/index.html b/files/pt-br/web/html/cors_enabled_image/index.html
index 5e41b735fe..5e41b735fe 100644
--- a/files/pt-br/web/html/cors_imagens_habilitadas/index.html
+++ b/files/pt-br/web/html/cors_enabled_image/index.html
diff --git a/files/pt-br/web/html/dicas_para_criar_páginas_html_de_carregamento_rápido/index.html b/files/pt-br/web/html/dicas_para_criar_páginas_html_de_carregamento_rápido/index.html
deleted file mode 100644
index e693b6fed8..0000000000
--- a/files/pt-br/web/html/dicas_para_criar_páginas_html_de_carregamento_rápido/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-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/web/html/element/command/index.html b/files/pt-br/web/html/element/command/index.html
deleted file mode 100644
index 99a42fb9db..0000000000
--- a/files/pt-br/web/html/element/command/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: command
-slug: Web/HTML/Element/command
-translation_of: Web/HTML/Element/command
----
-<h2 class="editable" id="Sumário">Sumário</h2>
-
-<p>O elemento <code>command </code>representa um comando que o usuário pode chamar.</p>
-
-<h2 id="Contexto_de_uso">Contexto de uso</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td>Categorias de conteúdo</td>
-   <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a></td>
-  </tr>
-  <tr>
-   <td>Elementos permitidos</td>
-   <td>Nenhum, é um elemento vazio.</td>
-  </tr>
-  <tr>
-   <td>Omissão de tag</td>
-   <td>Deve ter uma tag inicial, mas não deve ter uma tag final.</td>
-  </tr>
-  <tr>
-   <td>Elementos pais permitidos</td>
-   <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
-  </tr>
-  <tr>
-   <td>Documento normativo</td>
-   <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Atributos">Atributos</h2>
-
-<p>Como todos ou outros elementos HTML, esse elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
-
-<dl>
- <dt>{{ htmlattrdef("checked") }}</dt>
- <dd>Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo <code>type</code> seja <code>checkbox </code>ou <code>radio</code>.</dd>
- <dt>{{ htmlattrdef("disabled") }}</dt>
- <dd>Indica que o elemento não está disponível.</dd>
- <dt>{{ htmlattrdef("icon") }}</dt>
- <dd>Atribui uma figura para representar o comando.</dd>
- <dt>{{ htmlattrdef("label") }}</dt>
- <dd>O nome do comando, como será mostrado para o usuário.</dd>
- <dt>{{ htmlattrdef("radiogroup") }}</dt>
- <dd>Esse atributo dá o nome de um grupo de comandos, com <code>type</code> sendo <code>radio</code>, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo <code>type</code> seja <code>radio</code>.</dd>
- <dt>{{ htmlattrdef("type") }}</dt>
- <dd>Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores:
- <ul>
-  <li>
-   <p><code>command</code> ou vazio que é o estado padrão e indica que é um comando normal.</p>
-  </li>
-  <li>
-   <p><code>checkbox</code> indica que o comando pode ser alternado utilizando uma caixa de seleção.</p>
-  </li>
-  <li>
-   <p><code>radio</code> indica que o comando pode ser alternado utilizando uma radiobutton.</p>
-  </li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Interface_do_DOM">Interface do DOM</h2>
-
-<p>Esse elemetno implementa a interface <code><a href="/en/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>.</p>
-
-<h2 id="Exemplos">Exemplos</h2>
-
-<pre class="brush: html">&lt;command type="command" label="Save" icon="icons/save.png" onclick="save()"&gt;
-</pre>
-
-<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Recurso</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Recurso</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p> </p>
-
-<p>{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}</p>
diff --git a/files/pt-br/web/html/element/conteúdo/index.html b/files/pt-br/web/html/element/content/index.html
index 1a1832de04..1a1832de04 100644
--- a/files/pt-br/web/html/element/conteúdo/index.html
+++ b/files/pt-br/web/html/element/content/index.html
diff --git a/files/pt-br/web/html/element/figura/index.html b/files/pt-br/web/html/element/figure/index.html
index 309a10c791..309a10c791 100644
--- a/files/pt-br/web/html/element/figura/index.html
+++ b/files/pt-br/web/html/element/figure/index.html
diff --git a/files/pt-br/web/html/element/input/data/index.html b/files/pt-br/web/html/element/input/date/index.html
index 0bb8fb07f8..0bb8fb07f8 100644
--- a/files/pt-br/web/html/element/input/data/index.html
+++ b/files/pt-br/web/html/element/input/date/index.html
diff --git a/files/pt-br/web/html/favicon/index.html b/files/pt-br/web/html/favicon/index.html
deleted file mode 100644
index 6b3bef6490..0000000000
--- a/files/pt-br/web/html/favicon/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: favicon
-slug: Web/HTML/favicon
----
-<p> </p>
-
-<h3 id="sect1"> </h3>
-
-<h3 id="Comentário_da_revisão">Comentário da revisão <a class="revision-comment-link" href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/Editor/Basics#The_revision_comment_box" title="Saiba como usar os comentários da revisão"> </a></h3>
-
-<section class="wiki-block" id="page-comment">
-<h3 id="sect2"> </h3>
-
-<p>Diga-nos porque fez adições e alterações. É opcional, mas irá fazer com que o histórico da página seja mais fácil de entender.</p>
-<input></section>
-
-<div class="wiki-block">
-<h3 id="É_necessário_revisão">É necessário revisão?</h3>
-
-<ul id="id_review_tags">
- <li><label><input> Técnico - exemplos de código, APIs ou tecnologias</label></li>
- <li><label><input> Editorial - prosa, gramática, ou conteúdo</label></li>
-</ul>
-</div>
-
-<section class="page-tags wiki-block" id="page-tags">
-<h3 id="sect3"> </h3>
-</section>
-
-<h3 id="Tags">Tags</h3>
-
-<p> </p>
diff --git a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html b/files/pt-br/web/html/global_attributes/spellcheck/index.html
index c379684839..c379684839 100644
--- a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html
+++ b/files/pt-br/web/html/global_attributes/spellcheck/index.html
diff --git a/files/pt-br/web/html/inline_elemente/index.html b/files/pt-br/web/html/inline_elements/index.html
index 7a5866b243..7a5866b243 100644
--- a/files/pt-br/web/html/inline_elemente/index.html
+++ b/files/pt-br/web/html/inline_elements/index.html
diff --git a/files/pt-br/web/html/microformatos/index.html b/files/pt-br/web/html/microformats/index.html
index 01e61069a7..01e61069a7 100644
--- a/files/pt-br/web/html/microformatos/index.html
+++ b/files/pt-br/web/html/microformats/index.html
diff --git a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html
deleted file mode 100644
index 5da1c3efa2..0000000000
--- a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Optimizing your pages for speculative parsing
-slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing
-translation_of: Glossary/speculative_parsing
----
-<p>Traditionally in browsers the HTML parser has run on the main thread and has blocked after a <code>&lt;/script&gt;</code> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.</p>
-<p>This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.</p>
-<h2 id="Making_speculative_loads_succeed">Making speculative loads succeed</h2>
-<p>There's only one rule for making speculative loads of linked scripts, style sheets and images succeed:</p>
-<ul>
-  <li>If you use a <code>&lt;base&gt;</code> element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via <code>document.write()</code> or <code>document.createElement()</code>.</li>
-</ul>
-<h2 id="Avoiding_losing_tree_builder_output">Avoiding losing tree builder output</h2>
-<p>Speculative tree building fails when <code>document.write()</code> changes the tree builder state such that the speculative state after the <code>&lt;/script&gt;</code> tag no longer holds when all the content inserted by <code>document.write()</code> has been parsed. However, only unusual uses of <code>document.write()</code> cause trouble. Here are the things to avoid:</p>
-<ul>
-  <li>Don't write unbalanced trees. <code>&lt;script&gt;document.write("&lt;div&gt;");&lt;/script&gt;</code> is bad. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> is OK.</li>
-  <li>Don't write an unfinished token. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div");&lt;/script&gt;</code> is bad.</li>
-  <li>Don't finish your writing with a carriage return. <code>&lt;script&gt;document.write("Hello World!\r");&lt;/script&gt;</code> is bad. <code>&lt;script&gt;document.write("Hello World!\n");&lt;/script&gt;</code> is OK.</li>
-  <li>Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> inside the <code>head</code> element will be interpreted as <code>&lt;script&gt;document.write("&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> which is unbalanced.</li>
-  <li>Don't let the semicolon of a named character reference be the last thing that is written. Due to a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=535530" title="https://bugzilla.mozilla.org/show_bug.cgi?id=535530">bug</a> in Firefox 4 though 10 (fixed in Firefox 11), <code>&lt;script&gt;document.write("foo&amp;nbsp;");&lt;/script&gt;</code> causes a speculation failure. However, <code>&lt;script&gt;document.write("&amp;nbsp;foo");&lt;/script&gt;</code> is OK.</li>
-  <li>Don't format part of a table. <code>&lt;table&gt;&lt;script&gt;document.write("&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;");&lt;/script&gt;&lt;/table&gt;</code> is bad. However, <code>&lt;script&gt;document.write("</code><code>&lt;table&gt;</code><code>&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;</code><code>&lt;/table&gt;</code><code>");&lt;/script&gt;</code> is OK.</li>
-  <li>TODO: document.write inside other formatting elements.</li>
-</ul>
diff --git a/files/pt-br/web/html/referenciahtml/index.html b/files/pt-br/web/html/reference/index.html
index f0eda6be3f..f0eda6be3f 100644
--- a/files/pt-br/web/html/referenciahtml/index.html
+++ b/files/pt-br/web/html/reference/index.html
diff --git a/files/pt-br/web/html/using_html5_audio_and_video/index.html b/files/pt-br/web/html/using_html5_audio_and_video/index.html
deleted file mode 100644
index 4577341105..0000000000
--- a/files/pt-br/web/html/using_html5_audio_and_video/index.html
+++ /dev/null
@@ -1,240 +0,0 @@
----
-title: Utilizando áudio e vídeo com HTML5
-slug: Web/HTML/Using_HTML5_audio_and_video
-translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video
----
-<p style="margin-left: 40px;">O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.</p>
-
-<h2 id="Incorporando_mídia">Incorporando mídia:</h2>
-
-<p>Incorporar mídia em documentos HTML é simples:</p>
-
-<pre class="brush: html">&lt;video src="<a class="linkification-ext" href="http://v2v.cc/~j/theora_testsuite/320x240.ogg" title="Linkification: http://v2v.cc/~j/theora_testsuite/320x240.ogg">http://v2v.cc/~j/theora_testsuite/320x240.ogg</a>" controls&gt;
-  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
-&lt;/video&gt;
-</pre>
-
-<p>Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.</p>
-
-<p>Aqui há um exemplo de áudio incorporado em um documento HTML</p>
-
-<pre class="brush: html">&lt;audio src="/test/audio.ogg"&gt;
-&lt;p&gt;Seu nevegador não suporta o elemento audio.&lt;/p&gt;
-&lt;/audio&gt;
-</pre>
-
-<p>O atributo <code>src</code> pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.</p>
-
-<pre class="brush: html">&lt;audio src="audio.ogg" controls autoplay loop&gt;
-&lt;p&gt;Seu navegador não suporta o elemento audio &lt;/p&gt;
-&lt;/audio&gt;
-</pre>
-
-<p>Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:</p>
-
-<ul>
- <li><code>controls</code> : Mostra os controles padrão para o áudio na página.</li>
- <li><code>autoplay</code> : Faz com que o áudio reproduza automaticamente.</li>
- <li><code>loop</code> : Faz com que o áudio repita automaticamente.</li>
-</ul>
-
-<pre class="brush: html"><code>&lt;audio src="audio.mp3" preload="auto" controls&gt;&lt;/audio&gt;</code>
-</pre>
-
-<p>O atributo <code>preload</code> é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:</p>
-
-<ul>
- <li><code>"none"</code> não carrega o arquivo</li>
- <li><code>"auto"</code> carrega o arquivo</li>
- <li><code>"metadata"</code> carrega apenas os meta dados do arquivo</li>
-</ul>
-
-<p>Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:</p>
-
-<pre class="brush: html">&lt;video controls&gt;
-  &lt;source src="foo.ogg" type="video/ogg"&gt;
-  &lt;source src="foo.mp4" type="video/mp4"&gt;
-  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
-&lt;/video&gt;
-</pre>
-
-<p>Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">media formats supported by the audio and video elements</a> para detalhes.</p>
-
-<p>Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:</p>
-
-<pre class="brush: html">&lt;video controls&gt;
-  &lt;source src="foo.ogg" type="video/ogg; codecs=dirac, speex"&gt;
-  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
-&lt;/video&gt;</pre>
-
-<p>Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.</p>
-
-<p>Se o atributo <code>type</code> não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo <code>source</code> é verificado. Se nenhum dos elementps <code>source</code> pode ser utilizado, um evento <code>error</code> é enviado para o elemento <code>video</code>. Se o atributo <code>type</code> estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo <code>source</code> é verificado.</p>
-
-<p>Veja <a href="/en/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media events</a> para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a>.</p>
-
-<h2 id="Controlando_a_reprodução_de_mídia">Controlando a reprodução de mídia</h2>
-
-<p>Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:</p>
-
-<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
-v.play();
-</pre>
-
-<p>A primeira linha pega o primeiro elemento video, e a segunda chama o método <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="en/nsIDOMHTMLMediaElement#play()"><code>play()</code></a> do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia</p>
-
-<p>Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.</p>
-
-<pre class="brush: html">&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
-&lt;div&gt;
-  &lt;button onclick="document.getElementById('demo').play()"&gt;Reproduzir o áudio&lt;/button&gt;
-  &lt;button onclick="document.getElementById('demo').pause()"&gt;Pausar o áudio&lt;/button&gt;
-  &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;Aumentar o volume&lt;/button&gt;
-  &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;Diminuir o volume&lt;/button&gt;
-&lt;/div&gt;
-</pre>
-
-<h2 id="Parando_o_download_de_mídia">Parando o download de mídia</h2>
-
-<p>Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.</p>
-
-<p>Esta é um modo para parar o download imediatamente:</p>
-
-<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src = "";
-</pre>
-
-<p>Ao definir o atributo <code>src</code> do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.</p>
-
-<h2 id="Navegando_pela_mídia">Navegando pela mídia</h2>
-
-<p>Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade <code>currentTime</code> no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.</p>
-
-<p>Você pode usar a propriedade <code>seekable</code> para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.</p>
-
-<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID');
-mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
-mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
-mediaElement.currentTime = 122; // Ir para 122 segundos
-mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
-</pre>
-
-<h2 id="Especificando_o_intervalo_de_reprodução">Especificando o intervalo de reprodução</h2>
-
-<p>Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.</p>
-
-<p>O intervalo é especificado usando a sintaxe:</p>
-
-<pre>#t=[tempoinicial],[tempofinal]
-</pre>
-
-<p>O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).</p>
-
-<p>Alguns exemplos:</p>
-
-<dl>
- <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt>
- <dd>Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.</dd>
- <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt>
- <dd>Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.</dd>
- <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt>
- <dd>Especifica que o vídeo deve ser reproduzido do início até 2 horas.</dd>
- <dt><span class="nowiki">http://foo.com/video.ogg#t=60,</span></dt>
- <dd>Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.</dd>
-</dl>
-
-<div class="geckoVersionNote" style="">
-<p>{{ gecko_callout_heading("9.0") }}</p>
-
-<p>O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.</p>
-</div>
-
-<h2 id="Opções_alternativas">Opções alternativas</h2>
-
-<p>O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.</p>
-
-<p>Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.</p>
-
-<h3 id="Utilizando_Flash">Utilizando Flash</h3>
-
-<p>Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:</p>
-
-<pre class="brush: html">&lt;video src="video.ogv" controls&gt;
-    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
-      &lt;param value="flvplayer.swf" name="movie"/&gt;
-    &lt;/object&gt;
-&lt;/video&gt;
-</pre>
-
-<p>Note que você não deve incluir <code>classid</code> na tag <code>object</code> para que outros navegadores além do Internet Explorer sejam compatíveis.</p>
-
-<h3 id="Reproduzindo_vídeos_em_Ogg_usando_uma_applet_Java">Reproduzindo vídeos em Ogg usando uma applet Java</h3>
-
-<p>Existe uma applet Java chamada <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:</p>
-
-<pre class="brush: html">&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
-  &lt;object type="application/x-java-applet"
-          width="320" height="240"&gt;
-     &lt;param name="archive" value="cortado.jar"&gt;
-     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
-     &lt;param name="url" value="my_ogg_video.ogg"&gt;
-     &lt;p&gt;You need to install Java to play this file.&lt;/p&gt;
-  &lt;/object&gt;
-&lt;/video&gt;
-</pre>
-
-<p>Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.</p>
-
-<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p>
-
-<p>A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento <code>error</code> ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.</p>
-
-<p>Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:</p>
-
-<pre class="brush: html">&lt;video&gt;
-&lt;source id="mp4_src"
-        src="video.mp4"
-        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
-&lt;/source&gt;
-&lt;source id="3gp_src"
-        src="video.3gp"
-        type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
-&lt;/source&gt;
-&lt;source id="ogg_src"
-        src="video.ogv"
-        type='video/ogg; codecs="theora, vorbis"'&gt;
-&lt;/source&gt;
-&lt;/video&gt;</pre>
-
-<p>Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos <code>error</code> antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.</p>
-
-<h3 id="Detectando_quando_nenhuma_fonte_foi_carregada">Detectando quando nenhuma fonte foi carregada</h3>
-
-<p>Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo <code>networkState</code> do elemento media. Se esse valor for <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, você saberá que todas as fontes falharam o carregamento.</p>
-
-<p>Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.</p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>Os elementos HTML relacionados a mídia: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li>
- <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li>
- <li><a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducing the Audio API Extension</a></li>
- <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
- <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
- <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li>
- <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li>
- <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, uma biblioteca JavaScript (mwEmbed) que suporta alternativas de reprodução utilizando HTML5, VLC Player, Java Cortado e OMTK Flash Vorbis player. (É utilizado pela Wikimedia)</li>
- <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, uma biblioteca Flash que implementa um decodificador Vorbis</li>
- <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, um wrapper em JavaScript para áudio e vídeo com alternativas de reprodução em flash, open source e GPL</li>
- <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, uma solução para reprodução de áudio e vídeo em Java, mantido pelo Xiph.org</li>
- <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, uma framework e reprodutor de mídia para HTML5(open source).</li>
- <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - framework aberta para áudio e vídeo em HTML5 com uma biblioteca Flash customizada que imita a API de HTML5 para navegadores antigos</li>
- <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - uma player de vídeo alternativo para HTML5</li>
-</ul>
-
-<p>{{ HTML5ArticleTOC() }}</p>
-
-<div>{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}</div>
diff --git a/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html b/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html
index 42830a10b9..42830a10b9 100644
--- a/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html
+++ b/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html
diff --git a/files/pt-br/web/http/basico_sobre_http/index.html b/files/pt-br/web/http/basics_of_http/index.html
index a89b456f12..a89b456f12 100644
--- a/files/pt-br/web/http/basico_sobre_http/index.html
+++ b/files/pt-br/web/http/basics_of_http/index.html
diff --git a/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html b/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html
index d8f2b6898d..d8f2b6898d 100644
--- a/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html
+++ b/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html
diff --git a/files/pt-br/web/http/basico_sobre_http/mime_types/index.html b/files/pt-br/web/http/basics_of_http/mime_types/index.html
index 3acce2553a..3acce2553a 100644
--- a/files/pt-br/web/http/basico_sobre_http/mime_types/index.html
+++ b/files/pt-br/web/http/basics_of_http/mime_types/index.html
diff --git a/files/pt-br/web/http/http/index.html b/files/pt-br/web/http/caching/index.html
index 9cfd4d4a0d..9cfd4d4a0d 100644
--- a/files/pt-br/web/http/http/index.html
+++ b/files/pt-br/web/http/caching/index.html
diff --git a/files/pt-br/web/http/compressão/index.html b/files/pt-br/web/http/compression/index.html
index a1f16b762f..a1f16b762f 100644
--- a/files/pt-br/web/http/compressão/index.html
+++ b/files/pt-br/web/http/compression/index.html
diff --git a/files/pt-br/web/http/gerenciamento_de_conexão_em_http_1.x/index.html b/files/pt-br/web/http/connection_management_in_http_1.x/index.html
index c67e52b062..c67e52b062 100644
--- a/files/pt-br/web/http/gerenciamento_de_conexão_em_http_1.x/index.html
+++ b/files/pt-br/web/http/connection_management_in_http_1.x/index.html
diff --git a/files/pt-br/web/http/controle_acesso_cors/index.html b/files/pt-br/web/http/cors/index.html
index 51470f94b7..51470f94b7 100644
--- a/files/pt-br/web/http/controle_acesso_cors/index.html
+++ b/files/pt-br/web/http/cors/index.html
diff --git a/files/pt-br/web/http/headers/conexão/index.html b/files/pt-br/web/http/headers/connection/index.html
index b8df737d95..b8df737d95 100644
--- a/files/pt-br/web/http/headers/conexão/index.html
+++ b/files/pt-br/web/http/headers/connection/index.html
diff --git a/files/pt-br/web/http/headers/localização/index.html b/files/pt-br/web/http/headers/location/index.html
index 2b8ebcc404..2b8ebcc404 100644
--- a/files/pt-br/web/http/headers/localização/index.html
+++ b/files/pt-br/web/http/headers/location/index.html
diff --git a/files/pt-br/web/http/mensagens/index.html b/files/pt-br/web/http/messages/index.html
index 895c58d2e8..895c58d2e8 100644
--- a/files/pt-br/web/http/mensagens/index.html
+++ b/files/pt-br/web/http/messages/index.html
diff --git a/files/pt-br/web/http/redirecionamento/index.html b/files/pt-br/web/http/redirections/index.html
index c429ac82cb..c429ac82cb 100644
--- a/files/pt-br/web/http/redirecionamento/index.html
+++ b/files/pt-br/web/http/redirections/index.html
diff --git a/files/pt-br/web/http/server-side_access_control/index.html b/files/pt-br/web/http/server-side_access_control/index.html
deleted file mode 100644
index b1cb255383..0000000000
--- a/files/pt-br/web/http/server-side_access_control/index.html
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: Controle de Acesso do lado do servidor (CORS)
-slug: Web/HTTP/Server-Side_Access_Control
-translation_of: Web/HTTP/CORS
-translation_of_original: Web/HTTP/Server-Side_Access_Control
----
-<p><font><font>Os sistemas de controle de acesso realizam  </font><font> identificação de </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://searchsoftwarequality.techtarget.com/definition/authorization&amp;usg=ALkJrhgrx7L6XQEL-QG4A5SY3jla7SrNHA" rel="noopener"><font><font>autorização</font></font></a><font><font> ,  </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://searchsecurity.techtarget.com/definition/authentication&amp;usg=ALkJrhhWsbD8tDshChXZ3hnAhempgwOyXw" rel="noopener"><font><font>autenticação</font></font></a><font><font> , aprovação de acesso e prestação de contas de entidades por meio de credenciais de login, incluindo  </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://searchsecurity.techtarget.com/definition/password&amp;usg=ALkJrhilnjZN5ktJEcxF-46B0IA7otOZEg" rel="noopener"><font><font>senhas</font></font></a><font><font> , números de identificação pessoal (PINs),  </font><font> varreduras </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://searchsecurity.techtarget.com/definition/biometrics&amp;usg=ALkJrhhhm_VuMmwP8y53PpOCxVJttPPfhA" rel="noopener"><font><font>biométricas</font></font></a><font><font> e chaves físicas ou eletrônicas.</font></font></p>
-
-<p><font><font>O controle de acesso é uma técnica de segurança que pode ser usada para regular quem ou o que pode exibir ou usar recursos em um ambiente de computação.</font></font></p>
-
-<p>{{HTTPSidebar}}</p>
-
-<p><font><font>Os navegadores enviam </font></font><a href="/pt-BR/docs/Web/HTTP/Headers">Cabeçalhos HTTP </a><font><font><a href="/pt-BR/docs/"> </a>específicos </font><font>para solicitações entre sites iniciadas de dentro </font></font>XMLHttpRequest<font><font> </font></font><font><font>ou da </font></font><a href="/en-US/docs/Web/API/Fetch_API"> </a><a href="/pt-BR/docs/Web/API/Fetch_API/Using_Fetch">Fetch Api </a><font><font>. </font><font>Eles também esperam ver cabeçalhos HTTP específicos enviados de volta com respostas entre sites. </font><font>Uma visão geral desses cabeçalhos, incluindo amostra de código JavaScript que inicia solicitações e processa respostas do servidor, além de uma discussão sobre cada cabeçalho, pode ser encontrada no artigo</font></font> <a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">HTTP Access Control (CORS) article</a><font><font> e deve ser lida como um artigo complementar para este. </font><font>Este artigo aborda o processamento de </font></font><strong><font><font>solicitações de controle de acesso</font></font></strong><font><font> e a formulação de </font></font><strong><font><font>respostas de controle de acesso</font></font></strong><font><font>em PHP. </font><font>O público-alvo deste artigo são programadores ou administradores de servidores. </font><font>Embora os exemplos de código mostrados aqui estejam em PHP, conceitos semelhantes se aplicam ao ASP.net, Perl, Python, Java, etc .; </font><font>em geral, esses conceitos podem ser aplicados a qualquer ambiente de programação do servidor que processa solicitações HTTP e formula dinamicamente respostas HTTP.</font></font></p>
-
-<h2 id="Discussão_de_cabeçalhos_HTTP"><font><font>Discussão de cabeçalhos HTTP</font></font></h2>
-
-<p><font><font>O artigo que cobre os<a href="/pt-BR/docs/Web/HTTP/Headers"> cabeçalhos HTTP usados por clientes e servidores</a></font></font> <font><font>deve ser considerado leitura de pré-requisito.</font></font></p>
-
-<h2 id="Amostras_de_código_de_trabalho"><font><font>Amostras de código de trabalho</font></font></h2>
-
-<p><font><font>Os trechos de PHP (e as invocações de JavaScript para o servidor) nas seções subseqüentes são obtidos das </font></font><a class="external" href="http://arunranga.com/examples/access-control/" rel="noopener"><font><font>amostras de código de trabalho postadas aqui. </font></font></a><font><font>Eles funcionarão em navegadores que implementam sites cruzados </font></font>{{domxref("XMLHttpRequest")}}.</p>
-
-<h2 id="Solicitações_simples_entre_sites"><font><font>Solicitações simples entre sites</font></font></h2>
-
-<p><a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">Solicitações simples de controle de acesso </a><font><font><a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests"> </a>são iniciadas quando:</font></font></p>
-
-<ul>
- <li><font><font>Um HTTP / 1.1 </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/GET" title="O método HTTP GET solicita uma representação do recurso especificado.  Solicitações usando GET devem recuperar apenas dados."><code>GET</code></a><font><font> ou a </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor.  O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> é usado como método de solicitação. </font><font>No caso de um POST, o </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Content-Type" title="O cabeçalho da entidade Content-Type é usado para indicar o tipo de mídia do recurso."><code>Content-Type</code></a><font><font> do corpo do pedido é uma de </font></font><code>application/x-www-form-urlencoded</code><font><font>, </font></font><code>multipart/form-data</code><font><font>ou</font></font><code>text/plain.</code></li>
- <li><font><font>Nenhum cabeçalho personalizado é enviado com a solicitação HTTP (como </font></font><code>X-Modified</code><font><font>, etc.)</font></font></li>
-</ul>
-
-<p><font><font>Nesse caso, as respostas podem ser enviadas de volta com base em algumas considerações.</font></font></p>
-
-<ul>
- <li><font><font>Se o recurso em questão for amplamente acessado (como qualquer recurso HTTP acessado pelo GET), o envio do </font><font>cabeçalho será suficiente, a </font><strong><font>menos que</font></strong><font> o recurso precise de credenciais, como </font><font>informações de autenticação de </font><a href="/pt-BR/docs/Web/HTTP/Cookies"><font>cookies</font></a><font> e HTTP. </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: *</code></li>
- <li><font><font>Se o recurso deve ser mantido restrito com base no domínio do solicitante, </font></font><strong><font><font>OU</font></font></strong><font><font> se o recurso precisar ser acessado com credenciais (ou define credenciais), </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&amp;usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina.  Não inclui nenhuma informação de caminho, mas apenas o nome do servidor.  É enviado com solicitações CORS, bem como com solicitações POST.  É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font> pode ser necessário </font><font>filtrar pelo </font><font>cabeçalho </font><font>da solicitação </font><font>ou, pelo menos, repetir o retorno do solicitante </font></font><code>Origin</code><font><font> ( por exemplo </font><font>). </font><font>Além disso, o </font><font>cabeçalho deverá ser enviado. </font><font>Isso é discutido em uma </font><a href="/pt-BR/docs/Web/HTTP/Server-Side_Access_Control"><font>seção subsequente</font></a><font> . </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://arunranga.com/&amp;usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener">http://arunranga.com </a></code><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials" title='O cabeçalho de resposta Access-Control-Allow-Credentials informa aos navegadores se deve expor a resposta ao código JavaScript de front-end quando o modo de credenciais da solicitação (Request.credentials) é "include".'><code>Access-Control-Allow-Credentials</code></a><code>: true</code></li>
-</ul>
-
-<p><font><font>A seção </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso simples</font></font></a><font><font> mostra as trocas de cabeçalho entre cliente e servidor. </font><font>Aqui está um segmento de código PHP que lida com uma solicitação simples:</font></font></p>
-
-<pre class="brush: php">&lt;?php
-
-// Consideremos acesso apenas ao domínio arunranga.com
-// Que achamos seguro acessar esse recurso como aplicattion / xml
-
-if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Content-type: application/xml');
-    readfile('arunerDotNetResource.xml');
-} else {
-  header('Content-Type: text/html');
-  echo "&lt;html&gt;";
-  echo "&lt;head&gt;";
-  echo "   &lt;title&gt;Another Resource&lt;/title&gt;";
-  echo "&lt;/head&gt;";
-  echo "&lt;body&gt;",
-       "&lt;p&gt;This resource behaves two-fold:";
-  echo "&lt;ul&gt;",
-         "&lt;li&gt;If accessed from &lt;code&gt;http://arunranga.com&lt;/code&gt; it returns an XML document&lt;/li&gt;";
-  echo   "&lt;li&gt;If accessed from any other origin including from simply typing in the URL into the browser's address bar,";
-  echo   "you get this HTML document&lt;/li&gt;",
-       "&lt;/ul&gt;",
-     "&lt;/body&gt;",
-   "&lt;/html&gt;";
-}
-?&gt;
-</pre>
-
-<p><font><font>O </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&amp;usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina.  Não inclui nenhuma informação de caminho, mas apenas o nome do servidor.  É enviado com solicitações CORS, bem como com solicitações POST.  É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font> item </font><font>acima verifica se o </font><font>cabeçalho enviado pelo navegador (obtido através de $ _SERVER ['HTTP_ORIGIN']]) corresponde a ' </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://arunranga.com/&amp;usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener"><font><font>http://arunranga.com</font></font></a><font><font> '. </font><font>Se sim, ele retorna </font><font>. </font><font>Este exemplo pode ser </font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://arunranga.com/examples/access-control/&amp;usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font>visto em execução aqui</font></a><font> . </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://arunranga.com/&amp;usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener">http://arunranga.com</a></code></p>
-
-<h2 id="Solicitações_comprovadas"><font><font>Solicitações comprovadas</font></font></h2>
-
-<p><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso comprovadas</font></font></a><font><font> ocorrem quando:</font></font></p>
-
-<ul>
- <li><font><font>Um outro método que não </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/GET" title="O método HTTP GET solicita uma representação do recurso especificado.  Solicitações usando GET devem recuperar apenas dados."><code>GET</code></a><font><font> ou </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor.  O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font>é utilizado, ou se </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor.  O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> é usado com um </font></font>{{HTTPHeader("Content-Type")}} diferente de um <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data </code>ou <font><font> </font></font><code>text/plain</code><font><font>. </font></font><span class="tlid-translation translation" lang="pt"><span title="">Por exemplo, se o Tipo de Conteúdo do corpo <code>POST</code> for <code>application / xml</code>, uma solicitação será comprovada.</span></span></li>
- <li><font><font>Um cabeçalho personalizado (como </font></font><code>X-PINGARUNER</code><font><font>) é enviado com a solicitação.</font></font></li>
-</ul>
-
-<p><font><font>A seção </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso</font></font></a><font><font> comprovado mostra uma troca de cabeçalho entre cliente e servidor. </font><font>Um recurso do servidor que responde a uma solicitação de comprovação precisa poder fazer as seguintes determinações:</font></font></p>
-
-<ul>
- <li><font><font>Filtragem baseada </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&amp;usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina.  Não inclui nenhuma informação de caminho, mas apenas o nome do servidor.  É enviado com solicitações CORS, bem como com solicitações POST.  É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font>, se houver.</font></font></li>
- <li><font><font>Resposta a uma </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/OPTIONS" title="O método HTTP OPTIONS é usado para descrever as opções de comunicação para o recurso de destino.  O cliente pode especificar uma URL para o método OPTIONS ou um asterisco (*) para se referir a todo o servidor."><code>OPTIONS</code></a><font><font> solicitação (que é a solicitação de comprovação), incluindo o envio de valores necessários com </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Methods" title="O cabeçalho de resposta Access-Control-Allow-Methods especifica o método ou métodos permitidos ao acessar o recurso em resposta a uma solicitação de comprovação."><code>Access-Control-Allow-Methods</code></a><font><font>, </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Headers" title="O cabeçalho de resposta Access-Control-Allow-Headers é usado em resposta a uma solicitação de comprovação que inclui os Access-Control-Request-Headers para indicar quais cabeçalhos HTTP podem ser usados ​​durante a solicitação real."><code>Access-Control-Allow-Headers</code></a><font><font>(se forem necessários cabeçalhos adicionais para que o aplicativo funcione) e, se credenciais forem necessárias para este recurso </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials" title='O cabeçalho de resposta Access-Control-Allow-Credentials informa aos navegadores se deve expor a resposta ao código JavaScript de front-end quando o modo de credenciais da solicitação (Request.credentials) é "include".'><code>Access-Control-Allow-Credentials</code></a><font><font>,.</font></font></li>
- <li><font><font>Resposta à solicitação real, incluindo manipulação de </font></font><code>POST</code><font><font> dados, etc.</font></font></li>
-</ul>
-
-<p><font><font>Aqui está um exemplo no PHP de manipulação de uma </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font><font>solicitação preflighted</font></font></a><font><font> :</font></font></p>
-
-<pre class="brush: php">&lt;?php
-
-if($_SERVER['REQUEST_METHOD'] == "GET") {
-
-  header('Content-Type: text/plain');
-  echo "This HTTP resource is designed to handle POSTed XML input";
-  echo "from arunranga.com and not be retrieved with GET";
-
-} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
-  // Diga ao cliente que apoiamos arunranga.com
-  // e que esse comprovante seja válido por 20 dias
-
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
-    header('Access-Control-Allow-Headers: X-PINGARUNER');
-    header('Access-Control-Max-Age: 1728000');
-    header("Content-Length: 0");
-    header("Content-Type: text/plain");
-    //exit(0);
-  } else {
-    header("HTTP/1.1 403 Access Forbidden");
-    header("Content-Type: text/plain");
-    echo "You cannot repeat this request";
-  }
-
-} elseif($_SERVER['REQUEST_METHOD'] == "POST") {
-  //  Manipula o post primeiro obtendo o blob XML POST
-  // e, em seguida, fazendo algo e enviando resultados para o cliente
-
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    $postData = file_get_contents('php://input');
-    $document = simplexml_load_string($postData);
-
-    // Faça algo com os dados POST
-
-    $ping = $_SERVER['HTTP_X_PINGARUNER'];
-
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Content-Type: text/plain');
-    echo // some string response after processing
-  } else {
-    die("POSTing Only Allowed from arunranga.com");
-  }
-} else {
-    die("No Other Methods Allowed");
-}
-?&gt;
-</pre>
-
-<p><font><font>Observe os cabeçalhos apropriados sendo enviados de volta em resposta à </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/OPTIONS" title="O método HTTP OPTIONS é usado para descrever as opções de comunicação para o recurso de destino.  O cliente pode especificar uma URL para o método OPTIONS ou um asterisco (*) para se referir a todo o servidor."><code>OPTIONS</code></a><font><font> comprovação, bem como aos </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor.  O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> dados. </font><font>Um recurso lida com a comprovação e com a solicitação real. </font><font>Na resposta à </font></font><code>OPTIONS</code><font><font> solicitação, o servidor notifica o cliente de que a solicitação real pode realmente ser feita com o </font></font><code>POST</code><font><font> método e campos de cabeçalho como </font></font><code>X-PINGARUNER</code><font><font>podem ser enviados com a solicitação real. </font><font>Este exemplo pode ser </font></font><a class="external" href="http://arunranga.com/examples/access-control/" rel="noopener"><font><font>visto em execução aqui</font></font></a><font><font> .</font></font></p>
-
-<h2 id="Solicitações_credenciadas"><font><font>Solicitações credenciadas</font></font></h2>
-
-<p><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Requests_with_credentials"><font><font>Solicitações de controle de acesso credenciadas</font></font></a><font><font> - ou seja, solicitações acompanhadas de informações sobre </font></font><a href="/pt-BR/docs/Web/HTTP/Cookies"><font><font>cookies</font></font></a><font><font> ou autenticação HTTP (e que esperam que os cookies sejam enviados com respostas) - podem ser </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Simple_requests"><font><font>simples</font></font></a><font><font> ou </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font><font>comprovadas</font></font></a><font><font> , dependendo dos métodos de solicitação utilizados.</font></font></p>
-
-<p><font><font>Em um </font><font>cenário de </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Simple_requests"><font><font>solicitação simples</font></font></a><font><font> , a solicitação será enviada com cookies (por exemplo, se o </font></font><code><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials&amp;usg=ALkJrhgvgswWP53yIsn9CbNdLjlz6qnTuw">withCredentials</a></code><font><font> sinalizador estiver ativado </font></font><a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="Use objetos XMLHttpRequest (XHR) para interagir com servidores.  Você pode recuperar dados de um URL sem precisar atualizar a página inteira.  Isso permite que uma página da Web atualize apenas parte de uma página sem interromper o que o usuário está fazendo."><code>XMLHttpRequest</code></a><font><font>). </font><font>Se o servidor responder com </font><font>anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da web. </font><font>Em uma </font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font>solicitação comprovada</font></a><font> , </font></font>Se o servidor responder com <code><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</a>: true</code> anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da Web. Em uma Solicitação Comprovada, o servidor pode responder com <code>Acesso-Controle-Permitir Credenciais: true</code> à solicitação <code>OPTIONS</code>.</p>
-
-<p><font><font>Aqui está um PHP que lida com solicitações credenciadas:</font></font></p>
-
-<pre class="brush: php">&lt;?php
-
-if($_SERVER['REQUEST_METHOD'] == "GET") {
-  header('Access-Control-Allow-Origin: http://arunranga.com');
-  header('Access-Control-Allow-Credentials: true');
-  header('Cache-Control: no-cache');
-  header('Pragma: no-cache');
-  header('Content-Type: text/plain');
-
-  // Primeiro, veja se existe um cookie
-  if (!isset($_COOKIE["pageAccess"])) {
-    setcookie("pageAccess", 1, time()+2592000);
-    echo 'I do not know you or anyone like you so I am going to';
-    echo 'mark you with a Cookie :-)';
-  } else {
-    $accesses = $_COOKIE['pageAccess'];
-    setcookie('pageAccess', ++$accesses, time()+2592000);
-    echo 'Hello -- I know you or something a lot like you!';
-    echo 'You have been to ', $_SERVER['SERVER_NAME'], ';
-    echo 'at least ', $accesses-1, ' time(s) before!';
-  }
-} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
-  // Diga ao cliente que esse comprovante permanece válido por apenas 20 dias
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Access-Control-Allow-Methods: GET, OPTIONS');
-    header('Access-Control-Allow-Credentials: true');
-    header('Access-Control-Max-Age: 1728000');
-    header("Content-Length: 0");
-    header("Content-Type: text/plain");
-  } else {
-    header("HTTP/1.1 403 Access Forbidden");
-    header("Content-Type: text/plain");
-    echo "You cannot repeat this request";
-  }
-} else {
-  die("This HTTP Resource can ONLY be accessed with GET or OPTIONS");
-}
-?&gt;
-</pre>
-
-<p><font><font>Observe que, no caso de solicitações credenciadas, o </font></font><code>Access-Control-Allow-Origin:</code><font><font> cabeçalho </font></font><strong><font><font>não deve</font></font></strong><font><font> ter um valor curinga de <strong>"*"</strong>. </font><font>Ele </font></font><strong><font><font>deve</font></font></strong><font><font> mencionar um domínio de origem válido. </font><font>O exemplo acima pode ser visto em </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://arunranga.com/examples/access-control/&amp;usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font><font>execução aqui</font></font></a><font><font> .</font></font></p>
-
-<h2 id="Exemplos_do_Apache"><font><font>Exemplos do Apache</font></font></h2>
-
-<h3 id="Restringir_o_acesso_a_determinados_URIs"><font><font>Restringir o acesso a determinados URIs</font></font></h3>
-
-<p><font><font>Um truque útil é usar uma reescrita do Apache, variável de ambiente e cabeçalhos para aplicar </font></font><code>Access-Control-Allow-*</code><font><font>a determinados URIs. </font><font>Isso é útil, por exemplo, para restringir solicitações de origem cruzada a </font></font><code>GET /api(.*).json</code><font><font>solicitações sem credenciais:</font></font></p>
-
-<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
-Header set Access-Control-Allow-Origin "*" env=CORS
-Header set Access-Control-Allow-Methods "GET" env=CORS
-Header set Access-Control-Allow-Credentials "false" env=CORS
-</pre>
-
-<h2 id="Veja_também"><font><font>Veja também</font></font></h2>
-
-<ul>
- <li><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=http://arunranga.com/examples/access-control/&amp;usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font><font>Exemplos de controle de acesso em ação</font></font></a></li>
- <li><a class="external" href="https://github.com/jackblackevo/cors-jsonp-sample" rel="noopener"><font><font>Amostra do lado do cliente e do lado do servidor (Java) para compartilhamento de recursos de origem cruzada (CORS)</font></font></a></li>
- <li><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Controle de acesso HTTP cobrindo os cabeçalhos HTTP</font></font></a></li>
- <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="Use objetos XMLHttpRequest (XHR) para interagir com servidores.  Você pode recuperar dados de um URL sem precisar atualizar a página inteira.  Isso permite que uma página da Web atualize apenas parte de uma página sem interromper o que o usuário está fazendo."><code>XMLHttpRequest</code></a></li>
- <li><a href="/pt-BR/docs/Web/API/Fetch_API"><font><font>Fetch API</font></font></a></li>
-</ul>
diff --git a/files/pt-br/web/javascript/guide/closures/index.html b/files/pt-br/web/javascript/closures/index.html
index efc7578d7d..efc7578d7d 100644
--- a/files/pt-br/web/javascript/guide/closures/index.html
+++ b/files/pt-br/web/javascript/closures/index.html
diff --git a/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html b/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html
index 3d7feb0bd4..3d7feb0bd4 100644
--- a/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html
+++ b/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html
diff --git a/files/pt-br/web/javascript/guide/coleções_chaveadas/index.html b/files/pt-br/web/javascript/guide/coleções_chaveadas/index.html
deleted file mode 100644
index cb626865f8..0000000000
--- a/files/pt-br/web/javascript/guide/coleções_chaveadas/index.html
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Coleções chaveadas
-slug: Web/JavaScript/Guide/Coleções_chaveadas
-tags:
-  - Coleções
-  - Guía
-  - JavaScript
-  - Mapas
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
-
-<p class="summary">This chapter introduces collections of data which are ordered by a key; Map and Set objects contain elements which are iterable in the order of insertion.</p>
-
-<h2 id="Maps">Maps</h2>
-
-<h3 id="Map_object"><code>Map</code> object</h3>
-
-<p>ECMAScript 6 introduces a new data structure to map values to values. A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order</p>
-
-<p>The following code shows some basic operations with a <code>Map</code>. See also the {{jsxref("Map")}} reference page for more examples and the complete API. You can use a {{jsxref("Statements/for...of","for...of")}} loop to return an array of <code>[key, value]</code> for each iteration.</p>
-
-<pre class="brush: js">var sayings = new Map();
-sayings.set("dog", "woof");
-sayings.set("cat", "meow");
-sayings.set("elephant", "toot");
-sayings.size; // 3
-sayings.get("fox"); // undefined
-sayings.has("bird"); // false
-sayings.delete("dog");
-
-for (var [key, value] of sayings) {
-  console.log(key + " goes " + value);
-}
-// "cat goes meow"
-// "elephant goes toot"
-</pre>
-
-<h3 id="Object_and_Map_compared"><code>Object</code> and <code>Map</code> compared</h3>
-
-<p>Traditionally, {{jsxref("Object", "objects", "", 1)}} have been used to map strings to values. Objects allow you to set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. <code>Map</code> objects, however, have a few more advantages that make them better maps.</p>
-
-<ul>
- <li>The keys of an <code>Object</code> are {{jsxref("Global_Objects/String","Strings")}}, where they can be of any value for a <code>Map</code>.</li>
- <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li>
- <li>The iteration of maps is in insertion order of the elements.</li>
- <li>An <code>Object</code> has a prototype, so there are default keys in the map. (this can be bypassed using <code>map = Object.create(null)</code>).</li>
-</ul>
-
-<p>These two tips can help you to decide whether to use a <code>Map</code> or an <code>Object</code>:</p>
-
-<ul>
- <li>Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.</li>
- <li>Use objects when there is logic that operates on individual elements.</li>
-</ul>
-
-<h3 id="WeakMap_object"><code>WeakMap</code> object</h3>
-
-<p>The {{jsxref("WeakMap")}} object is a collection of key/value pairs in which the <strong>keys are objects only</strong> and the values can be arbitrary values. The object references in the keys are held <em>weakly</em> meaning that they are target of garbage collection (GC) if there is no other reference to the object anymore. The <code>WeakMap</code> API is the same as the <code>Map</code> API.</p>
-
-<p>One difference to <code>Map</code> objects is that <code>WeakMap</code> keys are not enumerable (i.e. there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.</p>
-
-<p>For more information and example code, see also "Why <em>Weak</em>Map?" on the {{jsxref("WeakMap")}} reference page.</p>
-
-<p>One use case of <code>WeakMap</code> objects is to store private data for an object or to hide implementation details. The following example is from Nick Fitzgerald blog post <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. The private data and methods belong inside the object and are stored in the <code>privates</code> WeakMap object. Everything exposed on the instance and prototype is public; everything else is inaccessible from the outside world because <code>privates</code> is not exported from the module</p>
-
-<pre class="brush: js">const privates = new WeakMap();
-
-function Public() {
-  const me = {
-    // Private data goes here
-  };
-  privates.set(this, me);
-}
-
-Public.prototype.method = function () {
-  const me = privates.get(this);
-  // Do stuff with private data in `me`...
-};
-
-module.exports = Public;
-</pre>
-
-<h2 id="Sets">Sets</h2>
-
-<h3 id="Set_object"><code>Set</code> object</h3>
-
-<p>{{jsxref("Set")}} objects are collections of values. You can iterate its elements in insertion order. A value in a <code>Set</code> may only occur once; it is unique in the <code>Set</code>'s collection.</p>
-
-<p>The following code shows some basic operations with a <code>Set</code>. See also the {{jsxref("Set")}} reference page for more examples and the complete API.</p>
-
-<pre class="brush: js">var mySet = new Set();
-mySet.add(1);
-mySet.add("some text");
-mySet.add("foo");
-
-mySet.has(1); // true
-mySet.delete("foo");
-mySet.size; // 2
-
-for (let item of mySet) console.log(item);
-// 1
-// "some text"
-</pre>
-
-<h3 id="Converting_between_Array_and_Set">Converting between Array and Set</h3>
-
-<p>You can create an {{jsxref("Array")}} from a Set using {{jsxref("Array.from")}} or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>. Also, the <code>Set</code> constructor accepts an <code>Array</code> to convert in the other direction. Note again that <code>Set</code> objects store unique values, so any duplicate elements from an Array are deleted when converting.</p>
-
-<pre class="brush: js">Array.from(mySet);
-[...mySet2];
-
-mySet2 = new Set([1,2,3,4]);
-</pre>
-
-<h3 id="Array_and_Set_compared"><code>Array</code> and <code>Set</code> compared</h3>
-
-<p>Traditionally, a set of elements has been stored in arrays in JavaScript in a lot of situations. The new <code>Set</code> object, however, has some advantages:</p>
-
-<ul>
- <li>Checking whether an element exists in an collection using {{jsxref("Array.indexOf", "indexOf")}} for arrays is slow.</li>
- <li><code>Set</code> objects let you delete elements by their value. With an array you would have to splice based on a element's index.</li>
- <li>The value {{jsxref("NaN")}} can not be found with <code>indexOf</code> in array.</li>
- <li><code>Set</code> objects store unique values, you don't have to keep track of duplicates by yourself.</li>
-</ul>
-
-<h3 id="WeakSet_object"><code>WeakSet</code> object</h3>
-
-<p>{{jsxref("WeakSet")}} objects are collections of objects. An object in the <code>WeakSet</code> may only occur once; it is unique in the <code>WeakSet</code>'s collection and objects are not enumerable.</p>
-
-<p>The main differences to the {{jsxref("Set")}} object are:</p>
-
-<ul>
- <li>In contrast to <code>Sets</code>, <code>WeakSets</code> are <strong>collections of objects only</strong> and not of arbitrary values of any type.</li>
- <li>The <code>WeakSet</code> is <em>weak</em>: References to objects in the collection are held weakly. If there is no other reference to an object stored in the <code>WeakSet</code>, they can be garbage collected. That also means that there is no list of current objects stored in the collection. <code>WeakSets</code> are not enumerable.</li>
-</ul>
-
-<p>The use cases of <code>WeakSet</code> objects are limited. They will not leak memory so it can be safe to use DOM elements as a key and mark them for tracking purposes, for example.</p>
-
-<h2 id="Key_and_value_equality_of_Map_and_Set">Key and value equality of <code>Map</code> and <code>Set</code></h2>
-
-<p>Both, the key equality of <code>Map</code> objects and the value equality of <code>Set</code> objects, are based on the "<a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-samevaluezero">same-value-zero algorithm</a>":</p>
-
-<ul>
- <li>Equality works like the identity comparison operator <code>===</code>.</li>
- <li><code>-0</code> and <code>+0</code> are considered equal.</li>
- <li>{{jsxref("NaN")}} is considered equal to itself (contrary to <code>===</code>).</li>
-</ul>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/pt-br/web/javascript/guide/declarações/index.html b/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html
index e352b58f6d..e352b58f6d 100644
--- a/files/pt-br/web/javascript/guide/declarações/index.html
+++ b/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html
diff --git a/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html b/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html
index 55a4c928a5..55a4c928a5 100644
--- a/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html
+++ b/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html
diff --git a/files/pt-br/web/javascript/guide/funções/index.html b/files/pt-br/web/javascript/guide/functions/index.html
index 7077d1787b..7077d1787b 100644
--- a/files/pt-br/web/javascript/guide/funções/index.html
+++ b/files/pt-br/web/javascript/guide/functions/index.html
diff --git a/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html b/files/pt-br/web/javascript/guide/grammar_and_types/index.html
index 7920ee6b1a..7920ee6b1a 100644
--- a/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html
+++ b/files/pt-br/web/javascript/guide/grammar_and_types/index.html
diff --git a/files/pt-br/web/javascript/guide/igualdade/index.html b/files/pt-br/web/javascript/guide/igualdade/index.html
deleted file mode 100644
index 57f1c2fdcc..0000000000
--- a/files/pt-br/web/javascript/guide/igualdade/index.html
+++ /dev/null
@@ -1,259 +0,0 @@
----
-title: Igualdade em JavaScript
-slug: Web/JavaScript/Guide/Igualdade
-translation_of: Web/JavaScript/Equality_comparisons_and_sameness
-translation_of_original: Web/JavaScript/Guide/Sameness
----
-<p>A ES6 possui três facilidades internas para determinar se algum <var>x</var> e algum <var>y</var> são "os mesmos". Elas são: igualdade ou "igual duplo" (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a>), igualdade rigorosa ou "igual triplo" (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a>), e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>. (Note que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> foi adicionado na ES6. Ambos igual duplo e igual triplo existiam antes da ES6, e seu comportamento permanece o mesmo.)</p>
-<h2 id="Visão_geral">Visão geral</h2>
-<p>Para demonstração, aqui estão as três comparações de igualdade em uso:</p>
-<pre class="brush:js">x == y</pre>
-<pre class="brush:js">x === y</pre>
-<pre class="brush:js">Object.is(x, y)</pre>
-<p>De modo breve, o operador igual duplo irá realizar uma conversão de tipo na hora de  comparar duas coisas; o operador igual triplo fará a mesma comparação sem conversão de tipo (simplesmente sempre retornando <code>false</code> se os tipos forem diferentes); e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> se comportará da mesma forma que o operador igual triplo, mas lidando de forma especial com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> e <code>-0</code> e <code>+0</code> de modo que os dois últimos não são considerados os mesmos, enquanto que <code>Object.is(NaN, NaN)</code> será <code>true</code>. (Comparar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> geralmente—i.e., usando-se o operador igual duplo ou o operador igual triplo—resulta em <code>false</code>, de acordo com a IEEE 754.)</p>
-<p>Note que a distinção entre todas essas formas de comparação tem a ver com a forma com que lidam com primitivos; nenhuma delas compara se os parâmetros são conceitualmente similares em estrutura. Para quaisquer objetos não-primitivos <var>x</var> e <var>y</var> que têm a mesma estrutura mas que são objetos distintos, todas as formas de comparação acima resultarão no valor <code>false</code>.</p>
-<p>Por exemplo:</p>
-<pre class="brush:js">let x = { value: 17 };
-let y = { value: 17 };
-console.log(Object.is(x, y)); // false;
-console.log(x === y);         // false
-console.log(x == y);          // false</pre>
-<h2 id="Igualdade_abstrata_igualdade_rigorosa_e_mesmo_valor">Igualdade abstrata, igualdade rigorosa, e mesmo valor</h2>
-<p>Na ES5, a comparação realizada por <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> é descrita na <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Seção 11.9.3, O Algoritmo de Igualdade Abstrata</a>. A comparação <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> é descrita em <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, O Algoritmo de Igualdade Rigorosa</a>. (Dê uma olhada nestes. Eles são rápidos e legíveis. Dica: leia o algoritmo de igualdade rigorosa primeiro.) A ES5 também descreve, na <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Seção 9.12, O Algoritmo de MesmoValor</a> para ser usado internamente pelo engine JS. Ele é em sua maioria similar ao Algoritmo de Igualdade Rigorosa, com exceção de que 11.9.6.4 e 9.12.4 diferem na forma de lidar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>s (números). A ES6 simplesmente propõe expôr esse algoritmo através de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>.</p>
-<p>Podemos ver que com os operadores igual duplo e igual triplo, com a exceção de fazer uma checagem de tipo de início em 11.9.6.1, o Algoritmo de Igualdade Rigorosa é um subconjunto do Algoritmo de Igualdade Abstrata, pois 11.9.6.2–7 corresponde a 11.9.3.1.a–f.</p>
-<h2 id="Um_modelo_para_entender_comparações_de_igualdade">Um modelo para entender comparações de igualdade?</h2>
-<p>Antes da ES6, você pode ter dito, a respeito dos operadores igual duplo e igual triplo, que um é uma versão "melhorada" do outro. Por exemplo, alguém poderia dizer que o operador igual duplo é uma versão extendidad do operador igual triplo, pois o primeiro faz tudo que o último faz, com conversão de tipo em seus operandos (por exemplo, de modo que <code>6 == "6"</code>). Alternativamente, alguém poderia dizer que o operador igual triplo é uma versão melhorada do operador igual duplo, pois requer que os dois operandos sejam do mesmo tipo. Qual é melhor depende de qual é a sua idéia de patamar.</p>
-<p>No entanto, essa forma de pensar sobre os operados de igualdade internos não é um modelo que pode ser "esticado" para permitir um lugar para o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> da ES6 nesse "espectro". O <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> não é simplesmente "menos restrito" do que o operador igual duplo ou "mais restrito" do que o operador igual triplo, nem cabe em algum lugar entre esses níveis (isto é, sendo mais restrito que o operador igual duplo, mas menos restrito que o operador igual triplo). Nós podemos ver da tabela de comparações de igualdade abaixo que isto é devido à forma com que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> lida com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>. Perceba que se <code>Object.is(NaN, NaN)</code> resultasse no valor <code>false</code>, nós <em>poderíamos</em> dizer que ele cabe no espectro pouco restrito/restrito como uma forma ainda mais restrita do operador igual triplo, uma que faz distinção entre <code>-0</code> e <code>+0</code>. A forma de lidar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> significa que isso não é verdade, no entanto. Infelizmente, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> simplesmente deve ser considerado em termos de duas características específicas, ao invés de sua rigorosidade (ou falta da mesma) com respeito aos operadores de igualdade.</p>
-<table class="standard-table">
-  <caption>
-    Comparações de Igualdade</caption>
-  <thead>
-    <tr>
-      <th scope="col" style="text-align: center;">x</th>
-      <th scope="col" style="text-align: center;">y</th>
-      <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
-      <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
-      <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>undefined</code></td>
-      <td><code>undefined</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>null</code></td>
-      <td><code>null</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>true</code></td>
-      <td><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>false</code></td>
-      <td><code>false</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>"foo"</code></td>
-      <td><code>"foo"</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>{ foo: "bar" }</code></td>
-      <td><code>x</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>0</code></td>
-      <td><code>0</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-    <tr>
-      <td><code>+0</code></td>
-      <td><code>-0</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>0</code></td>
-      <td><code>false</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>""</code></td>
-      <td><code>false</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>""</code></td>
-      <td><code>0</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>"0"</code></td>
-      <td><code>0</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>"17"</code></td>
-      <td><code>17</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>new String("foo")</code></td>
-      <td><code>"foo"</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>null</code></td>
-      <td><code>undefined</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>null</code></td>
-      <td><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>undefined</code></td>
-      <td><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>{ foo: "bar" }</code></td>
-      <td><code>{ foo: "bar" }</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>new String("foo")</code></td>
-      <td><code>new String("foo")</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>0</code></td>
-      <td><code>null</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>0</code></td>
-      <td><code>NaN</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>"foo"</code></td>
-      <td><code>NaN</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-    </tr>
-    <tr>
-      <td><code>NaN</code></td>
-      <td><code>NaN</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
-      <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
-    </tr>
-  </tbody>
-</table>
-<h2 id="Quando_usar_Object.is_versus_o_operador_igual_triplo">Quando usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> versus o operador igual triplo</h2>
-<p>Além da forma com que trata o valor it <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, de modo geral, o único caso em o comportamento especial de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> com a relação a zeros é capaz de ser de interesse é na busca de certos esquemas de metaprogramação, especialmente em relação a descritores de propriedade quando é desejável que seu trabalho espelhe algumas das características de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. Se seu caso de uso não requer isso, sugere-se evitar-se <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> e usar-se o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> ao invés disso. Mesmo se seus requerimentos envolvem que comparações entre dois valores <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> resultem em <code>true</code>, de modo geral é mais fácil fazer-se uma checagem especial por <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>s (usando-se o método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN</code></a> disponíveis de versões anteritores da ECMAScript) do que lidar com como computações externas possam afetar o sinal de quaisquer zeros que você possa encontrar em sua comparação.</p>
-<p>Aqui está uma lista não-exaustiva de métodos e operadores internos que podem fazer com que uma distinção entre <code>-0</code> e <code>+0</code> se manifeste em seu código:</p>
-<dl>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (negação unária)</code></a></dt>
-</dl>
-<dl>
-  <dd>
-    <p>É óbvio que negar <code>0</code> produz <code>-0</code>. Mas a abstração de uma expressão pode fazer com o valor <code>-0</code> apareça de modo despercebido. Por exemplo, considere o seguinte:</p>
-    <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre>
-    <p>Se <code>obj.velocity</code> é <code>0</code> (ou resulta no valor <code>0</code>), um <code>-0</code> é introduzido naquele ponto e propaga-se para <code>stoppingForce</code>.</p>
-  </dd>
-</dl>
-<dl>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt>
-</dl>
-<dl>
-  <dd>
-    É possível que um <code>-0</code> seja introduzido em uma expressão como um valor de retorno desses métodos em alguns casos, mesmo quando nenhum <code>-0</code> existe como um dos parâmetros. Por exemplo, usando-se <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> para elevar o valor <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> à potência de qualquer expoente negativo ímpar resulta no valor <code>-0</code>. Veja a documentação para os métodos individuais.</dd>
-</dl>
-<dl>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt>
-  <dt>
-    <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt>
-</dl>
-<dl>
-  <dd>
-    É possível obter-se um valor de retorno <code>-0</code> desses métodos em alguns casos quando um <code>-0</code> existe como um dos parâmetros. Por exemplo, <code>Math.min(-0, +0)</code> resulta no valor <code>-0</code>. Veja a documentação para os métodos individuais.</dd>
-</dl>
-<dl>
-  <dt>
-    <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt>
-  <dt>
-    <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&lt;&lt;</a></code></dt>
-  <dt>
-    <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&gt;&gt;</a></code></dt>
-  <dd>
-    Cada um desses operadores usa o algoritmo ToInt32 internamente. Uma vez que só há uma representação para o valor 0 no tipo inteiro de 32 bits interno, o valor <code>-0</code> não irá sobreviver a um arredondamento depois de uma operação inversa. Por exemplo, ambos <code>Object.is(~~(-0), -0)</code> e <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> resultam no valor <code>false</code>.</dd>
-</dl>
-<p>Contar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> quando o sinal de zeros não é levado em consideração pode ser problemático. É claro que quando a intenção é distinguir entre <code>-0</code> e <code>+0</code>, ele faz exatamente o que é desejado.gual</p>
diff --git a/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html b/files/pt-br/web/javascript/guide/iterators_and_generators/index.html
index 13a9b87f11..13a9b87f11 100644
--- a/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html
+++ b/files/pt-br/web/javascript/guide/iterators_and_generators/index.html
diff --git a/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html
index fcf7437612..fcf7437612 100644
--- a/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html
+++ b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html
diff --git a/files/pt-br/web/javascript/guide/módulos/index.html b/files/pt-br/web/javascript/guide/modules/index.html
index 6a2cb73687..6a2cb73687 100644
--- a/files/pt-br/web/javascript/guide/módulos/index.html
+++ b/files/pt-br/web/javascript/guide/modules/index.html
diff --git a/files/pt-br/web/javascript/guide/numeros_e_datas/index.html b/files/pt-br/web/javascript/guide/numbers_and_dates/index.html
index 8f08cb3619..8f08cb3619 100644
--- a/files/pt-br/web/javascript/guide/numeros_e_datas/index.html
+++ b/files/pt-br/web/javascript/guide/numbers_and_dates/index.html
diff --git a/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html b/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html
deleted file mode 100644
index 953a9543de..0000000000
--- a/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html
+++ /dev/null
@@ -1,583 +0,0 @@
----
-title: Sintaxe e tipos
-slug: Web/JavaScript/Guide/Sintaxe_e_tipos
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div>
-
-<p class="summary">Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.</p>
-
-<h2 id="Basics" name="Basics">Sintaxe básica</h2>
-
-<p>JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.</p>
-
-<p>JavaScript é <strong>case-sensitive</strong> e usa o conjunto de caracteres <strong>Unicode.</strong></p>
-
-<p>No JavaScript, instruções são chamadas de {{Glossary("Statement", "declarações")}} e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (<a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar">gramática léxica</a> do JavaScript.</p>
-
-<h2 id="Comentários">Comentários</h2>
-
-<p>A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:</p>
-
-<pre class="brush: js">// comentário de uma linha
-
-/* isto é um comentário longo
-   de múltiplas linhas.
- */
-
-/* Você não pode, porém, /* aninhar comentários */ SyntaxError */</pre>
-
-<h2 id="Declarations" name="Declarations">Declarações</h2>
-
-<p>Existem três tipos de declarações em JavaScript.</p>
-
-<dl>
- <dt>{{jsxref("Statements/var", "var")}}</dt>
- <dd>Declara uma variável, opcionalmente, inicializando-a com um valor.</dd>
- <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt>
- <dd>Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.</dd>
- <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt>
- <dd>Declara uma constante apenas de leitura.</dd>
-</dl>
-
-<h3 id="Variáveis">Variáveis</h3>
-
-<p>Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de {{Glossary("Identifier", "identificadores")}}, obedecem determinadas regras.</p>
-
-<p>Um identificador JavaScript deve começar com uma letra, underline (<code>_</code>), ou cifrão (<code>$</code>); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de "A" a "Z" (maiúsculos) e caracteres de "a" a "z" (minúsculos).</p>
-
-<p>Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">sequências de escape Unicode</a> como caracteres e identificadores.</p>
-
-<p>Alguns exemplos de nomes legais são <code>Numeros_visitas</code>, <code>temp99</code>, e<code> _nome</code>.</p>
-
-<h3 id="Declarando_variáveis">Declarando variáveis</h3>
-
-<p>Você pode declarar uma variável de três formas:</p>
-
-<ul>
- <li>Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var <code>x = 42</code>. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis global.</li>
- <li>Por simples adição de valor. Por exemplo, <code>x = 42</code>. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.</li>
- <li>Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, <code>let y = 13</code>. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_scope">escopo de variável</a> abaixo.</li>
-</ul>
-
-<h3 id="Classificando_variáveis">Classificando variáveis</h3>
-
-<p>Uma variável declarada usando a declaração <code>var</code> ou <code>let</code> sem especificar o valor inicial tem o valor  {{jsxref("undefined")}}.</p>
-
-<p>Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:</p>
-
-<pre class="brush: js">var a;
-console.log("O valor de a é " + a); // saída "O valor de a é undefined"
-console.log("O valor de b é " + b); // throws ReferenceError exception
-</pre>
-
-<p>Você pode usar <code>undefined</code> para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> será avaliada como verdadeira (<code>true</code>).</p>
-
-<pre class="brush: js">var input;
-if(input === undefined){
-  facaIsto();
-} else {
-  facaAquilo();
-}
-</pre>
-
-<p>O valor <code>undefined</code> se comporta como falso (<code>false</code>), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função <code>myFunction</code> devido o elemento <code>myArray</code> ser undefined:</p>
-
-<pre class="brush: js">var myArray = [];
-if (!myArray[0]) myFunction();
-</pre>
-
-<p>O valor <code>undefined</code> converte-se para <code>NaN</code> quando usado no contexto numérico.</p>
-
-<pre class="brush: js">var a;
-a + 2;  // Avaliado como NaN
-</pre>
-
-<p>Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:</p>
-
-<pre class="brush: js">var n = null;
-console.log(n * 32); // a saída para o console será 0.
-</pre>
-
-<h3 id="Variable_scope" name="Variable_scope">Escopo de variável</h3>
-
-<p>Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável <em>global</em>, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável <em>local</em>,  pois ela está disponível somente dentro dessa função.</p>
-
-<p>JavaScript antes do ECMAScript 6 não possuía escopo de <a href="/pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">declaração de bloco</a>; pelo contrário, uma variável declarada dentro de um bloco de uma <em>função </em>é uma variável local (ou contexto <em>global</em>) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de <code>x</code> está na função (ou contexto global) no qual <code>x</code> é declarado, não o bloco, que neste caso é a declaração <code>if</code>. </p>
-
-<pre class="brush: js">if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-</pre>
-
-<p>Esse comportamento é alterado, quando usado a declaração <code>let</code> introduzida pelo ECMAScript 6.</p>
-
-<pre class="brush: js">if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y não está definido
-</pre>
-
-<h3 id="Variable_hoisting" name="Variable_hoisting">Hoisting</h3>
-
-<p>Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como <strong>hoisting</strong>; variáveis em JavaScript são num sentido "hoisted" ou lançada para o topo da função ou declaração. No entanto, as variáveis que são "hoisted" retornarão um valor <code>undefined</code>. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.</p>
-
-<pre class="brush: js">/**
- * Exemplo 1
- */
-console.log(x === undefined); // exibe "true"
-var x = 3;
-
-/**
- * Exemplo 2
- */
-// returnará um valor undefined
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = "local value";
-})();
-</pre>
-
-<p>Os exemplos acima serão interpretados como:</p>
-
-<pre class="brush: js">/**
- * Exemplo 1
- */
-var x;
-console.log(x === undefined); // exibe "true"
-x = 3;
-
-/**
- * Exemplo 2
- */
-var myvar = "um valor";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "valor local";
-})();
-</pre>
-
-<p>Devido o hoisting, todas as declarações <code>var</code> em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.</p>
-
-<h3 id="Variáveis_Globais">Variáveis Globais</h3>
-
-<p>Variáveis globais são propriedades do <em>objeto global</em>. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe <code>window.variavel.</code> </p>
-
-<p>Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como <code>parent.phoneNumber</code>.</p>
-
-<h3 id="Constantes">Constantes</h3>
-
-<p>Você pode criar uma constante apenas de leitura por meio da palavra-chave {{jsxref("Statements/const", "const")}}. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, underline ou cifrão e pode conter caracteres alfabético, numérico ou underline.</p>
-
-<pre class="brush: js">const prefix = '212';
-</pre>
-
-<p>Uma constante não pode alterar seu valor por meio de uma atribuição ou ao ser declarada novamente enquanto o script é executado. Deve ser inicializada com um valor.</p>
-
-<p>As regras de escopo para as constantes são as mesmas para as váriaveis <code>let</code> de escopo de bloco. Se a palavra-chave <code>const</code> for omitida, o identificado é adotado para representar uma variável.</p>
-
-<p>Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo: </p>
-
-<pre class="example-bad brush: js">// Isto irá causar um  erro
-function f() {};
-const f = 5;
-
-// Isto também irá causar um erro.
-function f() {
-  const g = 5;
-  var g;
-
-  //declarações
-}
-</pre>
-
-<h2 id="Data_structures_and_types" name="Data_structures_and_types">Estrutura de dados e tipos</h2>
-
-<h3 id="Tipos_de_dados">Tipos de dados</h3>
-
-<p>O mais recente padrão ECMAScript define sete tipos de dados:</p>
-
-<ul>
- <li>Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}:
-  <ul>
-   <li>{{Glossary("Boolean")}}. <code>true</code> e <code>false</code>.</li>
-   <li>{{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, <code>null</code> não é o mesmo que <code>Null</code>, <code>NULL</code>, ou ainda outra variação.</li>
-   <li>{{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.</li>
-   <li>{{Glossary("Number")}}. <code>42</code> ou <code>3.14159</code>.</li>
-   <li>{{Glossary("String")}}. "Howdy"</li>
-   <li>{{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.</li>
-  </ul>
- </li>
- <li>e {{Glossary("Object")}}</li>
-</ul>
-
-<p>Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações.  <span style="line-height: 1.5;">{{jsxref("Object", "Objetos")}} e {{jsxref("Function", "funçõess")}} são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.</span></p>
-
-<h3 id="Conversão_de_tipos_de_dados">Conversão de tipos de dados</h3>
-
-<p>JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:</p>
-
-<pre class="brush: js">var answer = 42;
-</pre>
-
-<p>E depois, você pode atribuir uma string para a mesma variável, por exemplo:</p>
-
-<pre class="brush: js">answer = "Obrigado pelos peixes...";
-</pre>
-
-<p>Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.</p>
-
-<p>Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:</p>
-
-<pre class="brush: js">x = "A resposta é " + 42 // "A resposta é 42"
-y = 42 + " é a resposta" // "42 é a resposta"
-</pre>
-
-<p>Nas declarações envolvendo outros operadores,  JavaScript não converte valores numérico para strings. Por exemplo:</p>
-
-<pre class="brush: js">"37" - 7 // 30
-"37" + 7 // "377"
-</pre>
-
-<h3 id="Convertendo_strings_para_números">Convertendo strings para números</h3>
-
-<p>No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.</p>
-
-<ul>
- <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li>
- <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
-</ul>
-
-<p>parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.</p>
-
-<p><font face="Consolas, Liberation Mono, Courier, monospace">Uma método alternativo de conversão de um número em forma de string é com o operador <code>+</code> (operador soma):</font></p>
-
-<pre class="brush: js">"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.</pre>
-
-<h2 id="Literals" name="Literals">Literais</h2>
-
-<p>Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você <code>literalmente</code> insere em seu script. Esta seção descreve os seguintes tipos literais:</p>
-
-<ul>
- <li>{{anch("Array literal")}}</li>
- <li>{{anch("Literais boolean")}}</li>
- <li>{{anch("Literais de ponto flutuante")}}</li>
- <li>{{anch("Inteiros")}}</li>
- <li>{{anch("Objeto literal")}}</li>
- <li>{{anch("String literal")}}</li>
-</ul>
-
-<h3 id="Array_literal">Array literal</h3>
-
-<p>Um literal de array é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes (<code>[]</code>). Quando você cria um array usando um array literal, ele é inicializado  com os valores especificados como seus elementos, e seu comprimento é definido com o  número de elementos especificados.</p>
-
-<p>O exemplo a seguir cria um array <code>coffees</code> com três elementos e um comprimento de três:</p>
-
-<pre class="brush: js">var coffees = ["French Roast", "Colombian", "Kona"];
-</pre>
-
-<div class="note">
-<p><strong>Nota :</strong> Um array literal é um tipo de inicializador de objetos. Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Usando inicializadores de Objetos</a>.</p>
-</div>
-
-<p>Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.</p>
-
-<p>Array literal são também um array de objetos. Veja  {{jsxref("Array")}} e <a href="/pt-BR/docs/Web/JavaScript/Guide/Indexed_collections">Coleções indexadas</a> para detalhes sobre array de objetos.</p>
-
-<h4 id="Vírgulas_extras_em_array_literal">Vírgulas extras em array literal</h4>
-
-<p>Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com <code>undefined</code> para os elementos não especificados. O exemplo a seguir cria um array chamado <code>fish</code>:</p>
-
-<pre class="brush: js">var fish = ["Lion", , "Angel"];
-</pre>
-
-<p>Esse array tem dois elementos com valores e um elemento vazio (<code>fish[0]</code> é "Lion", <code>fish[1]</code> é <code>undefined</code>, e <code>fish[2]</code> é "Angel" ).</p>
-
-<p>Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum <code>myList[3]</code>. Todas as outras vírgulas na lista indicam um novo elemento.</p>
-
-<div class="note">
-<p><strong>Nota :</strong> Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.</p>
-</div>
-
-<pre class="brush: js">var myList = ['home', , 'school', ];
-</pre>
-
-<p>No exemplo a seguir, o comprimento do array é quatro, e <code>myList[0]</code> e <code>myList[2]</code> são <code>undefined</code>.</p>
-
-<pre class="brush: js">var myList = [ , 'home', , 'school'];
-</pre>
-
-<p>No exemplo a seguir, o comprimento do array é quatro, e <code>myList[1]</code> e <code>myList[3]</code> são <code>undefined</code>. Apenas a última vírgula é ignorada.</p>
-
-<pre class="brush: js">var myList = ['home', , 'school', , ];
-</pre>
-
-<p>Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como <code>undefined</code> vai aumentar a clareza do código, e consequentemente na sua manutenção.</p>
-
-<h3 id="Literais_Boolean">Literais Boolean</h3>
-
-<p>O tipo Boolean tem dois valores literal: <code>true</code> e <code>false</code>.</p>
-
-<p>Não confunda os valores primitivos Boolean <code>true</code> e <code>false</code> com os valores <code>true</code> e <code>false</code> do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.</p>
-
-<h3 id="Inteiros">Inteiros</h3>
-
-<p>Inteiros podem sem expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).</p>
-
-<ul>
- <li>Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).</li>
- <li>0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.</li>
- <li>0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.</li>
- <li>0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.</li>
-</ul>
-
-<p>Alguns exemplos de inteiros literal são:</p>
-
-<pre class="eval">0, 117 and -345 (decimal, base 10)
-015, 0001 and -077 (octal, base 8)
-0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
-0b11, 0b0011 and -0b11 (binário, base 2)
-</pre>
-
-<p>Para maiores informações, veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Literais numérico na referência Léxica</a>.</p>
-
-<h3 id="Literais_de_ponto_flutuante">Literais de ponto flutuante</h3>
-
-<p>Um literal de ponto flutuante pode ter as seguintes partes:</p>
-
-<ul>
- <li>Um inteiro decimal que pode ter sinal (precedido por "<code>+</code>" ou "<code>-</code>"),</li>
- <li>Um ponto decimal ("<code>.</code>"),</li>
- <li>Uma fração (outro número decimal),</li>
- <li>Um expoente.</li>
-</ul>
-
-<p>O expoente é um "e" ou "E" seguido por um inteiro, que pode ter sinal (precedido por "+" ou "-"). Um literal de ponto flutuante  deve ter no mínimo um dígito e um ponto decimal ou "e" (ou "E").</p>
-
-<p>Mais sucintamente, a sintaxe é:</p>
-
-<pre class="eval">[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
-</pre>
-
-<p>Por exemplo:</p>
-
-<pre class="eval">3.1415926
--.123456789
--3.1E+12
-.1e-23
-</pre>
-
-<h3 id="Objeto_literal">Objeto literal</h3>
-
-<p>Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de de um objeto, colocado entre chaves (<code>{}</code>). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o <code>{</code> será interpretado como início de um bloco.</p>
-
-<p>Segue um exemplo de um objeto literal. O primeiro elemento do objeto <code>car </code>define uma propriedade, <code>myCar</code>, e atribui para ele uma nova string, "Saturn"; o segundo elemento, a propriedade <code>getCar</code>, é imediatamente atribuído o resultado de chamar uma função (<code>carTypes("Honda")</code>); o terceiro elemento, a propriedade especial, usa uma variável existente (<code>sales)</code>.</p>
-
-<pre class="brush: js">var sales = "Toyota";
-
-function carTypes(name) {
-  if (name == "Honda") {
-    return name;
-  } else {
-    return "Sorry, we don't sell " + name + ".";
-  }
-}
-
-var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };
-
-console.log(car.myCar);   // Saturn
-console.log(car.getCar);  // Honda
-console.log(car.special); // Toyota
-</pre>
-
-<p>Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.</p>
-
-<pre class="brush: js">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-</pre>
-
-<p>Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um {{Glossary("Identifier","identificador")}} JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (<code>.</code>), mas podem ser acessadas e definidas com a notação do tipo array ("<code>[]</code>").</p>
-
-<pre class="brush: js">var unusualPropertyNames = {
-  "": "Uma string vazia",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: string inesperada
-console.log(unusualPropertyNames[""]);  // Um string vazia
-console.log(unusualPropertyNames.!);    // SyntaxError: símbolo ! inesperado
-console.log(unusualPropertyNames["!"]); // Bang!</pre>
-
-<p>Observe:</p>
-
-<pre class="brush: js">var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a não está definido
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-</pre>
-
-<h3 id="String_Literal">String Literal</h3>
-
-<p>Uma string literal são zero ou mais caracteres dispostos em aspas duplas (<code>"</code>) ou aspas simples (<code>'</code>). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja,  as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.</p>
-
-<pre class="eval">"foo"
-'bar'
-"1234"
-"um linha \n outra linha"
-"John's cat"
-</pre>
-
-<p>Você pode chamar qualquer um dos métodos do objeto string em uma string literal - JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade <code>String.length</code> com uma string literal:</p>
-
-<pre class="brush: js">console.log("John's cat".length)
-// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.
-// Nesse caso, 10 caracteres.
-</pre>
-
-<p>Você deve usar string literal, a não ser que você precise usar um objeto string. Veja {{jsxref("String")}} para detalhes sobre objetos de strings.</p>
-
-<h4 id="Uso_de_caracteres_especiais_em_string">Uso de caracteres especiais em string</h4>
-
-<p>Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.</p>
-
-<pre class="brush: js">"uma linha \n outra linha"
-</pre>
-
-<p>A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.</p>
-
-<table class="standard-table">
- <caption>Tabela: Caracteres especiais no JavaScript</caption>
- <thead>
-  <tr>
-   <th scope="col">Caracter</th>
-   <th scope="col">Descrição</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>\0</code></td>
-   <td>Byte nulo</td>
-  </tr>
-  <tr>
-   <td><code>\b</code></td>
-   <td>Backspace</td>
-  </tr>
-  <tr>
-   <td><code>\f</code></td>
-   <td>Alimentador de formulário</td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>Nova linha</td>
-  </tr>
-  <tr>
-   <td><code>\r</code></td>
-   <td>Retorno do carro</td>
-  </tr>
-  <tr>
-   <td><code>\t</code></td>
-   <td>Tabulação</td>
-  </tr>
-  <tr>
-   <td><code>\v</code></td>
-   <td>Tabulação vertical</td>
-  </tr>
-  <tr>
-   <td><code>\'</code></td>
-   <td>Apóstrofo ou aspas simples</td>
-  </tr>
-  <tr>
-   <td><code>\"</code></td>
-   <td>Aspas dupla</td>
-  </tr>
-  <tr>
-   <td><code>\\</code></td>
-   <td>Caractere de barra invertida</td>
-  </tr>
-  <tr>
-   <td><code>\<em>XXX</em></code></td>
-   <td>
-    <p>Caractere com a codificação Latin-1 especificada por três dígitos octal <em>XXX </em>entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.</p>
-   </td>
-  </tr>
-  <tr>
-  </tr>
-  <tr>
-   <td><code>\x<em>XX</em></code></td>
-   <td>
-    <p>Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal <em>XX</em> entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.</p>
-   </td>
-  </tr>
-  <tr>
-  </tr>
-  <tr>
-   <td><code>\u<em>XXXX</em></code></td>
-   <td>
-    <p>Caractere Unicode especificado por quatro dígitos hexadecimal <em>XXXX</em>. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">sequências de escape Unicode</a>.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Caracteres_de_escape">Caracteres de escape</h4>
-
-<p>Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.</p>
-
-<p>Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso  é conhecido como <em>escaping</em> das aspas. Por exemplo:</p>
-
-<pre class="brush: js">var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
-console.log(quote);
-</pre>
-
-<p>O resultado disso seria:</p>
-
-<pre class="eval">Ele lê "The Cremation of Sam McGee" de R.W. Service.
-</pre>
-
-<p>Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo <code>c:\temp </code>para uma string, utilize o seguinte:</p>
-
-<pre class="brush: js">var home = "c:\\temp";
-</pre>
-
-<p>Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.</p>
-
-<pre class="brush: js">var str = "esta string \
-está quebrada \
-em várias\
-linhas."
-console.log(str);   // esta string está quebrada em várias linhas.
-</pre>
-
-<p>Embora JavaScript não tenha sintaxe "heredoc", você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:</p>
-
-<pre class="brush: js">var poem =
-"Rosas são vermelhas,\n\
-Violetas são azul.\n\
-Eu sou esquizofrênico,\n\
-e é isso que sou."
-</pre>
-
-<h2 id="Mais_informação">Mais informação</h2>
-
-<p>Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:</p>
-
-<ul>
- <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Controle de fluxo e manipulação de erro</a></li>
- <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration">Laços e iteração</a></li>
- <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Functions">Funções</a></li>
- <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressões e operadores</a></li>
-</ul>
-
-<p>No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/pt-br/web/javascript/guide/formatando_texto/index.html b/files/pt-br/web/javascript/guide/text_formatting/index.html
index 1b4bb50772..1b4bb50772 100644
--- a/files/pt-br/web/javascript/guide/formatando_texto/index.html
+++ b/files/pt-br/web/javascript/guide/text_formatting/index.html
diff --git a/files/pt-br/web/javascript/guide/usando_promises/index.html b/files/pt-br/web/javascript/guide/using_promises/index.html
index a0dd09c8c2..a0dd09c8c2 100644
--- a/files/pt-br/web/javascript/guide/usando_promises/index.html
+++ b/files/pt-br/web/javascript/guide/using_promises/index.html
diff --git a/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html b/files/pt-br/web/javascript/guide/working_with_objects/index.html
index 1dccaeef2e..1dccaeef2e 100644
--- a/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html
+++ b/files/pt-br/web/javascript/guide/working_with_objects/index.html
diff --git a/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html b/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html
index d6aad53066..d6aad53066 100644
--- a/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html
+++ b/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html
diff --git a/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html
deleted file mode 100644
index aaab9150b3..0000000000
--- a/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html
+++ /dev/null
@@ -1,352 +0,0 @@
----
-title: Introdução ao JavaScript Orientado a Objeto
-slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
-tags:
-  - Construtor
-  - Encapsular
-  - Herança
-  - Intermediário
-  - Membros
-  - Objeto
-  - Orientado a Objeto
-  - POO
-translation_of: Learn/JavaScript/Objects
-translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
----
-<p>JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.</p>
-
-<p>Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.</p>
-
-<h2 id="JavaScript_Review" name="JavaScript_Review">Revisão do Javascript</h2>
-
-<p>Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Uma reintrodução ao JavaScript</a>. Você também pode consultar o <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>.</p>
-
-<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programação Orientada a Objetos</h2>
-
-<p>Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).</p>
-
-<p>A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.</p>
-
-<p>A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.</p>
-
-<h2 id="Terminology" name="Terminology"><span class="short_text" id="result_box" lang="pt"><span class="hps">Terminologia</span></span></h2>
-
-<dl>
- <dt>Namespaces</dt>
- <dd>Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.</dd>
-</dl>
-
-<dl>
- <dt>Classe</dt>
- <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Define as</span> <span class="hps">características do objeto</span><span>.</span></span> Uma classe é uma definição modelo das propriedades e métodos de um objeto.</dd>
- <dt>Objeto</dt>
- <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Um exemplar</span><span class="hps"> de uma classe</span><span>.</span></span></dd>
- <dt><span class="short_text" id="result_box" lang="pt"><span class="hps">Atributo</span></span></dt>
- <dd>Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.</dd>
- <dt>Método</dt>
- <dd>Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.</dd>
- <dt>C<span class="short_text" id="result_box" lang="pt"><span class="hps">onstrutor</span></span></dt>
- <dd>Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.</dd>
- <dt>Herança</dt>
- <dd>Uma classe pode herdar características de outra classe.</dd>
- <dt>Encapsulamento</dt>
- <dd>Uma maneira de agrupar os dados e os métodos que usam os dados.</dd>
- <dt>Abstração</dt>
- <dd>A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.</dd>
- <dt>Polimorfismo</dt>
- <dd>Diferentes classes podem definir o mesmo método ou propriedade.</dd>
-</dl>
-
-<p>Para uma descrição mais extensiva sobre programação orientada a objetos, veja <a href="http://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos">Orientação a objetos</a> na Wikipédia.</p>
-
-<h2 id="Programação_Baseada_em_Protótipos">Programação Baseada em Protótipos</h2>
-
-<p>Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como <em>protótipos</em>. Este modelo também é conhecido como <strong>sem classes</strong>, <strong>orientado a protótipo</strong>, ou <strong>programação baseada em exemplares.</strong></p>
-
-<p>O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o <em>framework </em>Viewer para manipular componentes do Morphic) e várias outras.</p>
-
-<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programação Orientada a Objetos em Javascript</h2>
-
-<h3 id="Namespaces">Namespaces</h3>
-
-<p>Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. <strong>Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.</strong></p>
-
-<div class="note">
-<p><strong>Nota: </strong>É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).</p>
-</div>
-
-<p>A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.</p>
-
-<p>Vamos criar um objeto global chamado MEUAPP:</p>
-
-<pre class="brush: js notranslate">// namespaces global
-var MEUAPP = MEUAPP || {};</pre>
-
-<p>No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos</p>
-
-<p>Podemos também criar sub-espaços de nomes.</p>
-
-<pre class="brush: js notranslate"><code>// sub namespaces
-MEUAPP.eventos = {};</code></pre>
-
-<p>A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:</p>
-
-<pre class="notranslate">// Criando um recipiente chamado MEUAPP.metodosEmComum
-// para métodos e propriedades em comum
-
-MEUAPP.metodosEmComum = {
-
-  regexParaNome: "", // definindo uma expressao regular
-                     // para validação de nomes
-
-  regexParaTelefone: "",  // define uma expressao regular para
-                          //validacao de numeros de telefone
-}
-
-// Objeto junto a declaracoes de método
-
-MEUAPP.eventos = {
-
-    adicionarTratador: function(elemento, tipo, funcao) {
-
-    // codigos
-
-    },
-
-    removerTratador: function(elemento, tipo, funcao) {
-
-    // codigos
-
-    },
-
-    obterEvento: function(e) {
-
-    // codigos
-
-    }
-
-    // é possível adicionar outros métodos e propriedades
-
-}
-
-// Sintaxe para usar o método adicionarTratador:
-
-MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);</pre>
-
-<h3 id="Core_Objects" name="Core_Objects">Objetos inclusos por padrão</h3>
-
-<p>JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().</p>
-
-<pre class="brush: js notranslate">console.log(Math.random());
-</pre>
-
-<div class="note"><strong>Nota:</strong> Este e todos os exemplos a seguir presumem que uma função <strong><code>console.log() </code></strong>está definida globalmente. A função <code><strong>console.log() </strong></code>não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.</div>
-
-<p>Veja <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a> para a lista dos objetos inclusos por padrão em JavaScript.</p>
-
-<p>Cada objeto em JavaScript é um exemplar do objeto <code>Object</code> e, portanto, herda todas as suas propriedades e métodos.</p>
-
-<h3 id="Custom_Objects" name="Custom_Objects">Objetos Personalizados</h3>
-
-<h4 id="The_Class" name="The_Class">A Classe</h4>
-
-<p>JavaScript é uma linguagem baseada em protótipos e não contém a declaração <strong><code>class</code></strong>, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.</p>
-
-<pre class="notranslate"><code>var Pessoa = function () {};</code></pre>
-
-<p class="brush: js">O objeto (exemplar de uma classe)</p>
-
-<p>Para criar um novo exemplar de um objeto <code><strong>obj</strong></code><em>, </em>usamos a declaração <code><strong>new obj</strong></code><em>, </em>atribuindo o resultado<em> </em>(que é do tipo <strong><code>obj</code></strong>) a uma variável que será acessada depois.<em> </em></p>
-
-<p>No exemplo acima, definimos uma classe chamada <strong>Pessoa</strong>. No exemplo abaixo, criamos dois exemplares (<code><strong>pessoa1</strong></code> e <code><strong>pessoa2</strong></code>).</p>
-
-<pre class="brush: js notranslate">var pessoa1 = new Pessoa();
-var pessoa2 = new Pessoa();
-</pre>
-
-<div class="note"><strong>Nota: </strong>Por favor, veja também <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> para um novo e alternativo método que cria um exemplar não-inicializado.</div>
-
-<h4 id="The_Constructor" name="The_Constructor">O Construtor</h4>
-
-<p>O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.</p>
-
-<p>O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.</p>
-
-<p>No exemplo abaixo, o construtor da classe <code>Pessoa</code> envia uma mensagem ao <em>log </em>quando um exemplar de <strong><code>Pessoa </code></strong>é criado.</p>
-
-<pre class="brush: js notranslate">var Pessoa = function () {
-  console.log("exemplar criado");
-}
-
-var pessoa1 = new Pessoa();
-var pessoa2 = new Pessoa();
-</pre>
-
-<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Propriedades (atributos de objetos)</h4>
-
-<p>Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.</p>
-
-<p>A palavra-chave <code>this,</code> que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe <code>NomeDoExemplar.Propriedade</code>, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)</p>
-
-<pre class="brush: js notranslate">var Pessoa = function(nome) {
-  this.nome = nome;
-  console.log('Exemplar de Pessoa criado');
-};
-
-var pessoa1 = new Pessoa('Alice');
-var pessoa2 = new Pessoa('Bob');
-
-// mostrando as propriedades nome dos objetos
-console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
-console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log</pre>
-
-<h4 id="The_methods" name="The_methods">Métodos</h4>
-
-<p>Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca <code><strong>()</strong></code> no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do <strong><code>prototype</code></strong> da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.</p>
-
-<p>No exemplo abaixo, definimos e usarmos o método <code><strong>dizerOla()</strong></code> na classe <code><strong>Pessoa</strong></code> .</p>
-
-<pre class="brush: js notranslate">var Pessoa = function (genero) {
-  this.genero = genero;
-  alert('Pessoa instanciada');
-}
-
-Pessoa.prototype.dizerOla = function()
-{
-  alert ('hello');
-};
-
-var pessoa1 = new Pessoa('Masculino');
-var pessoa2 = new Pessoa('Feminino');
-
-// Chamando o método dizerOla em Pessoa .
-pessoa1.dizerOla(); // hello
-</pre>
-
-<p>Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: </p>
-
-<pre class="brush: js notranslate">function Pessoa(genero) {
-  this.genero = genero;
-}
-
-Pessoa.prototype.dizGenero = function()
-{
-  alert(this.genero);
-};
-
-var pessoa1 = new Pessoa('Masculino');
-var informaGenero = pessoa1.dizGenero;
-
-pessoa1.dizGenero(); // 'Masculino'
-informaGenero(); // undefined
-alert(informaGenero === pessoa1.dizGenero); //true
-alert(informaGenero === Pessoa.prototype.dizGenero); //true
-</pre>
-
-<p>Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a>, da seguinte maneira:</p>
-
-<pre class="brush: js notranslate">informaGenero.call(pessoa1); //alerts 'Masculino'
-</pre>
-
-<div class="note">Veja mais sobre em <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> e <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a></div>
-
-<h4 id="Inheritance" name="Inheritance">Herança</h4>
-
-<p>Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (<em>JavaScript suporta apenas herança de classe única</em>). A classe especializada é comumente chamada de <em>filha</em>, e a outra classe é comumente chamada de <em>pai</em>. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> para implementar herança.</p>
-
-<div class="note">
-<p>JavaScript não detecta o  <code>prototype.constructor</code> da classe filha, veja a propriedade <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>, então devemos declará-la manualmente.</p>
-</div>
-
-<p>No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().</p>
-
-<pre class="brush: js notranslate">// define a classe Pessoa
-function Pessoa() {}
-
-Pessoa.prototype.caminhar = function(){
-  alert ('Estou Caminhando!');
-};
-Pessoa.prototype.dizOi = function(){
-  alert ('Oi!');
-};
-
-// define a classe  Estudante
-function Estudante() {
-  // Chama o método pai
-  Pessoa.call(this);
-}
-
-// herda de Pessoa
-Estudante.prototype = new Pessoa();
-
-// <span id="result_box" lang="pt"><span class="hps">corrige</span> <span class="hps">o ponteiro</span> <span class="hps">construtor,</span> <span class="hps">que aponta para</span> <span class="hps">Pessoa</span></span>
-Estudante.prototype.constructor = Estudante;
-
-// adiciona o método dizOi
-Estudante.prototype.dizOi = function(){
-  alert('Oi, eu sou estudante');
-}
-
-// adiciona o método dizTchau
-Estudante.prototype.dizTchau = function(){
-  alert('tchau');
-}
-
-var estudante1 = new Estudante();
-estudante1.dizOi();
-estudante1.caminhar();
-estudante1.dizTchau();
-
-// checa a herança
-alert(estudante1 instanceof Pessoa); // true
-alert(estudante1 instanceof Estudante); // true
-</pre>
-
-<p>Utilizando Object.create a linha de herança deveria ser:</p>
-
-<pre class="brush: js notranslate">Estudante<code class="js plain">.prototype = Object.create(</code>Pessoa<code class="js plain">.prototype);</code></pre>
-
-<h4 id="Encapsulation" name="Encapsulation">Encapsulamento</h4>
-
-<p>Em exemplo anterior, <code>Estudante</code> não precisava saber como <code>o método caminhar() da classe Pessoa</code> seria implementada, mas ainda pode utilizar esté método; a classe <code>Estudante</code> não possui necessidade <span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">explícita de </span></span>definir o método desde que não queremos alterar-lo. Isso se chama <strong>encapsulamento</strong>, <span id="result_box" lang="pt"><span class="hps">pelo qual</span> <span class="hps">cada</span> <span class="hps">classe herda</span> <span class="hps">os métodos de</span> <span class="hps">seu pai</span> <span class="hps">e só</span> <span class="hps">precisa definir</span> <span class="hps">as coisas</span> <span class="hps">que</span> <span class="hps">deseja</span> <span class="hps">mudar.</span></span></p>
-
-<h4 id="Abstraction" name="Abstraction">Abstração</h4>
-
-<p>A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript <span class="short_text" id="result_box" lang="pt"><span class="hps">alcança</span> <span class="hps">especialização</span> <span class="hps">por herança</span></span>, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.</p>
-
-<p>A Função de classe do JavaScript é hedar da classe Object (<span class="short_text" id="result_box" lang="pt"><span class="hps">isso demonstra</span> <span class="hps">a especialização</span> <span class="hps">do modelo</span></span>). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)</p>
-
-<pre class="brush: js notranslate">var foo = function(){};
-alert( 'foo é um Function: ' + (foo instanceof Function) );
-alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
-</pre>
-
-<h4 id="Polymorphism" name="Polymorphism">Polimorfismo</h4>
-
-<p>Assim como todos os métodos e propriedades são definidos dentro da propriedade <code>prototype</code>, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).</p>
-
-<h2 id="Notes" name="Notes">Notas</h2>
-
-<p>As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.</p>
-
-<p>As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. </p>
-
-<p>Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.</p>
-
-<h2 id="References" name="References">Referências</h2>
-
-<ol>
- <li>Mozilla. "<a href="/docs/Web/JavaScript/Guide" title="/docs/Web/JavaScript/Guide">Core JavaScript 1.5 Guide</a>", https://developer.mozilla.org/docs/Web/JavaScript/Guide</li>
- <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li>
-</ol>
-
-<div class="originaldocinfo">
-<h2 id="Original_Document_Information">Original Document Information</h2>
-
-<ul>
- <li>Author(s): Fernando Trasviña &lt;f_trasvina at hotmail dot com&gt;</li>
- <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
-</ul>
-</div>
-
-<p>Es: <a href="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos" title="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos">https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos  </a></p>
diff --git a/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html b/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html
index b10562516e..b10562516e 100644
--- a/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html
+++ b/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html
diff --git a/files/pt-br/web/javascript/reference/errors/fata_parênteses_após_lista_argumento/index.html b/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
index 83844d17b5..83844d17b5 100644
--- a/files/pt-br/web/javascript/reference/errors/fata_parênteses_após_lista_argumento/index.html
+++ b/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
diff --git a/files/pt-br/web/javascript/reference/errors/não_definido/index.html b/files/pt-br/web/javascript/reference/errors/not_defined/index.html
index 6642b81b44..6642b81b44 100644
--- a/files/pt-br/web/javascript/reference/errors/não_definido/index.html
+++ b/files/pt-br/web/javascript/reference/errors/not_defined/index.html
diff --git a/files/pt-br/web/javascript/reference/errors/nãonomeado_funcão_declaração/index.html b/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html
index 6f01588059..6f01588059 100644
--- a/files/pt-br/web/javascript/reference/errors/nãonomeado_funcão_declaração/index.html
+++ b/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html
diff --git a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html b/files/pt-br/web/javascript/reference/functions/default_parameters/index.html
index 82dc54abd8..82dc54abd8 100644
--- a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html
+++ b/files/pt-br/web/javascript/reference/functions/default_parameters/index.html
diff --git a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html b/files/pt-br/web/javascript/reference/functions/method_definitions/index.html
index ac02cb9deb..ac02cb9deb 100644
--- a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html
+++ b/files/pt-br/web/javascript/reference/functions/method_definitions/index.html
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html
index c7b0c08915..c7b0c08915 100644
--- a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html b/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html
index a0f794df1a..a0f794df1a 100644
--- a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html
deleted file mode 100644
index e863d9cc69..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html
+++ /dev/null
@@ -1,206 +0,0 @@
----
-title: Array.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Array/prototype
-tags:
-  - Array
-  - JavaScript
-  - Propriedade
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
----
-<div>{{JSRef}}</div>
-
-<h2 id="Description" name="Description">Descrição</h2>
-
-<p>Instâncias de {{jsxref("Global_Objects/Array", "Array")}} herdam de <code>Array.prototype</code>. Como em todos os construtores, você pode mudar o  protótipo desse construtor para modificar todas as instâncias de {{jsxref("Global_Objects/Array", "Array")}}.</p>
-
-<p>Contudo, a adição de métodos não-padronizados ao objeto array pode causar problemas futuros, seja com seu próprio código, ou na <a href="https://developers.google.com/web/updates/2018/03/smooshgate">adição de novas funcionalidades ao JavaScript</a>.</p>
-
-<p>Um fato pouco conhecido: O próprio <code>Array.prototype </code>é um {{jsxref("Global_Objects/Array", "Array")}}</p>
-
-<pre class="brush: js">Array.isArray(Array.prototype); // true
-</pre>
-
-<h2 id="Properties" name="Properties">Propriedades</h2>
-
-<dl>
- <dt><code>Array.prototype.constructor</code></dt>
- <dd>Especifica a função que cria um objeto do protótipo.<br>
-  </dd>
- <dt>{{jsxref("Array.prototype.length")}}</dt>
- <dd>Reflete o número de elementos em um array.</dd>
-</dl>
-
-<h2 id="Methods" name="Methods">Métodos</h2>
-
-<h3 id="Mutator_methods" name="Mutator_methods">Métodos modificadores</h3>
-
-<p>Esses métodos modificam o array:</p>
-
-<dl>
- <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt>
- <dd>Copia uma sequência de elementos do array dentro do array.</dd>
- <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt>
- <dd>Preenche todos os elementos de um array com um elemento estático, começando de um índice inicial até um índice final.</dd>
- <dt>{{jsxref("Array.prototype.pop()")}}</dt>
- <dd>Remove e retorna o último elemento de um array.</dd>
- <dt>{{jsxref("Array.prototype.push()")}}</dt>
- <dd>Adiciona um ou mais elementos ao fim de um array e retorna o novo comprimeiro do array.</dd>
- <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
- <dd>Reverte a ordem dos elementos de um array - o primeiro vira o último e o último vira o primeiro.</dd>
- <dt>{{jsxref("Array.prototype.shift()")}}</dt>
- <dd>Remove o primeiro elemento de um array e o retorna.</dd>
- <dt>{{jsxref("Array.prototype.sort()")}}</dt>
- <dd>Ordena os elementos do array em questão e retorna o array.</dd>
- <dt>{{jsxref("Array.prototype.splice()")}}</dt>
- <dd>Adiciona e/ou remove elementos de um array.</dd>
- <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
- <dd>Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.</dd>
-</dl>
-
-<h3 id="Accessor_methods" name="Accessor_methods">Métodos de acesso</h3>
-
-<p>Esses métodos não modificam o array, mas sim retornam alguma representação dele.</p>
-
-<dl>
- <dt>{{jsxref("Array.prototype.concat()")}}</dt>
- <dd>Retorna um novo array formado por esse array concatenado com outro(s) array(s) e/ou valores.</dd>
- <dt>{{jsxref("Array.prototype.contains()")}} {{experimental_inline}}</dt>
- <dd>Verifica se o array possui cer, retornando<code>true</code> ou <code>false</code> apropriadamente.</dd>
- <dt>{{jsxref("Array.prototype.join()")}}</dt>
- <dd>Retorna uma string com todos os elementos do array</dd>
- <dt>{{jsxref("Array.prototype.slice()")}}</dt>
- <dd>Retorna um novo array com uma parte do array sobre o qual o método foi chamado</dd>
- <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>Retorna um array literal representando o array especificado; você pode usar esse valor para criar um novo array. Esse método sobrescreve o método {{jsxref("Object.prototype.toSource()")}}.</dd>
- <dt>{{jsxref("Array.prototype.toString()")}}</dt>
- <dd>Retonar uma string representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toString()")}}.</dd>
- <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
- <dd>Retonar uma string adequada ao idioma do usuário representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
- <dd>Representa o índice da primeira ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array.</dd>
- <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
- <dd>Representa o índice da última ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array</dd>
-</dl>
-
-<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteração</h3>
-
-<p>Vários métodos tomam como funções de argumento para serem chamados de volta ao processar o array. Quando esses métodos são chamados, o `<code>length` do array</code> é amostrado e qualquer elemento adicionado além deste comprimento (length)  de dentro da função (callback) não é visitado. Outras alterações para o array (Definindo o valor de ou apagando um elemento) pode afetar os resultados da operação se o método visita o elemento alterado posteriormente. Enquanto o comportamento específico destes métodos nestes casos é bem definido, não se deve confiar nisso para não confundir os outros que possoam ler seu código. Em vez disso, deve-se copiar para um novo array para modificá-lo.</p>
-
-<dl>
- <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
- <dd>Chama a função para cada elemento no array.</dd>
- <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt>
- <dd>Retorna um novo objeto <code>Array Iterator</code> que contem o par chave/valor para cada índice no array.</dd>
- <dt>{{jsxref("Array.prototype.every()")}}</dt>
- <dd>Retorna true se todos elementos no array satisfizer a função de teste fornecida.</dd>
- <dt>{{jsxref("Array.prototype.some()")}}</dt>
- <dd>Retorna true se pelo menos um elemento no array satisfizer a função de teste fornecida.</dd>
- <dt>{{jsxref("Array.prototype.filter()")}}</dt>
- <dd>Cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true.</dd>
- <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt>
- <dd>Retorna o valor encontrado no array, se um elemento no array satisfizer a funçào de teste fornecida ou  `<code>undefined` </code>se não for encontrado.</dd>
- <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt>
- <dd>Retorna o índice no array, se um elemento no array satisfizer a função de teste fornecida ou -1 se não for encontrado.</dd>
- <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt>
- <dd>Retorna um novo <code>Array Iterator</code> que contem a chave para cada índice no array.</dd>
- <dt>{{jsxref("Array.prototype.map()")}}</dt>
- <dd>Cria um novo array com os resultados da função fornecida chamada em cada elemento na array.</dd>
- <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
- <dd>Aplica uma função contra um acumulador e cada valor do array (da esquerda para direita) para reduzi-los a um único valor.</dd>
- <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
- <dd>Aplica uma função contra um acumulador e cada valor do array (da direita para esquerda) para reduzi-los a um único valor.</dd>
- <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt>
- <dd>Retorna um novo objeto <code>Array Iterator</code> que contem os valores de cada índice no array.</dd>
- <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt>
- <dd>Retorna um novo objeto <code>Array Iterator</code> que contem os valores de cada índice no array.</dd>
-</dl>
-
-<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos</h3>
-
-<p>Vários métodos do objeto Array em Javascript foram feitos para serem aplicados genericamentes em todos os objetos que "pareçam" Arrays. Isso é, eles podem ser usados em qualquer objeto que possuam uma propriedade <code>length</code> (comprimento), e que possa ser usado a partir de propriedades numéricas (como índices no formato <code>array[5]</code>). Alguns métodos, como {{jsxref("Array.join", "join")}}, apenas lêem e as propriedades numéricas do objeto sobre o qual eles sãochamados. Outros, como {{jsxref("Array.reverse", "reverse")}}, exigem que as propriedades numéricas e <code>length </code>sejam mutáveis; sendo assim, esses métodos não podem ser chamados em objetos como {{jsxref("Global_Objects/String", "String")}}, que não permitem que nenhuma das duas propriedades sejam modificadas.</p>
-
-<h2 id="Specifications" name="Specifications">Especifiações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Situação</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>ECMAScript 1st Edition.</td>
-   <td>Padrão</td>
-   <td>Definição inicial</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also" name="See_also">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Global_Objects/Array", "Array")}}</li>
- <li>{{jsxref("Function.prototype")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html
deleted file mode 100644
index ff8de05541..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: BigInt.prototype
-slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype
-tags:
-  - BigInt
-  - JavaScript
-  - Propriedade
-  - Prototipo
-  - Referencia
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <strong><code>BigInt.prototype</code></strong> representa o protótipo para o  construtor {{JSxRef("BigInt")}} .</p>
-
-<p>{{JS_Property_Attributes(0, 0, 0)}}</p>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Todas instância de {{JSxRef("BigInt")}} herdam de <code>BigInt.prototype</code>. O objeto protótipo do construtor {{JSxRef("BigInt")}} pode ser modificado para afetar todas instâncias de {{JSxRef( "BigInt")}} .</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>BigInt.prototype.constructor</code></dt>
- <dd>Retorna a função que cria instâncias deste objeto. Por padrão é o objeto<br>
- {{JSxRef("BigInt")}}.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{JSxRef("BigInt.prototype.toLocaleString()")}}</dt>
- <dd>Retorna uma string com uma representação sensível ao idioma para este número. Sobrescreve o método {{JSxRef("Object.prototype.toLocaleString()")}}<br>
-  </dd>
- <dt>{{JSxRef("BigInt.prototype.toString()")}}</dt>
- <dd>Retorna uma string respresentando o objeto específicado em um base específica. Sobrescreve o método {{JSxRef("Object.prototype.toString()")}} .</dd>
- <dt>{{JSxRef("BigInt.prototype.valueOf()")}}</dt>
- <dd>Retorna o valor primitivo de um objeto específicado. Sobrescreve o método {{JSxRef("Object.prototype.valueOf()")}}.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificações</th>
-   <th scope="col">Estado</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-bigint.prototype', 'BigInt.prototype')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade">Compatibilidade</h2>
-
-<p class="hidden">Para contribuir para este dado de compatibilidade, por favor escreva um pull resquest para este repositório: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
-
-<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p>
diff --git a/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html
deleted file mode 100644
index 99603a019f..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Boolean.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <strong><code>Boolean.prototype</code></strong> representa o prototype para o construtor de {{jsxref("Boolean")}}.</p>
-
-<div>{{js_property_attributes(0, 0, 0)}}</div>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Instancias de {{jsxref("Boolean")}} herdam de <code>Boolean.prototype</code>. Você pode usar os construtores do objeto prototype para adicionar propriedados ou metodos para todas as instancias de {{jsxref("Boolean")}} instances.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>Boolean.prototype.constructor</code></dt>
- <dd>Retorna a função que criou a instancia do prototype. Esta é a função {{jsxref("Boolean")}} por padrão.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>Retorna a string contendo o codigo do objeto {{jsxref("Boolean")}} ;  pode-se usar esta string para criar um objeto equivalente. Sobreescreve o método {{jsxref("Object.prototype.toSource()")}}.</dd>
- <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
- <dd>Retorna uma string com valor <code>"true"</code> ou <code>"false"</code> dependendo qual o valor do objeto. Sobreescreve o método {{jsxref("Object.prototype.toString()")}}.</dd>
- <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
- <dd>Retorna o valor primitivo do objeto {{jsxref("Boolean")}}. Sobreescreve o método {{jsxref("Object.prototype.valueOf()")}}.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Definição inicial. Implementano no JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html
deleted file mode 100644
index 3b45ee5fe2..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Function.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Function
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <code><strong>Function.prototype</strong></code> representa o objeto <code>prototype</code> de {{jsxref("Function")}}.</p>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Objetos {{jsxref("Function")}} herdam de <code>Function.prototype</code>.  <code>Function.prototype</code> não pode ser modificado.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt>
- <dd>Um vetor correspondente aos argumentos passados a uma função. Isto é depreciado como propriedade de {{jsxref("Function")}}. Use em vez disso o objeto {{jsxref("Functions/arguments", "arguments")}} disponível dentro da função.</dd>
- <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt>
- <dd><s class="obsoleteElement">Usado para especificar o número de argumentos esperados pela função. Foi removido, utilize em vez disso a propriedade {{jsxref("Function.length", "length")}}.</s></dd>
- <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt>
- <dd>Especifica a função que invocou a função sendo executada.</dd>
- <dt>{{jsxref("Function.length")}}</dt>
- <dd>Especifica o número de argumentos esperados pela função.</dd>
- <dt>{{jsxref("Function.name")}}</dt>
- <dd>O nome da função.</dd>
- <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
- <dd>O nome de exibição da função.</dd>
- <dt><code>Function.prototype.constructor</code></dt>
- <dd>Especifica a função que cria o <code>prototype</code> do objeto. Veja {{jsxref("Object.prototype.constructor")}} para mais detalhes.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("Function.prototype.apply()")}}</dt>
- <dd>Chama uma função e define seu <code>this</code> com o valor fornecido. Argumentos podem ser passados como um objeto {{jsxref("Array")}}.</dd>
- <dt>{{jsxref("Function.prototype.bind()")}}</dt>
- <dd>Cria uma nova função que, quando chamada, tem seu <code>this</code> definido com o valor fornecido, com uma sequência de argumentos determinada precedendo quaisquer argumentos fornecidos quando a nova função é chamada.</dd>
- <dt>{{jsxref("Function.prototype.call()")}}</dt>
- <dd>Chama (executa) uma função e define seu <code>this</code> com o valor fornecido. Argumentos podem ser passados como são.</dd>
- <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
- <dd>Retorna <code>true</code> se a função é um <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">gerador</a>; se não, retorna <code>false</code>.</dd>
- <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>Retorna uma <em>string</em> representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toSource")}}.</dd>
- <dt>{{jsxref("Function.prototype.toString()")}}</dt>
- <dd>Retorna uma <em>string</em> representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toString")}}.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Definição inicial. Implementada no JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
-
-<div>
-<div class="hidden">A tabela de compatibildiade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira por favor <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma <em>pull request</em>.</div>
-
-<p>{{Compat("javascript.builtins.Function.prototype")}}</p>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
deleted file mode 100644
index dce89ef41e..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Intl.NumberFormat.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
-tags:
-  - Internacionalização
-  - JavaScript
-  - NumberFormat
-  - Property
-  - Propriedade
-  - Prototipo
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <strong><code>Intl.NumberFormat.prototype</code></strong> representa o objeto do protótipo do construtor de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
-
-<div>{{js_property_attributes(0, 0, 0)}}</div>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Veja {{jsxref("NumberFormat")}} para uma descrição sobre instâncias de <code>Intl.NumberFormat</code>.</p>
-
-<p>As instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}} herdam de <code>Intl.NumberFormat.prototype</code>. Modificações ao objeto do protótipo são herdados por todas as instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>Intl.NumberFormat.prototype.constructor</code></dt>
- <dd>Uma referência a <code>Intl.NumberFormat</code>.</dd>
- <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt>
- <dd>Getter; retorna uma função que formata um número de acordo com a localização e as opçõe de formatação do objeto {{jsxref("NumberFormat")}}.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt>
- <dd>Retorna um novo objeto com propriedades refletindo a localização e as opções de agrupamento obtidos durante a inicialização do objeto.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentários</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Definição inicial.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Características</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatChrome("24")}}</td>
-   <td>{{CompatGeckoDesktop("29")}}</td>
-   <td>{{CompatIE("11")}}</td>
-   <td>{{CompatOpera("15")}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Características</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome("26")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html
deleted file mode 100644
index b20baf56cc..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Map.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Mapa
-  - Propriedade
-translation_of: Web/JavaScript/Reference/Global_Objects/Map
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <code><strong>Map</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Map")}}.</p>
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Instâncias de {{jsxref("Map")}} herdam de {{jsxref("Map.prototype")}}. Você pode utilizar o objeto protótipo do  construtor para adicionar propriedades ou métodos para todas as instâncias de <code>Map</code>.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>Map.prototype.constructor</code></dt>
- <dd>Retorna a função que criou um protótipo da instância. Isso é a funçao de {{jsxref("Map")}} por padrão.</dd>
- <dt>{{jsxref("Map.prototype.size")}}</dt>
- <dd>Retorna o número de pares chave/valor no objeto <code>Map</code>.</dd>
-</dl>
-
-<h2 id="Metódos">Metódos</h2>
-
-<dl>
- <dt>{{jsxref("Map.prototype.clear()")}}</dt>
- <dd>Remove todas os pares chave/valor do objeto <code>Map</code>.</dd>
- <dt>{{jsxref("Map.delete", "Map.prototype.delete(chave)")}}</dt>
- <dd>Remove qualquer valor associado à chave passada e retorna o valor que <code>Map.prototype.has(chave)</code> deveria retornar anteriormente. <code>Map.prototype.has(chave)</code> irá retornar <code>false</code> após tal remoção ser feita.</dd>
- <dt>{{jsxref("Map.prototype.entries()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterador</code> que contem<strong> um array de <code>[chave, valor]</code></strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd>
- <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt>
- <dd>Chama callbackFn uma vez para cada par chave/valor presente no objeto <code>Map</code>, pela ordem de inserção. Se um parâmetro thisArg for fornecido para o forEach, ele será utilizado como o valor this para cada callback.</dd>
- <dt>{{jsxref("Map.get", "Map.prototype.get(chave)")}}</dt>
- <dd>Retorna o valor associado para a <code>chave</code>, ou <code>undefined</code> se esta não existir no objeto <code>Map</code>.</dd>
- <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt>
- <dd>Retorna um valor booleano caso um valor tenha sido associado à <code>chave</code> no objeto <code>Map</code> ou não.</dd>
- <dt>{{jsxref("Map.prototype.keys()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterador</code> que contem as <strong>chaves</strong> para cada elemento no objeto <code>Map</code> object pela ordem de inserção.</dd>
- <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt>
- <dd>Configura o valor par a <code>chave</code> no objeto <code>Map</code>. Retorna o objeto <code>Map</code>.</dd>
- <dt>{{jsxref("Map.prototype.values()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterador</code> que contém os <strong>valores</strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd>
- <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterator</code> que contém<strong> um array de <code>[chave, valor]</code></strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Definição inicial.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>38</td>
-   <td>{{ CompatGeckoDesktop("13") }}</td>
-   <td>11</td>
-   <td>25</td>
-   <td>7.1</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatNo}}</td>
-   <td>38</td>
-   <td>{{CompatGeckoMobile("13")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>
-    <p>8</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Set.prototype")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html
deleted file mode 100644
index 9dd96bc9b3..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: Number.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
-tags:
-  - JavaScript
-  - Número
-  - Propriedade
-  - Prototipo
-translation_of: Web/JavaScript/Reference/Global_Objects/Number
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <strong><code>Number.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Number")}}.</p>
-
-<div>{{js_property_attributes(0, 0, 0)}}</div>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Todas instâncias {{jsxref("Number")}} herdam de <code>Number.prototype</code>. O objeto 'prototype' do construtor {{jsxref("Number")}} pode ser modificado para afetar todas instâncias {{jsxref( "Number")}}.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>Number.prototype.constructor</code></dt>
- <dd>Retorna a função que criou esta instância do objeto. Por padrão, este é o objeto {{jsxref("Number")}}.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
- <dd>Retorna uma 'string' representando o número em notação exponencial.</dd>
- <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
- <dd>Retorna uma 'string' representando o número em notação em ponto fixo.</dd>
- <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
- <dd>Retorna uma 'string'  com uma representação sensível ao idioma deste número.  Substitui o método {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
- <dd>Retorna uma 'string' representando o número para uma precisão específica em notação ponto fixo ou exponencial.</dd>
- <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>Retorna uma objeto literal representando um objeto específicado {{jsxref("Number")}}; você pode usar este valor para criar um novo objeto. Substitui o método {{jsxref("Object.prototype.toSource()")}}.</dd>
- <dt>{{jsxref("Number.prototype.toString()")}}</dt>
- <dd>Retorna uma 'string' representando o objeto especificado na raiz especificada (base). Substitui o método {{jsxref("Object.prototype.toString()")}}.</dd>
- <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
- <dd>Retorna o valor primitivo do objeto especificado. Substitui o método {{jsxref("Object.prototype.valueOf()")}}.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Situação</th>
-   <th scope="col">Comentários</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Definição inicial. Implementado em JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Configuração</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Configuração</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Number")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html
deleted file mode 100644
index d0c07076a0..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html
+++ /dev/null
@@ -1,227 +0,0 @@
----
-title: Object.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
-tags:
-  - JavaScript
-  - Objeto
-  - Propriedade
-translation_of: Web/JavaScript/Reference/Global_Objects/Object
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype
----
-<div>{{JSRef("Global_Objects", "Object")}}</div>
-
-<h2 id="Summary" name="Summary">Sumário</h2>
-
-<p>A propriedade <code><strong>Object.prototype</strong></code> representa o {{jsxref("Global_Objects/Object", "Object")}} protótipo do objeto.</p>
-
-<p>{{js_property_attributes(0, 0, 0)}}</p>
-
-<h2 id="Description" name="Description">Descrição</h2>
-
-<p>Praticamente todos os objetos em JavaScript descendem de {{jsxref("Global_Objects/Object", "Object")}}; todos os métodos e propriedades herdados de <code>Object.prototype</code>, embora possam ser sobrescritos (exceto um <code>Objeto</code> com protótipo nulo, i.e. <code>Object.create(null)</code>). Por exemplo, outros protótipos construtores sobrescrevem a propriedade construtora e fornece seus próprios {{jsxref("Object.prototype.toString()", "toString()")}} métodos.</p>
-
-<p>Modificações no <code>Objeto protótipo</code> do objeto são propagadas a <strong>todos</strong> objetos através do encadeamento de protótipos, a menos que as propriedades e métodos  submetidos às mudanças sejam sobrescritos mais além no encadeamento dos protótipos. Este recurso oferece um mecânismo muito poderoso apesar de perigoso para <em>sobrescrita</em> e <em>extensão</em> de objetos.</p>
-
-<h2 id="Properties" name="Properties">Propriedades</h2>
-
-<dl>
- <dt>{{jsxref("Object.prototype.constructor")}}</dt>
- <dd>Especifica a função que cria um objeto protótipo.</dd>
- <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt>
- <dd>Aponta para o objeto que foi usado como protótipo quando o objeto foi instanciado.</dd>
- <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt>
- <dd>Permite definir uma função que será executada quando um membro indefinido do objeto for chamado como método.</dd>
- <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt>
- <dd><s class="obsoleteElement">Usado para retornar um número de propriedades enumeráveis diretamente num objeto definido pelo usuário, mas foi removida.</s></dd>
- <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt>
- <dd><s class="obsoleteElement">Usado para apontar a um contexto do objeto, mas foi removida.</s></dd>
-</dl>
-
-<h2 id="Methods" name="Methods">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Associa uma função com uma propriedade que, quando acessada, executa uma função e retorna seu valor de retorno.</dd>
- <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Associa uma função com uma propriedade que, quando definida, executa uma função que modifica a propriedade.</dd>
- <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Retorna a função associada com a propriedade específicada pelo {{jsxref("Object.defineGetter", "__defineGetter__")}} método.</dd>
- <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Retorna a função associada com a propriedade especificada pelo {{jsxref("Object.defineSetter", "__defineSetter__")}} método.</dd>
- <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
- <dd>Retorna um boolean indicando se um objeto contém a propriedade especificada como uma propriedade direta de um objeto e não herdada através da cadeia de protótipo.</dd>
- <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
- <dd>Retorna uma indicação booleana se o objeto especificado está na cadeia de protótipo do objeto este método é chamado.</dd>
- <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
- <dd>Retorna um boolean indicando se o atributo interno <a href="/en-US/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">ECMAScript DontEnum attribute</a> está definido.</dd>
- <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>Retorna uma string contendo o código de um objeto literal representando o objeto que este método é  chamado; você pode usar este valor para criar um novo objeto.</dd>
- <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
- <dd>Chama {{jsxref("Object.toString", "toString()")}}.</dd>
- <dt>{{jsxref("Object.prototype.toString()")}}</dt>
- <dd>Retorna uma representação do objeto em forma de string.</dd>
- <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt>
- <dd>Remove um ponto de escuta da propriedade do objeto.</dd>
- <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
- <dd>Retorna o valor primitivo do objeto especificado.</dd>
- <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
- <dd>Adiciona um ponto de escuta à propriedade do objeto.</dd>
- <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt>
- <dd><s class="obsoleteElement">Usado para avaliar uma string de código JavaScript no contexto do objeto especificado, mas foi removido.</s></dd>
-</dl>
-
-<h2 id="Examples" name="Examples">Exemplos</h2>
-
-<p>Quando é alterado o comportamento de um método de um Objeto protótipo, considere injetar código envolvendo sua extensão antes ou depois ta lógica existente. Por exemplo, este (não testado) código irá pré-condicionalmente executar uma lógica personalizada antes da lógica embutida ou a extensão de alguém será executada.</p>
-
-<p>Quando uma função é chamada os argumentos para a chamada são segurados no array de argumentos como "variável". Por exemplo, na chamada "minhaFuncao(a, b, c)", os argumentos no corpo da minhaFuncao irão conter 3 elementos array correspondentes a (a, b, c). Quando modificamos os protótipos com ganchos, simplesmente passamos <em>this</em> &amp; a variável <em>arguments</em> (o estado de chamada) para o comportamento atual pela chamada <em>apply()</em> na função. Este padrão pode ser usado por qualquer protótipo, tal como <em>Node.prototype, Function.prototype, etc.</em></p>
-
-<pre><code>var current = Object.prototype.valueOf;
-
-// Desde que minha propriedade "-prop-value" é transversal e não está
-// sempre na mesma cadeia de protótipo, desejo modificar Object.prototype:
-Object.prototype.valueOf = function() {
-  if (this.hasOwnProperty("-prop-value") {
-    return this["-prop-value"];
-  } else {
-    // Isto não parece com um de meus objetos, então vamos retroceder ao
-    // comportamento padrão para reproduzir o comportamento atual o que
-    // pudermos. O <em>apply</em> se comporta como o<em>"super"</em> em outras linguagens.
-    // Mesmo que <em>valueOf()</em> não receba argumentos, alguns outros ganchos podem.
-    return current.apply(this, arguments);
-  }
-}</code></pre>
-
-<p>Desde que JavaScript não tem exatamente objetos de subclasse, protótipo é uma forma usual de trabalhar para fazer um objeto "classe base" de certas funções que agem como objetos. Por exemplo:</p>
-
-<pre class="brush: js">var Person = function() {
-  this.canTalk = true;
-  this.greet = function() {
-    if (this.canTalk) {
-      console.log('Hi, I\'m ' + this.name);
-    }
-  };
-};
-
-var Employee = function(name, title) {
-  this.name = name;
-  this.title = title;
-  this.greet = function() {
-    if (this.canTalk) {
-      console.log("Hi, I'm " + this.name + ", the " + this.title);
-    }
-  };
-};
-Employee.prototype = new Person();
-
-var Customer = function(name) {
-  this.name = name;
-};
-Customer.prototype = new Person();
-
-var Mime = function(name) {
-  this.name = name;
-  this.canTalk = false;
-};
-Mime.prototype = new Person();
-
-var bob = new Employee('Bob', 'Builder');
-var joe = new Customer('Joe');
-var rg = new Employee('Red Green', 'Handyman');
-var mike = new Customer('Mike');
-var mime = new Mime('Mime');
-bob.greet();
-joe.greet();
-rg.greet();
-mike.greet();
-mime.greet();
-</pre>
-
-<p>O retorno será:</p>
-
-<pre>Hi, I'm Bob, the Builder
-Hi, I'm Joe
-Hi, I'm Red Green, the Handyman
-Hi, I'm Mike
-</pre>
-
-<h2 id="Specifications" name="Specifications">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificações</th>
-   <th scope="col">Situação</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0.</td>
-   <td>Padrão</td>
-   <td>Definição inicial.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Aspecto</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Aspecto</th>
-   <th>Android</th>
-   <th>Chrome para Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico.</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p> </p>
diff --git a/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html
deleted file mode 100644
index d0be3d870c..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Promise.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype
----
-<div>{{JSRef("Global_Objects", "Promise")}}</div>
-
-<h2 id="Summary" name="Summary">Sumário</h2>
-
-<p>A propriedade <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Promise")}}.</p>
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description" name="Description">Descrição</h2>
-
-<p>{{jsxref("Promise")}} instância herdada de {{jsxref("Promise.prototype")}}. Você pode usar o objeto construtor para adicionar propriedades ou métodos  para todas as instâncias de <code>Promise</code>.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>Promise.prototype.constructor</code></dt>
- <dd>Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt>
- <dd>Adiciona um callback que trata rejeição para a promise e, retorna uma nova promise resolvendo o valor retornado do callback, se ele for chamado, ou para seu valor original de conclusão se a promise for realizada.</dd>
- <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt>
- <dd>Adiciona os métodos de tratamento da realização e rejeição da promise e, retorna uma nova promise resolvendo para o valor do método chamado.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>32</td>
-   <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br>
-    {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br>
-    {{CompatGeckoDesktop(29.0)}} by default</td>
-   <td>{{CompatNo}}</td>
-   <td>19</td>
-   <td>7.1</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br>
-    {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br>
-    {{CompatGeckoMobile(29.0)}} by default</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>iOS 8</td>
-   <td>32</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html
deleted file mode 100644
index 1f2ca2c70b..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Set.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Set/prototype
-tags:
-  - Propriedade
-  - Prototipo
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A propriedade <code><strong>Set</strong></code><strong><code>.prototype</code></strong> representa o protótipo do construtor do objeto {{jsxref("Set")}}.</p>
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Instâncias de {{jsxref("Set")}} herdam de {{jsxref("Set.prototype")}}. Você pode usar o construtor do objeto protótipo para adicionar propriedades ou métodos para todas as instâncias de <code>Set</code> .</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>Set.prototype.constructor</code></dt>
- <dd>Retorna a função que criou o protótipo de uma instância. Esta é a função {{jsxref("Set")}} por padrão.</dd>
- <dt>{{jsxref("Set.prototype.size")}}</dt>
- <dd>Retorna o número de valores no objeto <code>Set</code>.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<dl>
- <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt>
- <dd>Anexa um novo elemento com o valor passado ao objeto <code>Set</code> . Retorna o objeto <code>Set</code>.</dd>
- <dt>{{jsxref("Set.prototype.clear()")}}</dt>
- <dd>Remove todos os elementos do objeto <code>Set</code>.</dd>
- <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt>
- <dd>Remove o elemento associado ao <code>value</code> e retorna o valor que <code>Set.prototype.has(value)</code> teria retornado anteriormente. <code>Set.prototype.has(value)</code> irá retornar <code>false</code> depois disso.</dd>
- <dt>{{jsxref("Set.prototype.entries()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterator</code> que contém<strong> um array de <code>[value, value]</code></strong> para cada elemento no objeto <code>Set</code> , em ordem de inserção. Isso é similar ao objeto <code>Map</code>, para que cada entrada tenha o mesmo valor para sua <em>chave</em> e<em>valor </em>aqui.</dd>
- <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt>
- <dd>Chama <code>callbackFn</code> uma vez para cada valor presente no objeto <code>Set</code>, em ordem de inserção. Se um parâmetro <code>thisArg</code> for passado para o <code>forEach</code>, ele será usado como valor de <code>this</code> para cada callback.</dd>
- <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt>
- <dd>Retorna um booleano afirmando se um elemento está presente com o dado valor no objeto <code>Set</code> ou não.</dd>
- <dt>{{jsxref("Set.prototype.keys()")}}</dt>
- <dd>É a mesma função que a função <strong><code>values()</code></strong> e retorna um novo objeto <code>Iterator</code> que contém os valores para cada elemento no objeto <code>Set</code>  em ordem de inserção.</dd>
- <dt>{{jsxref("Set.prototype.values()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterator</code> que contém os <strong>values</strong> para cada elemento no objeto <code>Set</code>  em ordem de inserção.</dd>
- <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt>
- <dd>Retorna um novo objeto <code>Iterator</code> que contém os <strong>values</strong> para cada elemento do objeto <code>Set</code> em ordem de inserção.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Definição inicial.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
-
-
-
-<p>{{Compat("javascript.builtins.Set.prototype")}}</p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Map.prototype")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html
deleted file mode 100644
index a0df7b93ea..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: String.prototype
-slug: Web/JavaScript/Reference/Global_Objects/String/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/String
-translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype
----
-<div>{{JSRef}}</div>
-
-<p>A <strong><code>String.prototype</code></strong> representa o prototipo de objeto  {{jsxref("String")}}.</p>
-
-<div>{{js_property_attributes(0, 0, 0)}}</div>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Todas as instâncias {{jsxref("String")}} herdam de <code>String.prototype</code>. Alterações na <code>String</code> são propagadas para todas as instâncias {{jsxref("String")}}.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>String.prototype.constructor</code></dt>
- <dd>Especifica a função que cria o protótipo de um objeto.</dd>
- <dt>{{jsxref("String.prototype.length")}}</dt>
- <dd>Reflete o comprimento da string.</dd>
- <dt><code><em>N</em></code></dt>
- <dd>Usado para acessar o caractere na posição <em>N</em> onde <em>N</em> é um número inteiro entre 0 e um menor que o valor da <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a></code>. Estas propriedades são apenas de leitura.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<h3 id="Métodos_não_relacionados_ao_HTML">Métodos não relacionados ao HTML</h3>
-
-<dl>
- <dt>{{jsxref("String.prototype.charAt()")}}</dt>
- <dd>Retorna o caractere (exatamente uma unidade de código UTF-16) no índice especificado.</dd>
- <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt>
- <dd>Retorna um número que é o valor da unidade de código UTF-16 em dado índice.</dd>
- <dt>{{jsxref("String.prototype.codePointAt()")}}</dt>
- <dd>Retorna um número inteiro não negativo Number que é o valor de posição de código da posição de código inicial em dado índice.</dd>
- <dt>{{jsxref("String.prototype.concat()")}}</dt>
- <dd>Combina o texto de duas strings e retorna uma nova string.</dd>
- <dt>{{jsxref("String.prototype.includes()")}}</dt>
- <dd> Determina se uma string deve ser encontrada dentro de outra string.</dd>
- <dt>{{jsxref("String.prototype.endsWith()")}}</dt>
- <dd>Determina se uma string termina com os caracteres de outra string.</dd>
- <dt>{{jsxref("String.prototype.indexOf()")}}</dt>
- <dd>Retorna o índice dentro do objeto String chamado da primeira ocorrência do valor especificado, ou -1 se não encontrado.</dd>
- <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt>
- <dd>Retorna o índice dentro do objeto String chamado da última ocorrência do valor especificado, ou -1 se não encontrado.</dd>
- <dt>{{jsxref("String.prototype.localeCompare()")}}</dt>
- <dd>Retorna um número indicando se uma string de referência vem antes ou depois ou é o mesmo que uma string dada em ordem de classificação.</dd>
- <dt>{{jsxref("String.prototype.match()")}}</dt>
- <dd>Usado para combinar uma expressão regular com uma string.</dd>
- <dt>{{jsxref("String.prototype.normalize()")}}</dt>
- <dd>Retorna o Formulário de Normalização Unicode do valor string chamado.</dd>
- <dt>{{jsxref("String.prototype.padEnd()")}}</dt>
- <dd>Empacota a string atual desde o final com uma string dada para criar uma nova string de um dado comprimento.</dd>
- <dt>{{jsxref("String.prototype.padStart()")}}</dt>
- <dd>Empacota a string atual desde o início com uma string dada para criar uma nova string de um dado comprimento.</dd>
- <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt>
- <dd><s class="obsoleteElement">Envolve a cadeia entre aspas duplas ("" ").</s></dd>
- <dt>{{jsxref("String.prototype.repeat()")}}</dt>
- <dd>Retorna uma string consistindo elementos do objeto repetido pelas vezes definidas.</dd>
- <dt>{{jsxref("String.prototype.replace()")}}</dt>
- <dd>Usado para encontrar uma combinação entre uma expressão regular e uma string, e para substituir uma substring combinada com uma nova substring.</dd>
- <dt>{{jsxref("String.prototype.search()")}}</dt>
- <dd>Executa a procura por uma combinação entre uma expressão regular e uma string especificada.</dd>
- <dt>{{jsxref("String.prototype.slice()")}}</dt>
- <dd>Extrai uma seção de uma string e retorna uma nova string.</dd>
- <dt>{{jsxref("String.prototype.split()")}}</dt>
- <dd>Separa um objeto <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a> em um array de strings separando a string em substrings.</dd>
- <dt>{{jsxref("String.prototype.startsWith()")}}</dt>
- <dd>Determina se uma string começa com os caracteres de outra string.</dd>
- <dt>{{jsxref("String.prototype.substr()")}}</dt>
- <dd>Retorna os caracteres em uma string começando no local especificado através do número especificado de caracteres.</dd>
- <dt>{{jsxref("String.prototype.substring()")}}</dt>
- <dd>Retorna os caracteres em uma string entre dois índices na string.</dd>
- <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt>
- <dd>Os caracteres dentro de uma string são convertidos para letras minúsculas enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase" title="The toLowerCase() method returns the calling string value converted to lower case."><code>toLowerCase()</code></a>.</dd>
- <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt>
- <dd>Os caracteres dentro de uma string são convertidas para letra maiúscula enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase" title="The toUpperCase() method returns the calling string value converted to upper case."><code>toUpperCase()</code></a>.</dd>
- <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
- <dd>Retorna o valor da string de chamada convertido em minúsculas.</dd>
- <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>Retorna um objeto literal representando o objeto especificado; Você pode usar esse valor para criar um novo objeto. Substitui o metodo:{{jsxref("Object.prototype.toSource()")}}</dd>
- <dt>{{jsxref("String.prototype.toString()")}}</dt>
- <dd>Retorna uma string que representa o objeto especificado. Substitui o metodo:{{jsxref("Object.prototype.toString()")}}</dd>
- <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
- <dd>Retorna o valor da string de chamada convertido em maiúscula.</dd>
- <dt>{{jsxref("String.prototype.trim()")}}</dt>
- <dd>Retira o espaço em branco desde o início e o fim da string. Parte do padrão ECMAScript 5.</dd>
- <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt>
- <dd>Retira o espaço em branco do lado esquerdo da string.</dd>
- <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt>
- <dd>Retira o espaço em branco do lado esquerdo da string.</dd>
- <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
- <dd>Retorna o valor primitivo do objeto especificado. Substitui o metodo: {{jsxref("Object.prototype.valueOf()")}} </dd>
- <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt>
- <dd>Retorna um novo objeto  <code>Iterator </code>que repete sobre os pontos de código de um valor String, retornando cada ponto de código como um valor String.</dd>
-</dl>
-
-<h3 id="Métodos_de_envoltório_HTML">Métodos de envoltório HTML</h3>
-
-<p>Esses métodos são de uso limitado, pois fornecem apenas um subconjunto das tags e atributos HTML disponíveis.</p>
-
-<dl>
- <dt>{{jsxref("String.prototype.anchor()")}}</dt>
- <dd>{{htmlattrxref("name", "a", "&lt;a name=\"name\"&gt;")}} (alvo hipertexto)</dd>
- <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("big")}}</dd>
- <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("blink")}}</dd>
- <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("b")}}</dd>
- <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("tt")}}</dd>
- <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt>
- <dd>{{htmlattrxref("color", "font", "&lt;font color=\"color\"&gt;")}}</dd>
- <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt>
- <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
- <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("i")}}</dd>
- <dt>{{jsxref("String.prototype.link()")}}</dt>
- <dd>{{htmlattrxref("href", "a", "&lt;a href=\"url\"&gt;")}} (link para URL)</dd>
- <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("small")}}</dd>
- <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("strike")}}</dd>
- <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("sub")}}</dd>
- <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt>
- <dd>{{HTMLElement("sup")}}</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificacoes</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentarios</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Definição inicial.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_entre_browsers">Compatibilidade entre browsers</h2>
-
-<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pedido de participação.</p>
-
-<p>{{Compat("javascript.builtins.String.prototype")}}</p>
-
-<h2 id="Veja_também">Veja também </h2>
-
-<ul>
- <li>{{jsxref("String")}}</li>
- <li>{{jsxref("Function.prototype")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html
deleted file mode 100644
index c3e0334a3b..0000000000
--- a/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: WeakMap.prototype
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
-translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype
----
-<div>{{JSRef("Global_Objects", "WeakMap")}}</div>
-
-<h2 id="Summary" name="Summary">Sumário</h2>
-
-<p>A propriedade <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa o prototype fara o construtor {{jsxref("WeakMap")}}.</p>
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description" name="Description">Descrição</h2>
-
-<p>Instâncias {{jsxref("WeakMap")}} herdam de {{jsxref("WeakMap.prototype")}}. Você pode usar o objeto <code>prototype</code> do construtor para adicionar propriedades ou métodos para todas as instâncias <code>WeakMap</code>.</p>
-
-<h2 id="Propriedades">Propriedades</h2>
-
-<dl>
- <dt><code>WeakMap.prototype.constructor</code></dt>
- <dd>Retorna a função construtora das instâncias, neste caso a própria <code>{{jsxref("WeakMap")}}</code>.</dd>
-</dl>
-
-<h2 id="Metodos">Metodos</h2>
-
-<dl>
- <dt>{{jsxref("WeakMap.prototype.clear()")}}</dt>
- <dd>Remove todos os pares chave/valor do objeto <code>WeakMap</code></dd>
- <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt>
- <dd>Remove qualquer valor associado à  <code style="font-style: normal; line-height: 1.5;">key</code><span style="line-height: 1.5;">. </span><code style="font-style: normal; line-height: 1.5;">WeakMap.prototype.has(key)</code> e retorna <code style="font-style: normal; line-height: 1.5;">false</code> após.</dd>
- <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt>
- <dd>Retorna o valor associado a <code>key</code>, ou <code>undefined</code> se nenhum existir.</dd>
- <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt>
- <dd>Retorna um Boolean verificando se há algum valor associado a <code>key</code> no objeto <code>WeakMap</code> ou não.</dd>
- <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt>
- <dd>Configura um valor para <code>key</code> no objeto <code>WeakMap</code>. Retorna <code>undefined</code>.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Especificação inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_browsers">Compatibilidade de browsers </h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Recurso</th>
-   <th>Chrome</th>
-   <th>Firefox (SpiderMonkey)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("6.0")}}</td>
-   <td>11</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Recurso</th>
-   <th>Android</th>
-   <th>Firefox Mobile (SpiderMonkey)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte básico</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoMobile("6.0")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h3 id="Notas_para_o_Chrome">Notas para o Chrome</h3>
-
-<ul>
- <li>O recurso é ativado por preferência. Em <span style="font-family: 'Courier New','Andale Mono',monospace;">chrome://flags </span>ative "Enable Experimental JavaScript".</li>
-</ul>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Map.prototype")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html b/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html
deleted file mode 100644
index 4ca87eaddd..0000000000
--- a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html
+++ /dev/null
@@ -1,329 +0,0 @@
----
-title: Arithmetic operators
-slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators
-tags:
-  - JavaScript
-  - Operadores
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators
----
-<div>{{jsSidebar("Operadores")}}</div>
-
-<p><strong>Operadores aritméticos</strong> tem valores numéricos (literais ou variáveis) como seus operadores e retornam um valor numérico único. Os operadores aritméticos padrões são adição (+), subtração (-), multiplicação (*), e divisão (/).</p>
-
-<h2 id="Adição_()"><a name="Addition">Adição (+)</a></h2>
-
-<p>O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.</p>
-
-<h3 id="Sintaxe">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> x + y
-</pre>
-
-<h3 id="Exemplos">Exemplos</h3>
-
-<pre class="brush: js">// Número + Número -&gt; adição
-1 + 2 // 3
-
-// Booleano + Número -&gt; adição
-true + 1 // 2
-
-// Booleano + Booleano -&gt; adição
-false + false // 0
-
-// Número + String -&gt; concatenação
-5 + "foo" // "5foo"
-
-// String + Booleano -&gt; concatenação
-"foo" + false // "foofalse"
-
-// String + String -&gt; concatenação
-"foo" + "bar" // "foobar"
-</pre>
-
-<h2 id="Subtração_(-)"><a name="Subtraction">Subtração (-)</a></h2>
-
-<p>O operador de subtração subtrai os dois operandos, produzindo sua diferença.</p>
-
-<h3 id="Sintaxe_2">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> x - y
-</pre>
-
-<h3 id="Exemplos_2">Exemplos</h3>
-
-<pre class="brush: js">5 - 3 // 2
-3 - 5 // -2
-"foo" - 3 // NaN</pre>
-
-<h2 id="Divisão_()"><a name="Division">Divisão (/)</a></h2>
-
-<p>O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.</p>
-
-<h3 id="Sintaxe_3">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> x / y
-</pre>
-
-<h3 id="Exemplos_3">Exemplos</h3>
-
-<pre class="brush: js">1 / 2      // retorna 0.5 em JavaScript
-1 / 2      // retorna 0 em Java
-// (nenhum dos números é explicitamente um número de ponto flutuante)
-
-1.0 / 2.0  // retorna 0.5 em JavaScript e Java
-
-2.0 / 0    // retorna Infinity em JavaScript
-2.0 / 0.0  // retorna Infinity também
-2.0 / -0.0 // retorna -Infinity em JavaScript</pre>
-
-<h2 id="Multiplicação_(*)"><a name="Multiplication">Multiplicação (*)</a></h2>
-
-<p>O operador de multiplicação produz o produto dos operandos.</p>
-
-<h3 id="Sintaxe_4">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> x * y
-</pre>
-
-<h3 id="Exemplos_4">Exemplos</h3>
-
-<pre class="brush: js">2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN
-Infinity * Infinity // Infinity
-"foo" * 2 // NaN
-</pre>
-
-<h2 id="Módulo_()"><a name="Remainder">Módulo (%)</a></h2>
-
-<p>O operador de módulo retorna o primeiro operando módulo o segundo, isto é, var1 módulo var2, na sentença anterior, onde var1 e var 2 são variáveis. A função módulo é o resto inteiro da divisão de var1 por var2. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.</a></p>
-
-<h3 id="Sintaxe_5">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> var1 % var2
-</pre>
-
-<h3 id="Examples">Examples</h3>
-
-<pre class="brush: js">12 % 5 // 2
--1 % 2 // -1
-NaN % 2 // NaN
-</pre>
-
-<h2 id="Exponenciação_(**)"><a id="Exponenciação" name="Exponenciação">Exponenciação (**)</a></h2>
-
-<p>O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que <code>var1</code><sup><code>var2</code></sup>, onde <code>var1</code> e <code>var2</code> são variáveis. O operador de exponenciação é associativo à direita, ou seja, <code>a ** b ** c</code> é igual a <code>a ** (b ** c)</code>.</p>
-
-<h3 id="Sintaxe_6">Sintaxe</h3>
-
-<pre><strong>Operador:</strong> var1 ** var2
-</pre>
-
-<h3 id="Notas">Notas</h3>
-
-<p>Em várias linguagens como PHP e Python e outras que tem o operador de exponenciação (**), a exponenciação tem prioridade do que operações unárias, como + e  -, mas tem algumas exceções. Por exemplo, no Bash o operador ** é definido por ter menos prioridade do que operadores unários. No JavaScript, é impossível escrever uma expressão de exponenciação ambígua, i.e. você não pode colocar um operador unário (<code>+/-/~/!/delete/void/typeof</code>) imediatamente antes do número base.</p>
-
-<pre>-2 ** 2;
-// 4 no Bash, -4 em outras linguagens.
-// Isso é inválido no JavaScript, pois a operação é ambígua.
-
-
--(2 ** 2);
-// -4 no JavaScript e a intenção do autor não é ambígua.
-</pre>
-
-<h3 id="Exemplos_5">Exemplos</h3>
-
-<pre>2 ** 3 // 8
-3 ** 2 // 9
-3 ** 2.5 // 15.588457268119896
-10 ** -1 // 0.1
-NaN ** 2 // NaN
-
-2 ** 3 ** 2 // 512
-2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64
-</pre>
-
-<p>Para inverter o sinal do resultado de uma expressão de exponenciação:</p>
-
-<pre>-(2 ** 2) // -4
-</pre>
-
-<p>Para forçar a base de uma expressão de exponenciação para ser um número negativo:</p>
-
-<pre>(-2) ** 2 // 4
-</pre>
-
-<div class="note">
-<p><strong>Nota:</strong> JavaScript também tem  <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">um operador de lógica binária ^ (XOR)</a>. <code>**</code> e <code>^</code> são diferentes (por exemplo : <code>2 ** 3 === 8</code> enquanto <code>2 ^ 3 === 1</code>.)</p>
-</div>
-
-<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2>
-
-<p>O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;</p>
-
-<ul>
- <li>Se usado na forma posfixa, com o operador depois do operando (por exemplo, x++), então ele retorna o valor antes de incrementá-lo.</li>
- <li>Se usado na forma prefixa, com o operador antes do operando (por exemplo, ++x), então ele retorna o valor depois de incrementá-lo.</li>
-</ul>
-
-<h3 id="Sintaxe_7">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> x++ or ++x
-</pre>
-
-<h3 id="Exemplos_6">Exemplos</h3>
-
-<pre class="brush: js">// Posfixo
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefixo
-var a = 2;
-b = ++a; // a = 3, b = 3
-</pre>
-
-<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2>
-
-<p>O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.</p>
-
-<ul>
- <li>Se usado na forma posfixa (por exemplo, x--), então ele retorna o valor antes de decrementá-lo.</li>
- <li>Se usado na forma prefixa (por exemplo, --x), então ele retorna o valor depois de decrementá-lo.</li>
-</ul>
-
-<h3 id="Sintaxe_8">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> x-- or --x
-</pre>
-
-<h3 id="Exemplos_7">Exemplos</h3>
-
-<pre class="brush: js">// Posfixo
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefixo
-var a = 2;
-b = --a; // a = 1, b = 1
-</pre>
-
-<h2 id="Negação_Unária_(-)"><a name="Unary_negation">Negação Unária (-)</a></h2>
-
-<p>O operador de negação unária precede seu operando e o nega.</p>
-
-<h3 id="Sintaxe_9">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> -x
-</pre>
-
-<h3 id="Exemplos_8">Exemplos</h3>
-
-<pre class="brush: js">var x = 3;
-y = -x; // y = -3, x = 3
-</pre>
-
-<h2 id="Soma_Unária_()"><a name="Unary_plus">Soma Unária</a> (+)</h2>
-
-<p>O operador de soma unária precede seu operando e calcula para seu operando mas tenta convertê-lo para um número, caso ainda não o seja. Apesar da negação unária (-) também poder converter não-números, a soma unária é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número. Ele pode converter strings que representam inteiros e ponto flutuante, bem como os valores de não-string <code>true</code>, <code>false</code>, e <code>null</code>. Inteiros em formato decimal e hexadecimal ("0x"-prefixado) são suportados. Números negativos são suportados (não os hexadecimais). Caso não possa analisar um determinado valor, o operador retornará <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p>
-
-<h3 id="Sintaxe_10">Sintaxe</h3>
-
-<pre class="syntaxbox"><strong>Operador:</strong> +x
-</pre>
-
-<h3 id="Exemplos_9">Exemplos</h3>
-
-<pre class="brush: js">+3     // 3
-+"3"   // 3
-+true  // 1
-+false // 0
-+null  // 0
-</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>ECMAScript 1ª Edição.</td>
-   <td>Padrão</td>
-   <td>Definição inicial.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatores de atribuição</a></li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html b/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html
deleted file mode 100644
index b8b2e654c4..0000000000
--- a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html
+++ /dev/null
@@ -1,559 +0,0 @@
----
-title: Bitwise operators
-slug: Web/JavaScript/Reference/Operators/Bitwise_Operators
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<div></div>
-
-<div>Operadores bit-a-bit são são operadores tratados como sequência de 32 bits ( zeros e uns ), preferencialmente como decimal, hexadecimal, ou números octais. Por exemplo, o número decimal 9 tinha como representação binária de 1001. Operadores bit-a-bit realizam as operações em tais representações binárias, mas retornam valores numéricos no padrão Javascript.</div>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div>
-
-<p class="hidden">O código para este interactivo exemplo está armazenado em um repositório GitHub . Se você quiser contribuir para o projeto exemplo interativo, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e mande-nos um pull request.</p>
-
-<p>A seguinte tabela resume os Operadores bit-a-bit:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Operador</th>
-   <th>Uso</th>
-   <th>Descrição</th>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_AND)">Bitwise AND</a></td>
-   <td><code>a &amp; b</code></td>
-   <td>Retorna <code>1</code> em cada posição de bit para à qual o bit correspondente de ambos eram <code>1</code>s.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_OR)">Bitwise OR</a></td>
-   <td><code>a | b</code></td>
-   <td>
-    <p>Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram <code>1</code>s.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_XOR)">Bitwise XOR</a></td>
-   <td><code>a ^ b</code></td>
-   <td>Retorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram <code>1</code>s.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_NOT)">Bitwise NOT</a></td>
-   <td><code>~ a</code></td>
-   <td>Inverte os bits de seus operandos.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3C%3C_(Left_shift)">Left shift</a></td>
-   <td><code>a &lt;&lt; b</code></td>
-   <td>Jogam <code>a</code>  em representação binária <code>b</code> (&lt; 32) bits à esquerda, mudando de zeros à diretia.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E_(Sign-propagating_right_shift)">Sign-propagating right shift</a></td>
-   <td><code>a &gt;&gt; b</code></td>
-   <td>Jogam <code>a</code>  em representação binária <code>b</code> (&lt; 32) bits à direita, descartando bits que foram tornados off.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_(Zero-fill_right_shift)">Zero-fill right shift</a></td>
-   <td><code>a &gt;&gt;&gt; b</code>  </td>
-   <td>Jogam <code>a</code>  em representação binária <code>b</code> (&lt; 32) bits à direita, descartando bits que foram tornados off, e jogando <code>0</code>s para à esquerda.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Inteiros_assinados_em_32-bit">Inteiros assinados em 32-bit</h2>
-
-<p>Os operandos de todos os operadores bit-a-bit são assinados como inteiros de 32-bit em duas formas complementares. Duas formas complementares significa que uma negativa contrapartida (e.g. 5 vs. -5) são todos os bits daqueles números invertidos (bit-a-bit NOT de um número, a.k.a. complementos de um número) mais um. Por example, os seguintes encodes inteiros são 314:</p>
-
-<pre class="brush: js">00000000000000000000000100111010
-</pre>
-
-<p>Os seguintes encodes <code>~314</code>, i.e. são os únicos complementos de  <code>314</code>:</p>
-
-<pre class="brush: js">11111111111111111111111011000101
-</pre>
-
-<p>Finalmente, os seguintes encodes <code>-314,</code> i.e. são dois complementos de <code>314</code>:</p>
-
-<pre class="brush: js">11111111111111111111111011000110
-</pre>
-
-<p>As duas garantias complementares daquele bit mais à esquerda que é zero quando o número é positivo e 1 quando o número é negativo. Aliás, isto é chamado de <em>sign bit </em>ou <em>bit assinalado.</em></p>
-
-<p>O número 0 é o inteiro composto completamente de 0 bits.</p>
-
-<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2)
-</pre>
-
-<p>O número <code>-1</code> é o inteiro que é composto completamente de 1 bits.</p>
-
-<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2)
-</pre>
-
-<p>O número <code>-2147483648</code> (representação hexadecimal: <code>-0x80000000</code>) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.</p>
-
-<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-</pre>
-
-<p>O número <code>2147483647</code> (representação hexadecimal: <code>0x7fffffff</code>) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).</p>
-
-<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-</pre>
-
-<p>Os números <code>-2147483648</code> e <code>2147483647</code> são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.</p>
-
-<h2 id="Operadores_lógico_bit-abit">Operadores lógico bit-abit</h2>
-
-<p>Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:</p>
-
-<ul>
- <li>Os operandos são convertidos para inteiros de 32 bits e expressados em uma série de bits (zeros e ums). Números com mais de 32 bits têm seus bits mais significativos descartados. Por exemplo, o inteiro com mais de 32 bits a seguir será convertido para um inteiro de 32 bits:
-  <pre class="brush: js">Before: 11100110111110100000000000000110000000000001
-After:              10100000000000000110000000000001</pre>
- </li>
- <li>Cada bit no primeiro operando é pareado com o bit correspondente no segundo operando: primeiro bit para o primeiro bit, segundo bit para o segundo bit e assim por diante.</li>
- <li>O operador é aplicado para cada par de bits e o resultado é construído bit a bit.</li>
-</ul>
-
-<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">&amp; (Bitwise AND)</a></h3>
-
-<p>Performa a operação AND em cada par de bits. <code>a</code> AND <code>b</code> retorna 1, apenas quando <code>a</code> e <code>b</code> são <code>1</code>. A tabela verdade para a operação AND é:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">a</td>
-   <td class="header">b</td>
-   <td class="header">a AND b</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
- </tbody>
-</table>
-
-<pre class="brush: js">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-</pre>
-
-<p>Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> retornará <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>.</p>
-
-<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3>
-
-<p>Performa a operação OR em cada par de bits. <code>a</code> OR <code>b</code> retorna 1 se pelo menos <code>a</code> ou pelo menos <code>b</code> é <code>1</code>. As tabela versão para a operação <code>OR</code> é:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">a</td>
-   <td class="header">b</td>
-   <td class="header">a OR b</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
- </tbody>
-</table>
-
-<pre class="brush: js">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-</pre>
-
-<p>Performar a operação <code>OR</code> de qulalquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação <code>OR</code> de qualquer número <code>X</code> com <code>-1</code> retornará <code>-1</code>.</p>
-
-<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3>
-
-<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the <code>XOR</code> operation is:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">a</td>
-   <td class="header">b</td>
-   <td class="header">a XOR b</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>1</td>
-   <td>0</td>
-  </tr>
- </tbody>
-</table>
-
-<pre class="brush: js">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-</pre>
-
-<p>Bitwise XORing any number <code>x</code> with <code>0</code> yields x. Bitwise XORing any number <code>x</code> with <code>-1</code> yields <code>~x</code>.</p>
-
-<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3>
-
-<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the <code>NOT</code> operation is:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">a</td>
-   <td class="header">NOT a</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-  </tr>
- </tbody>
-</table>
-
-<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-</pre>
-
-<p>Bitwise NOTing any number <code>x</code> yields <code>-(x + 1)</code>. For example, <code>~-5</code> yields <code>4</code>.</p>
-
-<p>Note that due to using 32-bit representation for numbers both <code>~-1</code> and <code>~4294967295</code> (2<sup>32</sup>-1) results in <code>0</code>.</p>
-
-<h2 id="Operadores_de_deslocamento_bit_a_bit">Operadores de deslocamento bit a bit</h2>
-
-<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p>
-
-<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p>
-
-<h3 id="&lt;&lt;_(Left_shift)"><a name="Left_shift">&lt;&lt; (Left shift)</a></h3>
-
-<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p>
-
-<p>For example, <code>9 &lt;&lt; 2</code> yields 36:</p>
-
-<pre class="brush: js">.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 &lt;&lt; 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-</pre>
-
-<p>Bitwise shifting any number <code>x</code> to the left by <code>y</code> bits yields <code>x * 2 ** y</code>.</p>
-
-<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">&gt;&gt; (Sign-propagating right shift)</a></h3>
-
-<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p>
-
-<p>For example, <code>9 &gt;&gt; 2</code> yields 2:</p>
-
-<pre class="brush: js">.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-</pre>
-
-<p>Likewise, <code>-9 &gt;&gt; 2</code> yields <code>-3</code>, because the sign is preserved:</p>
-
-<pre class="brush: js">.    -9 (base 10): 11111111111111111111111111110111 (base 2)
-                   --------------------------------
--9 &gt;&gt; 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-</pre>
-
-<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">&gt;&gt;&gt; (Zero-fill right shift)</a></h3>
-
-<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p>
-
-<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 &gt;&gt;&gt; 2</code> yields 2, the same as <code>9 &gt;&gt; 2</code>:</p>
-
-<pre class="brush: js">.     9 (base 10): 00000000000000000000000000001001 (base 2)
-                   --------------------------------
-9 &gt;&gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-</pre>
-
-<p>However, this is not the case for negative numbers. For example, <code>-9 &gt;&gt;&gt; 2</code> yields 1073741821, which is different than <code>-9 &gt;&gt; 2</code> (which yields <code>-3</code>):</p>
-
-<pre class="brush: js">.     -9 (base 10): 11111111111111111111111111110111 (base 2)
-                    --------------------------------
--9 &gt;&gt;&gt; 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-</pre>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3>
-
-<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p>
-
-<p>Suppose there are 4 flags:</p>
-
-<ul>
- <li>flag A: we have an ant problem</li>
- <li>flag B: we own a bat</li>
- <li>flag C: we own a cat</li>
- <li>flag D: we own a duck</li>
-</ul>
-
-<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p>
-
-<pre class="brush: js">var flags = 5;   // binary 0101
-</pre>
-
-<p>This value indicates:</p>
-
-<ul>
- <li>flag A is true (we have an ant problem);</li>
- <li>flag B is false (we don't own a bat);</li>
- <li>flag C is true (we own a cat);</li>
- <li>flag D is false (we don't own a duck);</li>
-</ul>
-
-<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p>
-
-<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p>
-
-<pre class="brush: js">var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-</pre>
-
-<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p>
-
-<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
-</pre>
-
-<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p>
-
-<pre class="brush: js">// if we own a cat
-if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
-   // do stuff
-}
-</pre>
-
-<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p>
-
-<pre class="brush: js">// if we own a bat or we own a cat
-// (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
-if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) {
-   // do stuff
-}
-</pre>
-
-<pre class="brush: js">// if we own a bat or cat
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
-if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
-   // do stuff
-}
-</pre>
-
-<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p>
-
-<pre class="brush: js">// yes, we own a cat and a duck
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
-flags |= mask;   // 0101 | 1100 =&gt; 1101
-</pre>
-
-<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p>
-
-<pre class="brush: js">// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
-flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
-</pre>
-
-<p>The mask could also have been created with <code>~FLAG_A &amp; ~FLAG_C</code> (De Morgan's law):</p>
-
-<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat
-var mask = ~FLAG_A &amp; ~FLAG_C;
-flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
-</pre>
-
-<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p>
-
-<pre class="brush: js">// if we didn't have a bat, we have one now,
-// and if we did have one, bye-bye bat
-// same thing for cats
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
-</pre>
-
-<p>Finally, the flags can all be flipped with the NOT operator:</p>
-
-<pre class="brush: js">// entering parallel universe...
-flags = ~flags;    // ~1010 =&gt; 0101
-</pre>
-
-<h3 id="Conversion_snippets">Conversion snippets</h3>
-
-<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p>
-
-<pre class="brush: js">var sBinString = '1011';
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-</pre>
-
-<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p>
-
-<pre class="brush: js">var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-</pre>
-
-<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3>
-
-<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p>
-
-<pre class="brush: js">function createMask() {
-  var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
-  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-</pre>
-
-<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3>
-
-<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p>
-
-<pre class="brush: js">function arrayFromMask(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) {
-    throw new TypeError('arrayFromMask - out of range');
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert('[' + array1.join(', ') + ']');
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-</pre>
-
-<p>You can test both algorithms at the same time…</p>
-
-<pre class="brush: js">var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-</pre>
-
-<p>For the didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p>
-
-<pre class="brush: js">function createBinaryString(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag &lt; 32;
-       nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Initial definition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.7')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div class="hidden">
-<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
-</div>
-
-<p>{{Compat("javascript.operators.bitwise")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html b/files/pt-br/web/javascript/reference/operators/comma_operator/index.html
index be374104d0..be374104d0 100644
--- a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html
+++ b/files/pt-br/web/javascript/reference/operators/comma_operator/index.html
diff --git a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html
index 9b36afca80..9b36afca80 100644
--- a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html
+++ b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html
diff --git a/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html
index 6b1a100b4b..6b1a100b4b 100644
--- a/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html
+++ b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html
diff --git a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html b/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html
index 609bfa29fd..609bfa29fd 100644
--- a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html
+++ b/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html
diff --git a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html
index ac59b4e7f8..ac59b4e7f8 100644
--- a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html
+++ b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html
diff --git a/files/pt-br/web/javascript/reference/operators/operadores_de_comparação/index.html b/files/pt-br/web/javascript/reference/operators/operadores_de_comparação/index.html
deleted file mode 100644
index d5e946a438..0000000000
--- a/files/pt-br/web/javascript/reference/operators/operadores_de_comparação/index.html
+++ /dev/null
@@ -1,251 +0,0 @@
----
-title: Operadores de comparação
-slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação
-tags:
-  - Comparando String
-  - Comparação
-  - Igualdade
-  - Operadores
-  - Relacionais
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., <code>===</code>) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. <code>==</code>) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <code>&lt;=</code>), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.</p>
-
-<p>Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div>
-
-<p class="hidden">Os fontes para este exemplo interativo estão em um repositório no GitHub. Se você gostaria de contribuir com projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie para nós um pull request.</p>
-
-<p>Características de comparação:</p>
-
-<ul>
- <li>Duas strings são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, Duas string são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, e os mesmos caracteres em posições correspondentes.</li>
- <li>Dois números são estritamente iguais quando eles são numericamente iguais (tem o mesmo valor numérico). <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> não é igual a nada, incluindo NaN. Zeros positivos e negativos são iguals entre si.</li>
- <li>Dois operadores Boleanos são estritamente iguais se ambos são <code>true</code> ou ambos são <code>false</code>.</li>
- <li>Dois objetos distintos nunca são iguais para comparações estritas ou abstratas.</li>
- <li>Uma expressão comparando Objetos somente é verdadeira se os operandos referenciarem o mesmo Objeto.</li>
- <li>Os tipo Null e Undefined são estritamente iguais entre eles mesmos e abstratamente iguais entre si.</li>
-</ul>
-
-<h2 id="Operadores_de_Igualdade">Operadores de Igualdade </h2>
-
-<h3 id="Igualdade"><a name="Equality">Igualdade (==)</a></h3>
-
-<p>O operador de igualdade converte o operando se ele <strong>não for do mesmo tipo</strong>, então aplica a comparação estrita. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.</p>
-
-<h4 id="Sintaxe">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate">x == y
-</pre>
-
-<h4 id="Exemplos">Exemplos</h4>
-
-<pre class="brush: js notranslate">1    ==  1         // verdade
-'1'  ==  1         // verdade
-1    == '1'        // verdade
-0    == false      // verdade
-0    == null       // falso
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 == object2 // falso
-0    == undefined  // falso
-null == undefined  // verdade
-</pre>
-
-<h3 id="Desigualdade_!"><a name="Inequality">Desigualdade (!=)</a></h3>
-
-<p>O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos <strong>não são do mesmo tipo</strong>, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referências internas que não são iguais quando os operandos se referem a objetos diferentes na memória.</p>
-
-<h4 id="Sintaxe_2">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate">x != y</pre>
-
-<h4 id="Exemplos_2">Exemplos</h4>
-
-<pre class="brush: js notranslate">1 !=   2     // verdade
-1 !=  '1'    // falso
-1 !=  "1"    // falso
-1 !=  true   // falso
-0 !=  false  // falso
-</pre>
-
-<h3 id="Identidade_igualdade_estrita"><a name="Identity">Identidade / igualdade estrita (===)</a></h3>
-
-<p>O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) <strong>sem conversão de tipo</strong>. </p>
-
-<h4 id="Sintaxe_3">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate">x === y</pre>
-
-<h4 id="Exemplos_3">Exemplos</h4>
-
-<pre class="brush: js  notranslate">3 === 3   // verdade
-3 === '3' // falso
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 === object2 //f also</pre>
-
-<h3 id="Non-identity_desigualdade_estrita_!"><a name="Nonidentity">Non-identity / desigualdade estrita (!==)</a></h3>
-
-<p>O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos <strong>não são iguais e / ou não são do mesmo tipo</strong>.</p>
-
-<h4 id="Sintaxe_4">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate">x !== y</pre>
-
-<h4 id="Exemplos_4">Exemplos</h4>
-
-<pre class="brush: js notranslate">3 !== '3' // verdade
-4 !== 3   // verdade
-</pre>
-
-<h2 id="Operadores_relacionais">Operadores relacionais</h2>
-
-<p>Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.</p>
-
-<h3 id="Operador_Maior_>"><a name="Greater_than_operator">Operador Maior (&gt;)</a></h3>
-
-<p>O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.</p>
-
-<h4 id="Sintaxe_5">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate">x &gt; y</pre>
-
-<h4 id="Exemplos_5">Exemplos</h4>
-
-<pre class="brush: js notranslate">4 &gt; 3 // verdade
-</pre>
-
-<h3 id="Operador_maior_ou_igual_>"><a name="Greater_than_or_equal_operator">Operador maior ou igual (&gt;=)</a></h3>
-
-<p>O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.</p>
-
-<h4 id="Sintaxe_6">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate"> x &gt;= y</pre>
-
-<h4 id="Exemplos_6">Exemplos</h4>
-
-<pre class="brush: js notranslate">4 &gt;= 3 // verdade
-3 &gt;= 3 // verdade
-</pre>
-
-<h3 id="Operador_Menor_&lt;"><a name="Less_than_operator">Operador Menor (&lt;)</a></h3>
-
-<p>O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.</p>
-
-<h4 id="Sintaxe_7">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate"> x &lt; y</pre>
-
-<h4 id="Exemplos_7">Exemplos</h4>
-
-<pre class="brush: js notranslate">3 &lt; 4 // verdade
-</pre>
-
-<h3 id="Operador_menor_ou_igual_&lt;"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor ou igual (&lt;=)</a></h3>
-
-<p>O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.</p>
-
-<h4 id="Sintaxe_8">Sintaxe</h4>
-
-<pre class="syntaxbox notranslate"> x &lt;= y</pre>
-
-<h4 id="Exemplos_8">Exemplos</h4>
-
-<pre class="brush: js notranslate">3 &lt;= 4 // verdade
-</pre>
-
-<h2 id="Usando_Operadores_de_Igualdade">Usando Operadores de Igualdade</h2>
-
-<p>Os operadores de igualdade padrão (== e! =) Usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparação de Igualdade Abstrata</a> </p>
-
-<p>para comparar dois operandos. Se os operandos forem de tipos diferentes, ele tentará convertê-los para o mesmo tipo antes de fazer a comparação. Por exemplo, na expressão 5 == '5', a sequência à direita é convertida em {{jsxref ("Number" )}} antes da comparação ser feita.</p>
-
-<p>Os operadores de igualdade estrita (=== e! ==) usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de comparação estrita de igualdade</a> e se destinam a executar comparações de igualdade em operandos do mesmo tipo. Se os operandos são de tipos diferentes, o resultado é sempre falso, então 5! == '5'.<br>
- <br>
- Use operadores de igualdade estrita se os operandos precisarem ser de um tipo específico e também de valor ou se o tipo exato dos operandos for importante. Caso contrário, use os operadores de igualdade padrão, que permitem comparar a identidade de dois operandos, mesmo que não sejam do mesmo tipo.<br>
- <br>
- Quando a conversão de tipos está envolvida na comparação (por exemplo, comparação não estrita), o JavaScript converte os tipos {{jsxref ("String")}}, {{jsxref ("Number")}}, {{jsxref ("Booleano" )}} ou {{jsxref ("Object")}}) operandos da seguinte forma:</p>
-
-<ul>
- <li>Ao comparar um número e uma string, a string é convertida em um valor numérico. JavaScript tenta converter o literal numérico de string em um valor de tipo Number. Primeiro, um valor matemático é derivado do literal numérico da string. Em seguida, esse valor é arredondado para o valor de tipo de número mais próximo.</li>
- <li>Se um dos operandos for booleano, o operando booleano é convertido em 1 se for verdadeiro e +0 se for falso.</li>
- <li>Se um objeto é comparado com um número ou string, o JavaScript tenta retornar o valor padrão para o objeto. Os operadores tentam converter o objeto em um valor primitivo, um valor String ou Number, usando os métodos valueOf e toString dos objetos. Se essa tentativa de converter o objeto falhar, será gerado um erro de tempo de execução.</li>
- <li>Observe que um objeto é convertido em primitivo se, e somente se, seu comparando for um primitivo. Se os dois operandos forem objetos, eles serão comparados como objetos, e o teste de igualdade será verdadeiro apenas se ambos fizerem referência ao mesmo objeto.</li>
-</ul>
-
-<div class="note"><strong>Nota:</strong> Os objetos String são do Tipo Objeto, não String! Os objetos de string raramente são usados, portanto, os seguintes resultados podem ser surpreendentes:</div>
-
-<pre class="brush:js notranslate">// true, pois ambos os operandos são do tipo String (ou seja, primitivos de string):
-'foo' === 'foo'
-
-var a = new String('foo');
-var b = new String('foo');
-
-// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
-a == b
-
-// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
-a === b
-
-// verdadeiro (true) pois o objeto a e 'foo' (String) são de tipos diferentes e, o Objeto (a)
-// é convertido para String ('foo') antes da comparação
-a == 'foo'</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Definição Inicial. Implementado em JavaScript 1.0</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Adicionandos os operadores <code>===</code> e <code>!==</code> . Implementado em JavaScript 1.3</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatilidade_entre_navegadores">Compatilidade entre navegadores</h2>
-
-<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>
-
-<p>{{Compat("javascript.operators.comparison")}}</p>
-
-<h2 id="Consulte_também">Consulte também</h2>
-
-<ul>
- <li>{{jsxref("Object.is()")}}</li>
- <li>{{jsxref("Math.sign()")}}</li>
- <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparações de igualdade e similaridades</a></li>
-</ul>
-
-<div id="gtx-trans" style="position: absolute; left: 32px; top: 2185.4px;">
-<div class="gtx-trans-icon"></div>
-</div>
diff --git a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html b/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html
deleted file mode 100644
index e3a3ee6e8c..0000000000
--- a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html
+++ /dev/null
@@ -1,343 +0,0 @@
----
-title: Operadores Lógicos
-slug: Web/JavaScript/Reference/Operators/Operadores_Logicos
-tags:
-  - Operador
-  - Operadores lógicos
-  - Referencia
-  - e
-  - não
-  - ou
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<h2 id="Summary" name="Summary">Resumo</h2>
-
-<p>Operadores lógicos são tipicamente usados com valores <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booleanos</a></code> (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores <code>&amp;&amp;</code> e <code>||</code> de fato retornam o valor de um dos operandos especificos, então se esses operadores são usados com valores não booleanos, eles podem retornar um valor não booleano.</p>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Os operadores lógicos são descritos na tabela abaixo:</p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Operador</th>
-   <th>Utilização</th>
-   <th>Descrição</th>
-  </tr>
-  <tr>
-   <td>Logical AND (<code>&amp;&amp;</code>)</td>
-   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
-   <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>falso</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>&amp;&amp;</code> retorna <code>verdadeiro</code> se ambos os operandos forem <code>verdadeiro</code> ; senão, retorna <code>falso</code>.</td>
-  </tr>
-  <tr>
-   <td>Logical OR (<code>||</code>)</td>
-   <td><code><em>expr1</em> || <em>expr2</em></code></td>
-   <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>verdadeiro</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>||</code> retorna <code>verdadeiro</code> se qualquer dos operandos for <code>verdadeiro</code>; se ambos são <code>falso</code>, retorna <code>falso</code>.</td>
-  </tr>
-  <tr>
-   <td>Logical NOT (<code>!</code>)</td>
-   <td><code>!<em>expr</em></code></td>
-   <td>
-    <p>Retorna <code>falso</code>se o seu operando pode ser convertido para verdadeiro; senão, retorna <code>verdadeiro</code>.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Se um valor pode ser convertido para <code>verdadeiro</code>, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para <code>falso</code>, este valor é chamado de {{Glossary("falsy")}}.</p>
-
-<p>Exemplos de expressões que podem ser convertidas para falso são:</p>
-
-<ul>
- <li><code>null</code>;</li>
- <li><code>NaN;</code></li>
- <li><code>0</code>;</li>
- <li>string vazia (<code>""</code>); </li>
- <li><code>undefined</code>.</li>
-</ul>
-
-<p>Mesmo que os operadores <code>&amp;&amp;</code> and <code>||</code> possam ser utilizados com operandos que não são valores Booleanos, eles ainda podem ser considerados como operadores booleanos visto que seus valores de saída sempre podem ser convertidos em valores booleanos.</p>
-
-<h3 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Avaliação de Curto-Circuito (Short-Circuit) </h3>
-
-<p>Como as expressões lógicas são avaliadas da esquerda pra direita, elas são testadas para possível avaliação de "curto-circuito" ("short-circuit") utilizando as seguintes regras:</p>
-
-<ul>
- <li><code>falso &amp;&amp; (<em>qualquer coisa)</em></code><em>  </em>é avaliado como falso através de curto-circuito.</li>
- <li><code>true || (<em>qualquer coisa)</em></code><em> </em>é avaliado como verdadeiro através de curto-circuito.</li>
-</ul>
-
-<p>As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção <em>qualquer coisa</em> das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também  que a parte<em> qualquer coisa</em> das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos <span style="line-height: 1.5;">parênteses</span>).</p>
-
-<p>Por exemplo, as duas funções a seguir são equivalentes.</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">shortCircuitEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="comment token">// logical OR (||)</span>
-  <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-
-  <span class="comment token">// logical AND (&amp;&amp;)</span>
-  <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">&amp;&amp;</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">equivalentEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-
-  <span class="comment token">// logical OR (||)</span>
-  <span class="keyword token">var</span> orFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>orFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-
-
-  <span class="comment token">// logical AND (&amp;&amp;)</span>
-  <span class="keyword token">var</span> andFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">if</span> <span class="punctuation token">(</span>andFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-<span class="punctuation token">}</span></code></pre>
-
-<p>Contudo, as expressões a seguir não são equivalentes, devido <span style="line-height: 1.5;">a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedência do operador</a>, e reforçam a importância de que o operador do lado direito (right hand) seja uma única expressão (agrupada com o uso de parênteses, caso seja necessário)</span><span style="line-height: 1.5;">.</span></p>
-
-<pre class="brush: js"> false &amp;&amp; true || true       // retorna true
- false &amp;&amp; (true || true)     // retorna falso</pre>
-
-<h3 id="Logical_AND_.28.29" name="Logical_AND_.28&amp;&amp;.29"><a name="Logical_AND">AND Lógico (<code>&amp;&amp;</code>)</a></h3>
-
-<p>O código a seguir demonstra exemplos do operador <code>&amp;&amp;</code> (AND lógico). </p>
-
-<pre class="brush: js">a1 = true  &amp;&amp; true       // t &amp;&amp; t retorna true
-a2 = true  &amp;&amp; false      // t &amp;&amp; f retorna false
-a3 = false &amp;&amp; true       // f &amp;&amp; t retorna false
-a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f retorna false
-a5 = 'Cat' &amp;&amp; 'Dog'      // t &amp;&amp; t retorna "Dog"
-a6 = false &amp;&amp; 'Cat'      // f &amp;&amp; t retorna false
-a7 = 'Cat' &amp;&amp; false      // t &amp;&amp; f retorna false
-a8 = ''    &amp;&amp; false      // f &amp;&amp; f retorna ""
-a9 = false &amp;&amp; ''         // f &amp;&amp; t retorna false
-</pre>
-
-<h3 id="OR_Lógico_()"><a name="Logical_OR">OR Lógico (<code>||</code>)</a></h3>
-
-<p>O código a seguir demonstra exemplos do operador <code>||</code> (OR lógico).</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">o1 <span class="operator token">=</span> <span class="keyword token">true</span>  <span class="operator token">||</span> <span class="keyword token">true</span>       <span class="comment token">// t || t retorna true</span>
-o2 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="keyword token">true</span>       <span class="comment token">// f || t retorna true</span>
-o3 <span class="operator token">=</span> <span class="keyword token">true</span>  <span class="operator token">||</span> <span class="keyword token">false</span>      <span class="comment token">// t || f retorna true</span>
-o4 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="punctuation token">(</span><span class="number token">3</span> <span class="operator token">==</span> <span class="number token">4</span><span class="punctuation token">)</span>   <span class="comment token">// f || f retorna false</span>
-o5 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="string token">'Dog'</span>      <span class="comment token">// t || t retorna "Cat"</span>
-o6 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">'Cat'</span>      <span class="comment token">// f || t retorna "Cat"</span>
-o7 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="keyword token">false</span>      <span class="comment token">// t || f retorna "Cat"</span>
-o8 <span class="operator token">=</span> <span class="string token">''</span>    <span class="operator token">||</span> <span class="keyword token">false</span>      <span class="comment token">// f || f retorna false</span>
-o9 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">''</span>         <span class="comment token">// f || f retorna ""</span></code></pre>
-
-<h3 id="Logical_NOT_.28.21.29" name="Logical_NOT_.28.21.29"><a name="Logical_NOT">NOT Logico (<code>!</code>)</a></h3>
-
-<p>O código a seguir demonstra exemplos do operador <code>!</code> (NOT lógico) .</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">n1 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">true</span>               <span class="comment token">// !t returns false</span>
-n2 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">false</span>              <span class="comment token">// !f returns true</span>
-n3 <span class="operator token">=</span> <span class="operator token">!</span><span class="string token">'Cat'</span>              <span class="comment token">// !t returns false</span></code></pre>
-
-<h3 id="Regras_de_conversão">Regras de conversão</h3>
-
-<h4 id="Convertendo_AND_para_OR">Convertendo AND para OR</h4>
-
-<p>A operação a seguir, envolvendo Booleanos:</p>
-
-<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>
-
-<p>é sempre igual a:</p>
-
-<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>
-
-<h4 id="Convertendo_OR_to_AND">Convertendo OR to AND</h4>
-
-<p>A operação a seguir, envolvendo Booleanos:</p>
-
-<pre class="brush: js">bCondition1 || bCondition2</pre>
-
-<p>é sempre igual a:</p>
-
-<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
-
-<h4 id="Convertendo_entre_dois_NOT">Convertendo entre dois NOT</h4>
-
-<p>A seguinte operação envolvendo Booleanos:</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="operator token">!</span><span class="operator token">!</span>bCondition</code></pre>
-
-<p>é sempre igual a:</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">bCondition</code></pre>
-
-<h3 id="Removendo_parenteses_aninhados">Removendo parenteses aninhados</h3>
-
-<p>Como as expressões lógicas são avaliadas da esquerda pra direita, é sempre possível remover os parênteses de uma expressão complexa seguindo algumas regras:</p>
-
-<h4 id="Removendo_AND_aninhado">Removendo AND aninhado</h4>
-
-<p>A seguinte operação composta envolvendo Booleanos:</p>
-
-<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
-
-<p>é igual a :</p>
-
-<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
-
-<h4 id="Removendo_OR_aninhado">Removendo OR aninhado</h4>
-
-<p>A operação composta a seguir, envolvendo Booleanos:</p>
-
-<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
-
-<p>é sempre igual a:</p>
-
-<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Estatus</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>ECMAScript 1st Edition.</td>
-   <td>Standard</td>
-   <td>Initial definition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}<br>
-    {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}<br>
-    {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Recurso</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td><a href="#Logical_AND">Logical AND (<code>&amp;&amp;</code>)</a></td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome para Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td><a href="#Logical_AND">Logical AND (<code>&amp;&amp;</code>)</a></td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
-  <tr>
-   <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-   <td>{{ CompatVersionUnknown() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h3 id="JavaScript_1.0_and_1.1" name="JavaScript_1.0_and_1.1">Retrocompatibilidade: Comportamento no  JavaScript 1.0 e1.1</h3>
-
-<p>Os operadores  &amp;&amp; and <code>|| se comportam da seguinte maneira:</code></p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Operador</th>
-   <th>Utilização</th>
-   <th>Comportamento</th>
-  </tr>
-  <tr>
-   <td><code>&amp;&amp;</code></td>
-   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
-   <td>Se o primeiro operando (<code>expr1</code>) pode ser convertido para falso, o operador <code>&amp;&amp; </code> retorna false ao invés do valor do <code>expr1</code>.</td>
-  </tr>
-  <tr>
-   <td><code>||</code></td>
-   <td><code><em>expr1</em> || <em>expr2</em></code></td>
-   <td>If the first operand (<code>expr1</code>) can be converted to true, the <code>||</code> operator retorna true rather than the value of <code>expr1</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">Veja Também</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/operators/spread_operator/index.html b/files/pt-br/web/javascript/reference/operators/spread_operator/index.html
deleted file mode 100644
index a877d131bc..0000000000
--- a/files/pt-br/web/javascript/reference/operators/spread_operator/index.html
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: Spread operator
-slug: Web/JavaScript/Reference/Operators/Spread_operator
-tags:
-  - JavaScript
-  - Operador
-translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
-translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>A sintaxe de propagação (<strong>Spread</strong>) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<p>Para chamadas de função:</p>
-
-<pre class="brush: js">minhaFuncao(...objIteravel);
-</pre>
-
-<p>Para array literais:</p>
-
-<pre class="brush: js">[...objIteravel, 4, 5, 6]</pre>
-
-<p>Desestruturação:</p>
-
-<pre class="brush: js">[a, b, ...objIteravel] = [1, 2, 3, 4, 5];</pre>
-
-<h2 id="Exemplos">Exemplos</h2>
-
-<h3 id="Uma_melhor_aplicação">Uma melhor aplicação</h3>
-
-<p><strong>Exemplo:</strong> é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.</p>
-
-<pre class="brush: js">function minhaFuncao(x, y, z) { }
-var args = [0, 1, 2];
-minhaFuncao.apply(null, args);</pre>
-
-<p>Com o spread do ES2015 você pode agora escrever isso acima como:</p>
-
-<pre class="brush: js">function minhaFuncao(x, y, z) { }
-var args = [0, 1, 2];
-minhaFuncao(...args);</pre>
-
-<p>Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.</p>
-
-<pre class="brush: js">function minhaFuncao(v, w, x, y, z) { }
-var args = [0, 1];
-minhaFuncao(-1, ...args, 2, ...[3]);</pre>
-
-<h3 id="Um_literal_array_mais_poderoso">Um literal array mais poderoso</h3>
-
-<p><strong>Exemplo:</strong>  Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Com a sintaxe spread isso se torna muito mais sucinto:</p>
-
-<pre class="brush: js">var partes = ['ombros', 'joelhos'];
-var letra = ['cabeca', ...partes, 'e', 'dedos']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"</span></span>cabeca<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>ombros<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>joelhos<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"e"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"dedos"</span></span>]
-</pre>
-
-<p>Assim como em spread para listas de argumentos <code>...</code> pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.</p>
-
-<h3 id="Apply_para_new">Apply para new</h3>
-
-<p><strong>Exemplo:</strong> No ES5 não é possível usar <code>new</code> com <code>apply.</code> (Em ES5 termos, <code>apply</code> faz uma <code>[[Call]]</code> e nao um <code>[[Construct]].</code>) Em ES2015 a sintaxe spread naturalmente suporta isso:</p>
-
-<pre class="brush: js">var camposData = lerCamposData(bancoDeDados);
-var d = new Date(...camposData);</pre>
-
-<h3 id="Um_push_melhor">Um push melhor</h3>
-
-<p><strong>Exemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:</p>
-
-<pre class="brush: js">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Acrescenta todos itens do arr2 ao arr1
-Array.prototype.push.apply(arr1, arr2);</pre>
-
-<p>No ES2015 com spread isso se torna:</p>
-
-<pre class="brush: js">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1.push(...arr2);</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Inicializador do array</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Listas de argumento</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_com_browser">Compatibilidade com browser</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Operação spread em array literais</td>
-   <td>{{CompatChrome("46")}}</td>
-   <td>{{ CompatGeckoDesktop("16") }}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>7.1</td>
-  </tr>
-  <tr>
-   <td>Operação spread em chamadas de função</td>
-   <td>{{CompatChrome("46")}}</td>
-   <td>{{ CompatGeckoDesktop("27") }}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>7.1</td>
-  </tr>
-  <tr>
-   <td>Operação spread em desestruturação</td>
-   <td>{{CompatNo}}</td>
-   <td>{{ CompatGeckoDesktop("34") }}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Android Webview</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Operação spread em array literais</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome("46")}}</td>
-   <td>{{ CompatGeckoMobile("16") }}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>8</td>
-   <td>{{CompatChrome("46")}}</td>
-  </tr>
-  <tr>
-   <td>Operação spread em chamadas de função</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome("46")}}</td>
-   <td>{{ CompatGeckoMobile("27") }}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>8</td>
-   <td>{{CompatChrome("46")}}</td>
-  </tr>
-  <tr>
-   <td>Operação spread em desestruturação</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{ CompatGeckoDesktop("34") }}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parâmetros rest</a></li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html b/files/pt-br/web/javascript/reference/statements/async_function/index.html
index 808f0b0306..808f0b0306 100644
--- a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html
+++ b/files/pt-br/web/javascript/reference/statements/async_function/index.html
diff --git a/files/pt-br/web/javascript/reference/statements/default/index.html b/files/pt-br/web/javascript/reference/statements/default/index.html
deleted file mode 100644
index 8e0fb07927..0000000000
--- a/files/pt-br/web/javascript/reference/statements/default/index.html
+++ /dev/null
@@ -1,187 +0,0 @@
----
-title: default
-slug: Web/JavaScript/Reference/Statements/default
-tags:
-  - JavaScript
-  - Keyword
-  - Palavra-chave
-translation_of: Web/JavaScript/Reference/Statements/switch
-translation_of_original: Web/JavaScript/Reference/Statements/default
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>A <strong>palavra-chave default </strong>pode ser usada em duas situações no JavaScript: com uma declaração {{jsxref("Statements/switch", "switch")}}, ou com uma declaração {{jsxref("Statements/export", "export")}}.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<p>Com uma declaração {{jsxref("Statements/switch", "switch")}}:</p>
-
-<pre class="syntaxbox">switch (expressao) {
-  case value1:
-    //Declarações executadas quando o resultado da expressao for value1
-    [break;]
-  default:
-    //Declarações executadas quando nenhum dos valores for igual o da expressao
-    [break;]
-}</pre>
-
-<p>Com a declaração {{jsxref("Statements/export", "export")}}:</p>
-
-<pre class="syntaxbox">export default <em>nameN</em> </pre>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p>Para mais detalhes, veja as páginas:</p>
-
-<ul>
- <li>Declaração {{jsxref("Statements/switch", "switch")}}</li>
- <li>Declaração {{jsxref("Statements/export", "export")}}.</li>
-</ul>
-
-<h2 id="Exemplos">Exemplos</h2>
-
-<h3 id="Usando_default_em_declarações_switch">Usando <code>default</code> em declarações <code>switch</code></h3>
-
-<p>No exemplo a seguir, se a variável <code>expr</code> for "Laranjas" ou "Maças", o programa encontra os valores com o case "Laranjas" ou "Maças"  e executa a declaração correspondente. A palavra-chave <code>default</code> vai ajudar em qualquer outro caso e executará a declaração associada.</p>
-
-<pre class="brush: js">switch (expr) {
-  case 'Laranjas':
-    console.log('Laranjas custam R$0,59.');
-    break;
-  case 'Maças':
-    console.log('Maças custam R$0,32.');
-    break;
-  default:
-    console.log('Desculpe, nós não temos ' + expr + '.');
-}</pre>
-
-<h3 id="Usando_default_com_export">Usando <code>default</code> com <code>export</code></h3>
-
-<p>Se você quiser exportar apenas um valor ou precisa de um valor fallback para um módulo, uma exportação padrão (default export) pode ser usada:</p>
-
-<pre class="brush: js">// module "my-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-};
-export default cube;</pre>
-
-<p>Então, no outro script, isso pode ser passado direto para o import do default export:</p>
-
-<pre class="brush: js">// module "my-module.js"
-import myFunction from 'my-module';
-console.log(myFunction(3)); // 27
-</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Situação</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Switch default</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Export default</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Switch default</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Export default</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("Statements/export", "export")}}</li>
- <li>{{jsxref("Statements/switch", "switch")}}</li>
-</ul>
diff --git a/files/pt-br/web/javascript/reference/template_strings/index.html b/files/pt-br/web/javascript/reference/template_literals/index.html
index e2a11abfa4..e2a11abfa4 100644
--- a/files/pt-br/web/javascript/reference/template_strings/index.html
+++ b/files/pt-br/web/javascript/reference/template_literals/index.html
diff --git a/files/pt-br/web/mathml/exemplos/index.html b/files/pt-br/web/mathml/examples/index.html
index ac83b9e48a..ac83b9e48a 100644
--- a/files/pt-br/web/mathml/exemplos/index.html
+++ b/files/pt-br/web/mathml/examples/index.html
diff --git a/files/pt-br/web/html/formatos_midia_suportados/index.html b/files/pt-br/web/media/formats/index.html
index 49c0b02fc1..49c0b02fc1 100644
--- a/files/pt-br/web/html/formatos_midia_suportados/index.html
+++ b/files/pt-br/web/media/formats/index.html
diff --git a/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html b/files/pt-br/web/performance/critical_rendering_path/index.html
index 63746f132c..63746f132c 100644
--- a/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html
+++ b/files/pt-br/web/performance/critical_rendering_path/index.html
diff --git a/files/pt-br/web/progressive_web_apps/introdução/index.html b/files/pt-br/web/progressive_web_apps/introduction/index.html
index 483ea5cfc0..483ea5cfc0 100644
--- a/files/pt-br/web/progressive_web_apps/introdução/index.html
+++ b/files/pt-br/web/progressive_web_apps/introduction/index.html
diff --git a/files/pt-br/web/security/básico_de_segurança_da_informação/index.html b/files/pt-br/web/security/básico_de_segurança_da_informação/index.html
deleted file mode 100644
index 9508b0afdb..0000000000
--- a/files/pt-br/web/security/básico_de_segurança_da_informação/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Básico de Segurança da Informação
-slug: Web/Security/Básico_de_Segurança_da_Informação
-tags:
-  - Iniciante
-  - Segurança
-translation_of: Web/Security/Information_Security_Basics
----
-<p>Entender o básico de segurança da informação pode ajudar você a evitar que seu software ou website estejam inseguros e vulneráveis a fraquezas que podem ser exploradas para ganhos financeiros ou outros motivos maliciosos<span id="result_box" lang="pt"><span>. </span></span><span id="result_box" lang="pt"><span>Estes artigos podem ajudar você a aprender o que você precisa. Com essa informação, você estará ciente do papel e importância da segurança no ciclo de desenvolvimento de software, além da distribuição do seu conteúdo.</span></span></p>
-
-<p><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">Confidencialidade, Integridade e Disponibilidade</a></p>
-
-<dl>
- <dd>Descreve os objetivos de segurança primários, que são absolutamente fundamentais para o entendimento de segurança</dd>
- <dt><a href="/en-US/Learn/Vulnerabilities">Vulnerabilidades</a></dt>
- <dd>Define as principais categorias de vulnerabilidades e discute a presença de vulnerabilidades em todo software</dd>
- <dt><a href="/en-US/Learn/Threats">Ameaças</a></dt>
- <dd>Introduz brevemente os principais conceitos de ameaças</dd>
- <dt><a href="/en-US/Learn/Security_Controls">Controles de Segurança</a></dt>
- <dd>Define as principais categorias de controle de segurança e discute suas potenciais desvantagens</dd>
- <dt><a href="/en-US/Learn/TCP_IP_Security">Segurança TCP/IP</a></dt>
- <dd>Uma visão geral do modelo TCP/IP, com um foco em considerações de segurança para SSL</dd>
-</dl>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/en-US/docs/Mozilla/Security">Segurança no Browser</a></li>
- <li><a href="/en-US/docs/Web/Security">Segurança na Web</a></li>
- <li><a href="/en-US/docs/Web/Security/Securing_your_site">Protegendo seu site</a></li>
- <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Básico de Segurança no Firefox para Desenvolvedores</a></li>
-</ul>
diff --git a/files/pt-br/web/svg/intensivo_de_namespaces/index.html b/files/pt-br/web/svg/namespaces_crash_course/index.html
index 35f50be610..35f50be610 100644
--- a/files/pt-br/web/svg/intensivo_de_namespaces/index.html
+++ b/files/pt-br/web/svg/namespaces_crash_course/index.html
diff --git a/files/pt-br/web/tutoriais/index.html b/files/pt-br/web/tutorials/index.html
index 68be26f522..68be26f522 100644
--- a/files/pt-br/web/tutoriais/index.html
+++ b/files/pt-br/web/tutorials/index.html
diff --git a/files/pt-br/web/web_components/usando_custom_elements/index.html b/files/pt-br/web/web_components/using_custom_elements/index.html
index 55af21ca48..55af21ca48 100644
--- a/files/pt-br/web/web_components/usando_custom_elements/index.html
+++ b/files/pt-br/web/web_components/using_custom_elements/index.html
diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html
new file mode 100644
index 0000000000..132fba5881
--- /dev/null
+++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html
@@ -0,0 +1,100 @@
+---
+title: Exemplo Avançado
+slug: The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example
+---
+<h2 id="Advanced_Example" name="Advanced_Example">Exemplo Avançado</h2>
+
+<p>O exemplo avançado apresentará vários tipos de divs baseado em seu conteúdo. O exemplo permite tipificar o conteúdo muitas vezes, alternando entre tipos ascendente ou descendente. O JavaScript apenas carrega o arquivo .xsl a primeira vez, e prepara a variável <code>xslloaded</code> verdadeira (true) assim que o arquivo tiver terminado de carregar. Usando o método <code>getParameter</code> no obejto <code>XSLTProcessor</code>, o código pode decidir pelo tipo ascendente ou descendente. Se o parâmetro estiver vazio o padrão é ascendente (primeira vezes que o tipo aparece, como não há valor para isto no aarquivo XSLT). O valor do tipo é colocado usando <code>setParameter</code>.</p>
+
+<p>The XSLT file has a parameter called <code>myOrder</code> that JavaScript sets to change the sorting method. The <code>xsl:sort</code> element's order attribute can access the value of the parameter using <code>$myOrder</code>. However, the value needs to be an XPATH expression and not a string, so <code>{$myOrder}</code> is used. Using {} evaluates the content as an XPath expression.</p>
+
+<p>Once the transformation is complete, the result is appened to the document, as shown in this example.</p>
+
+<p><small><b>Figure 7 : Sorting based on div content<span class="comment">view example</span></b></small></p>
+
+<pre class="brush: js">// XHTML Fragment:
+
+&lt;div id="example"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+  &lt;div&gt;6&lt;/div&gt;
+  &lt;div&gt;7&lt;/div&gt;
+  &lt;div&gt;8&lt;/div&gt;
+  &lt;div&gt;9&lt;/div&gt;
+  &lt;div&gt;10&lt;/div&gt;
+&lt;/div&gt;
+
+// JavaScript
+
+var xslRef;
+var xslloaded = false;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlRef = document.implementation.createDocument("", "", null);
+
+function sort() {
+  if (!xslloaded){
+    p = new XMLHttpRequest();
+    p.open("GET", "example2.xsl", false);
+    p.send(null);
+
+    xslRef = p.responseXML;
+    xsltProcessor.importStylesheet(xslRef);
+    xslloaded = true;
+  }
+
+  // create a new XML document in memory
+  xmlRef = document.implementation.createDocument("", "", null);
+
+  // we want to move a part of the DOM from an HTML document to an XML document.
+  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // after cloning, we append
+  xmlRef.appendChild(clonedNode);
+
+  // set the sorting parameter in the XSL file
+  var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+  if (sortVal == "" || sortVal == "descending")
+    xsltProcessor.setParameter(null, "myOrder", "ascending");
+  else
+    xsltProcessor.setParameter(null, "myOrder", "descending");
+
+  // initiate the transformation
+  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
+  // clear the contents
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  // add the new content from the transformation
+  document.getElementById("example").appendChild(fragment)
+}
+
+// XSL Stylesheet:
+
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
+  &lt;xsl:output method="html" indent="yes" /&gt;
+
+  &lt;xsl:param name="myOrder" /&gt;
+
+  &lt;xsl:template match="/"&gt;
+
+    &lt;xsl:apply-templates select="/div//div"&gt;
+      &lt;xsl:sort select="." data-type="number" order="{$myOrder}" /&gt;
+    &lt;/xsl:apply-templates&gt;
+  &lt;/xsl:template&gt;
+
+  &lt;xsl:template match="div"&gt;
+    &lt;xsl:copy-of select="." /&gt;
+  &lt;/xsl:template&gt;
+&lt;/xsl:stylesheet&gt;
+</pre>
diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html
new file mode 100644
index 0000000000..7bcbbc6cd0
--- /dev/null
+++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html
@@ -0,0 +1,24 @@
+---
+title: The XSLT/JavaScript Interface in Gecko
+slug: The_XSLT_JavaScript_Interface_in_Gecko
+tags:
+  - DOM
+  - NeedsTranslation
+  - TopicStub
+  - XSLT
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko
+---
+<ol>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/Introduction" title="en/The_XSLT//JavaScript_Interface_in_Gecko/Introduction">Introduction</a></li>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/JavaScript//XSLT_Bindings" title="en/The_XSLT//JavaScript_Interface_in_Gecko/JavaScript//XSLT_Bindings">JavaScript/XSLT Bindings</a></li>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/Basic_Example" title="en/The_XSLT//JavaScript_Interface_in_Gecko/Basic_Example">Basic Example</a></li>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/Setting_Parameters" title="en/The_XSLT//JavaScript_Interface_in_Gecko/Setting_Parameters">Setting Parameters</a></li>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/Advanced_Example" title="en/The_XSLT//JavaScript_Interface_in_Gecko/Advanced_Example">Advanced Example</a></li>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/Interface_List" title="en/The_XSLT//JavaScript_Interface_in_Gecko/Interface_List">Interface List</a></li>
+  <li><a href="/en-US/docs/The_XSLT//JavaScript_Interface_in_Gecko/Resources" title="en/The_XSLT//JavaScript_Interface_in_Gecko/Resources">Resources</a></li>
+</ol>
+
+<h2 id="See_also">See also</h2>
+<ul>
+<li><a href="/en-US/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></li>
+</ul>