11

Já passei por alguns problemas e ainda pude contemplar nessa resposta que a tag <p> não aceita qualquer elemento como filho.

Me parece que existem exceção de umas tags, ou seja, elas podem ser adicionadas dentro de um <p>, como por exemplo <br>, <a>.

Mas sempre fico na dúvida quando quero usar essa tag <p> sobre o que posso ou não colocar dentro dela.

Sendo assim, eu queria saber:

  • Qual é o sentido de haver essa restrição da tag <p> não aceitar certos elementos?
  • Quais são os elementos permitidos dentro de uma tag <p>?

Observação: A resposta da pergunta linkada cita que a tag <p> não aceita certos elementos, mas não explica por que e nem porque alguns são aceitos.

3 Respostas 3

14

O elemento <p> é categorizado como elemento de fluxo e elemento palpável, podendo, portanto, ser utilizado em qualquer lugar que é esperado um elemento de fluxo. Permite como elementos filhos qualquer elemento que seja um elemento de frase.

As definições de cada um, além dos links citados, encontra-se na W3C, 3.2 Elements, 3.2.5 Content models, 3.2.5.1 Kinds of contents:

A relação entre os grupos é:

Fonte e versão da imagem iterativa: https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#kinds-of-content

De forma simplificada, os elementos de frase são os elementos que definem o conteúdo da aplicação ou suas formatações - vale ressaltar a palavra formatação aqui, pois formatação não é estilização (CSS aplica estilos).

No momento, os elementos de frase são (links para a documentação você encontra aqui):

a, abbr, area (se for descendente de um <map>), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link (se for permitido no corpo), map, mark, MathML math, meta (se possuir o atributo itemprop), meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, autonomous custom elements e text.

Se outros elementos forem adicionados como filhos do <p>, é possível que o elemento seja fechado antes do esperado quando o cliente processar a estrutura do HTML, tal como o Rafael comentou em sua resposta.

A especificação cita explicitamente, inclusive, o exemplo de definir listas dentro de um parágrafo, onde não é possível utilizar os elementos <ol> e <ul> dentro de <p>.

p > ul {
  color: red;
}
<p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</p>

O HTML interpretado será:

<p></p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p></p>

Tanto que o CSS, que define a fonte vermelha para um elemento ul dentro de um p não funcionou. Neste caso, o ideal é, assim como foi interpretado, gerar dois parágrafos distintos, um antes e outro depois da lista ou definir o conteúdo dentro de outro elemento, assim como a div.

<div>For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
and is further discussed below.</div>

Que será interpretado exatamente da maneira que está.

10

A tag <p> define um parágrafo.

É permitido dentro da tag <p> qualquer conteúdo de texto simples e marcações, como:
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr>

Caso você insira dentro da tag <p> algum elemento como: <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul>

O parágrafo será automaticamente fechado. Vejamos no exemplo:

<p> teste <div> div </div> </p>

Analisando o código fonte, a tag <p> será fechada automaticamente.

<p> teste </p>
 <div> div </div>
<p></p>

Fontes: O elemento Parágrafo, Conteúdo com texto permitido, W3C.

0
-1

É por questão de semântica web.

O "p" vem de parágrafo, por isso, espera-se que o conteúdo dessa tag tenha texto corrido e, talvez, no máximo, tags de formatação de texto, embora isto possa ser feito mais adequadamente com CSS.

1
  • 13
    "espera-se que o conteúdo dessa tag tenha texto corrido" Quem espera isso? E o que tem a ver CSS com os elementos da pergunta?
    – Largato
    Commented 10/07/2018 às 17:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .