From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/html/element/p/index.html | 152 ++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/pt-br/web/html/element/p/index.html (limited to 'files/pt-br/web/html/element/p') 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:

O elemento Parágrafo +slug: Web/HTML/Element/p +translation_of: Web/HTML/Element/p +--- +

O elemento HTML <p> 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.
+
+ Parágrafos são Elementos block-level, e fecharão automaticamente caso outro Elemento block-level inicie antes da tag de fechamento </p>. Veja "Omissão de tag" abaixo.

+ + + +

Atributos

+ +

Este elemento inclui atributos globais.

+ +
+

Obs.: O atributo align nas tags <p> está obsoleto e não deve ser usado.

+
+ +

Exemplo

+ +

HTML

+ +
<p>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.</p>
+
+<p>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.</p>
+ +

Resultado

+ +

{{EmbedLiveSample('Exemplo')}}

+ +

Estilizando Parágrafos

+ +

HTML

+ +
<p>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.</p>
+
+<p>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.</p>
+
+<p>Em textos arcaicos usava-se o caractere especial: ¶,
+o <i>caldeirão</i>, para separar parágrafos. Atualmente, esta abordagem
+é considerada claustrofóbica e ilegível.</p>
+
+<p>Será mesmo que é ilegível? Clique para visualizar:
+  <button data-toggle-text="Que horrível! Mudar de volta!">Usar caldeirão nos parágrafos</button>
+</p>
+
+ +

CSS

+ +
p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.caldeirao {
+   text-indent: 0;
+   display: inline;
+}
+p.caldeirao + p.caldeirao::before {
+  content: " ¶ ";
+}
+ +

JavaScript

+ +
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;
+});
+ +

Result

+ +

{{EmbedLiveSample('Estilizando_Parágrafos')}}

+ +

Considerações acerca da Acessibilidade

+ +

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.
+
+ Utilizar elementos <p> 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.

+ +

Se desejas mais espaço, use {{glossary("CSS")}} propriedades como {{cssxref("margin")}} para recriar o efeito:

+ +
p {
+  margin-bottom: 2em; // aumenta o espaço em branco após um parágrafo
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}{{Spec2('HTML WHATWG')}}Nenhuma alteração desde a última w3c {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}{{Spec2('HTML5 W3C')}}Atributo align está obsoleto
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}{{Spec2('HTML4.01')}}Definição inicial
+ +

Compatibilidade dos navegadores

+ + + +
+ +
{{Compat("html.elements.p")}}
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf