O ol / ul deve estar dentro ou fora de <p>?

292

Qual é a conformidade padrão entre esses dois?

<p>Text text text ...
    <ol>
        <li>First element</li>
    </ol>
</p>
<p>
    Other text text ...
</p>

OU

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>
html dinâmico
fonte
40
@oded: o contexto importa?
dinâmica

Respostas:

422

A resposta curta é que olelementos não são legalmente permitidos dentro de pelementos.

Para ver o porquê, vamos às especificações ! Se você se sentir confortável com a especificação HTML, ela responderá a muitas de suas perguntas e curiosidades. Você quer saber se um olpode viver dentro de um p. Assim…

4.5.1 O pelemento :

Categorias: Conteúdo de fluxo , Conteúdo palpável .
Modelo de conteúdo: conteúdo de frases .

4.5.5 O olelemento :

Categorias: conteúdo do fluxo .
Modelo de conteúdo : zero ou mais elementos de suporte de script e li .

A primeira parte diz que os pelementos podem conter apenas conteúdo de frases (que são elementos "inline", como spane strong).

A segunda parte diz que ols são conteúdo de fluxo (elementos de "bloco" como pe div). Então eles não podem ser usados ​​dentro de p.

olse outros flow contentpodem ser usados ​​em alguns outros elementos, como div:

4.5.13 O divelemento :

Categorias: Conteúdo de fluxo , Conteúdo palpável .
Modelo de conteúdo: conteúdo de fluxo .

s4y
fonte
9
@link: Sim, o w3.org é um pouco técnico. Ainda assim, não há dúvida sobre o que é correto quando e se você os entendeu.
Nyson 12/03/2013
5
Acho que o @Sid explicar as especificações e alguns de seus termos é definitivamente útil. Se ele fosse um pouco mais longe, seria uma ótima resposta. Ele também poderia responder explicitamente à pergunta :). Eu adicionei uma edição para isso.
studgeek
1
horrível de ler? não penso assim, ir para 4.4.1 The p element, o autor sequer falar fantastic sentencesou algo parecido
Jaime Hablutzel
1
@dynamic Sempre vou à referência HTML da MDN para facilitar a leitura da documentação.
Bonk
1
@AaronLS Kind of! Quando um navegador devolve o HTML (por exemplo, nas ferramentas do desenvolvedor ou a partir de .innerHTML), ele é gerado novamente a partir da árvore de elementos. Portanto, o Chrome não está ajustando o HTML, mas criando uma árvore válida a partir do HTML original e gerando um novo HTML a partir dessa árvore.
S4y 6/09/19
40

O segundo. O primeiro é inválido.

  • Um parágrafo não pode conter uma lista.
  • Uma lista não pode conter um parágrafo, a menos que esse parágrafo esteja totalmente contido em um único item da lista.

Um navegador irá lidar com isso da seguinte maneira:

<p>tetxtextextete 
<!-- Start of paragraph -->
<ol>
<!-- Start of ordered list. Paragraphs cannot contain lists. Insert </p> -->
<li>first element</li></ol>
<!-- A list item element. End of list -->
</p>
<!-- End of paragraph, but not inside paragraph, discard this tag to recover from the error -->
<p>other textetxet</p>
<!-- Another paragraph -->
Quentin
fonte
7

na verdade, você só deve colocar elementos in-line dentro do p, para que no seu caso olseja melhor fora

Kris Ivanov
fonte
2
Esta é a mesma resposta que a resposta de @David Dorward, da qual você não gostou.
precisa
5 
<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Porque ambos <p>e <ol>são elemento renderizado como bloco.

David
fonte