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

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

13

Vá aqui http://validator.w3.org/ envie seu arquivo html e ele informará o que é válido e o que não é.

— escondido
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