Por que a tag <p> não pode conter uma tag <div>?

169

Tanto quanto eu sei, isso está certo:

<div>
  <p>some words</p>
</div>

Mas isso está errado:

<p>
  <div>some words</div>
</p>

O primeiro pode passar no validador W3C (XHTML 1.0), mas o segundo não. Eu sei que ninguém escreverá código como o segundo. Eu só quero saber o porquê.

E o relacionamento de contenção de outras tags?

html xhtml

— Henry H Miao
fonte

9

Como <p>é um elemento no nível do bloco e é (supostamente) usado para exibir texto, ele não permitirá outros elementos no nível do bloco, mas apenas elementos inline como <span>e <strong>.

— Bojangles

22

JamWaffles: Esse pé um elemento no nível do bloco não tem nada a ver com isso. divtambém é um e permite outros blocos.

— Joey

possível duplicação de: stackoverflow.com/questions/4967976/… (sem bandeira): qualquer resposta decente que responderá como ler a especificação HTML e, portanto, também responderá a isso.

— Ciro Santilli escreveu

Declarar o estilo da div como embutido também não funciona.

— Triynko

198

Um local autorizado para procurar relações de contenção permitidas é a especificação HTML. Veja, por exemplo, http://www.w3.org/TR/html4/sgml/dtd.html . Ele especifica quais elementos são elementos de bloco e quais estão em linha. Para essas listas, procure a seção marcada "modelos de conteúdo HTML".

Para o elemento P, ele especifica o seguinte, que indica que os elementos P só podem conter elementos embutidos.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Isso é consistente com http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , que diz que o elemento P "não pode conter elementos em nível de bloco (incluindo o próprio P)".

— Colin Campbell
fonte

74

Eu tenho o hábito de evitar as especificações, os documentos mais autorizados que temos para coisas assim, porque eles não são divertidos de ler. +1 para realmente lê-los, entendê-los e usá-los para responder a perguntas.

— Stoutie

3

Isso ainda é válido para o HTML 5? A especificação vinculada faz referência especificamente ao HTML 4 e o HTML 5 não possui uma definição de tipo de documento .

— Ajedi32

2

@ Ajedi32 Sim, aqui . O HTML5 renomeou várias terminologias, mas "Conteúdo permitido: conteúdo de frases" significa o mesmo que o %inlinebit acima. Veja também a resposta de Oriol.

— Lister

@Stoutie Bem com você, é por isso que o Stack Overflow existe.

— Captain Hypertext

69

Em resumo, é impossível colocar um <div>elemento dentro de um <p>no DOM porque a <div>tag de abertura fechará o <p>elemento automaticamente .

— defau1t
fonte

2

Ah, isso explica por que existe um espaço enorme antes de uma div dentro de um ap, porque ep realmente termina logo antes da div.

— AaronLS

2

Você pode colocar um divelemento dentro de um p no DOM , por exemplo myP.appendChild(myDiv). Mas um analisador de HTML não fará isso.

— Oriol

1

Não faça isso. Você não tem idéia de como isso responderá em navegadores futuros. A tecnologia está mudando constantemente. Pode haver um analisador de html dinâmico que o tornará inválido um dia. O objetivo no web dev é criar coisas que possam ser desejáveis e compatíveis. Se você pode ignorar o que o navegador permite, é seguro dizer que você não pode garantir que ele funcione para sempre. Basta usar um span pessoal ... Se você precisar de uma div, pare de usar a tag p.

39

De acordo com o HTML5, o modelo de conteúdo dos divelementos é o conteúdo do fluxo

A maioria dos elementos usados no corpo dos documentos e aplicativos é categorizada como conteúdo de fluxo.

Isso inclui pelementos, que podem ser usados apenas onde o conteúdo do fluxo é esperado.

Portanto, divelementos podem conter pelementos.

No entanto, o modelo de conteúdo dos pelementos é o conteúdo de frases

O conteúdo do fraseado é o texto do documento, bem como os elementos que marcam esse texto no nível intra-parágrafo. Executa de fraseado de conteúdo do formulário parágrafos .

Isso não inclui divelementos, que podem ser usados apenas onde o conteúdo do fluxo é esperado.

Portanto, os pelementos não podem conter divelementos.

Como a tag final dos pelementos pode ser omitida quando o pelemento é imediatamente seguido por um divelemento (entre outros), o seguinte

<p>
  <div>some words</div>
</p>

é analisado como

<p></p>
<div>some words</div>
</p>

e o último </p>é um erro.

— Oriol
fonte

Mas se em CSS, se eu definir div para estar em linha, por que não está respeitando isso?

— Sanjay

Como os valores CSS são aplicados após a análise de dom ... mesmo que façamos div as inline in CSSseu uso, como nova estrutura analisada, <p>Text</p> <div>some words</div> <p></p> meu entendimento está correto?

— Sanjay

@Sanjay Sim, parece que você está certo. Além disso, durante minhas observações, se você colocar <span> dentro de <p> e definir a exibição do span como "block", ele será renderizado como um elemento de bloco típico sem esse efeito.

— Andrii Naumovych

-1

Após o X HTML, as convenções foram alteradas e agora são uma mistura de convenções de XML e HTML; é por isso que a segunda abordagem está errada e o validador W3C aceita as coisas corretas, de acordo com os padrões e convenções.

— geekdev786
fonte

XHTML não mudou muito. O elemento p nunca teve permissão para conter um elemento div.

— Quentin

-7

Porque a divtag tem precedência mais alta que a ptag. A pmarca representa uma marca de parágrafo, enquanto a divmarca representa uma marca de documento.

Você pode escrever muitos parágrafos em uma tag de documento, mas não pode escrever um documento em um parágrafo. O mesmo que um arquivo DOC.

— Gaurav Agrawal
fonte

2

Na verdade, é divisão. Caso contrário, seria <doc>: D

— Kyle

6

Precedência não é um conceito que se aplica a elementos HTML, e div representa uma divisão, como @KyleSevenoaks diz :)

— SimplGy

O que é um arquivo DOC? Um arquivo do Microsoft Word ?

— Peter Mortensen