initial commit

1 files changed, 152 insertions, 0 deletions

diff --git a/files/pt-br/web/html/element/p/index.html b/files/pt-br/web/html/element/p/index.html
new file mode 100644
index 0000000000..df723b9d01
--- /dev/null
+++ b/files/pt-br/web/html/element/p/index.html
@@ -0,0 +1,152 @@
+---
+title: <p> O elemento Parágrafo
+slug: Web/HTML/Element/p
+translation_of: Web/HTML/Element/p
+---
+<p><span class="seoSummary">O <strong>elemento HTML</strong> <strong> <code>&lt;p&gt;</code></strong> representa um parágrafo. Em mídias visuais, parágrafos são representados como blocos indentados de texto com a primeira letra avançada e separados por linhas em branco. Já em HTML, parágrafos são usados para agrupar conteúdos relacionados de qualquer tipo, como imagens e campos de um formulário.<br>
+ <br>
+ Parágrafos são <a href="/pt-BR/docs/Web/HTML/Elementos_block-level">Elementos block-level</a>, e fecharão automaticamente caso outro <a href="/pt-BR/docs/Web/HTML/Elementos_block-level">Elemento block-level</a> inicie antes da tag de fechamento <code>&lt;/p&gt;</code>. Veja "Omissão de tag" abaixo.</span></p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo">Categorias de conteúdo</a></dfn><br>
+  <a href="/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conteúdo_de_fluxo">Conteúdos de fluxo</a>, conteúdos palpáveis.</li>
+ <li><dfn>Conteúdo permitido</dfn><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_fraseado">Conteúdo frasal</a>.</li>
+ <li><dfn>Omissão de tag</dfn> A tag de abertura é obrigatória. A tag de fechamento pode ser omitida caso o elemento {{HTMLElement("p")}} seja imediatamente sucedido pelos elementos {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, ou por outro elemento {{HTMLElement("p")}}, ou, caso não haja mais conteúdo no elemento pai e o elemento pai não for um elemento {{HTMLElement("a")}}.</li>
+ <li><dfn>Elementos pai permitidos</dfn> Qualquer elemento que aceite <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Categorias_de_conteudo#Conte%C3%BAdo_de_fluxo">conteúdo de fluxo</a>.</li>
+ <li><dfn>Interface DOM</dfn> {{domxref("HTMLParagraphElement")}}</li>
+</ul>
+
+<h2 id="Atributos" name="Atributos">Atributos</h2>
+
+<p>Este elemento inclui <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>
+
+<div class="note">
+<p><strong>Obs.:</strong> O atributo <code>align</code> nas tags <code>&lt;p&gt;</code> está obsoleto e não deve ser usado.</p>
+</div>
+
+<h2 id="Exemplo" name="Exemplo">Exemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.
+  Este é o primeiro parágrafo do texto. Este é o primeiro parágrafo do texto.&lt;/p&gt;
+
+&lt;p&gt;Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.
+   Este é o segundo parágrafo do texto. Este é o segundo parágrafo do texto.&lt;/p&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Exemplo')}}</p>
+
+<h2 id="Estilizando_Parágrafos" name="Estilizando_Parágrafos">Estilizando Parágrafos</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Parágrafos separados por linhas em branco são mais legíveis. Porém,
+também podemos distinguir parágrafos indentando suas primeiras linhas.
+Uma abordagem que ocupa menos espaço e é usada para economizar
+papel quando impresso.&lt;/p&gt;
+
+&lt;p&gt;Em textos que serão editados, como trabalhos escolares e rascunhos,
+usamos tanto as linhas em branco quanto a indentação para
+distinguirmos cada parágrafo. Já em publicações, usar ambas
+é considerado redundante e amadoresco.&lt;/p&gt;
+
+&lt;p&gt;Em textos arcaicos usava-se o caractere especial: ¶,
+o &lt;i&gt;<strong>caldeirão</strong>&lt;/i&gt;, para separar parágrafos. Atualmente, esta abordagem
+é considerada claustrofóbica e ilegível.&lt;/p&gt;
+
+&lt;p&gt;Será mesmo que é ilegível? Clique para visualizar:
+  &lt;button data-toggle-text="Que horrível! Mudar de volta!"&gt;Usar caldeirão nos parágrafos&lt;/button&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.caldeirao {
+   text-indent: 0;
+   display: inline;
+}
+p.caldeirao + p.caldeirao::before {
+  content: " ¶ ";
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) {
+  document.querySelectorAll('p').forEach(function (paragraph) {
+    paragraph.classList.toggle('caldeirao');
+  });
+  var newButtonText = event.target.dataset.toggleText;
+  var oldText = event.target.innerText;
+  event.target.innerText = newButtonText;
+  event.target.dataset.toggleText = oldText;
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Estilizando_Parágrafos')}}</p>
+
+<h2 id="Considerações_acerca_da_Acessibilidade" name="Considerações_acerca_da_Acessibilidade">Considerações acerca da Acessibilidade</h2>
+
+<p>Subdividir um conteúdo em parágrafos torna um texto mais acessível. Leitores de tela e outras tecnologias assistivas providenciam atalhos que permitem a navegação entre parágrafos. Possibilitando, então, uma leitura rápida do texto.<br>
+ <br>
+ Utilizar elementos <code>&lt;p&gt;</code> vazios para adicionar linhas em branco entre parágrafos é uma abordagem problemática para os que dependem das tecnologias leitoras de tela. O leitor anunciará a existência de um parágrafo, mas não lerá nenhum conteúdo, pois não há. Isso confunde e frustra os que dependem dos leitures de tela.</p>
+
+<p>Se desejas mais espaço, use {{glossary("CSS")}} propriedades como {{cssxref("margin")}} para recriar o efeito:</p>
+
+<pre class="brush: css">p {
+  margin-bottom: 2em; // aumenta o espaço em branco após um parágrafo
+}
+</pre>
+
+<h2 id="Especificações" name="Especificações">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('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma alteração desde a última w3c {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Atributo <code>align</code> está obsoleto</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores" name="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
+
+<div class="hidden">
+<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser 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 um <em>pull request</em>.</p>
+</div>
+
+<div></div>
+
+<div>{{Compat("html.elements.p")}}</div>
+
+<h2 id="Veja_também" name="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+</ul>