Ol / ul dovrebbe essere dentro <p> o fuori?

292

Qual è la norma standard tra questi due?

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

O

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

html

— dinamico
fonte

40

@oded: il contesto è importante?

— dinamico

422

La risposta breve è che gli olelementi non sono legalmente ammessi all'interno degli pelementi.

Per capire perché, andiamo alle specifiche ! Se riesci a familiarizzare con le specifiche HTML, risponderà a molte delle tue domande e curiosità. Volete sapere se si olpuò vivere dentro a p. Così…

4.5.1 L' pelemento :

Categorie: contenuto Flow , contenuto Palpable .
Modello di contenuto: contenuto della frase .

4.5.5 L' olelemento :

Categorie: contenuto di flusso .
Modello di contenuto : zero o più elementi li e script supportanti .

La prima parte afferma che gli pelementi possono contenere solo contenuti di fraseggio (che sono elementi "inline" come spane strong).

La seconda parte dice che ols sono contenuti di flusso (elementi di "blocco" come pe div). Quindi non possono essere utilizzati all'interno di a p.

olse altri flow contentpossono essere utilizzati in alcuni altri elementi come div:

4.5.13 L' divelemento :

Categorie: contenuto Flow , contenuto Palpable .
Modello di contenuto: contenuto di flusso .

— s4y
fonte

9

@link: Sì, w3.org è un po 'tecnico. Tuttavia, non c'è dubbio su cosa sia corretto quando e se li hai capiti.

— Nyson,

5

Penso che @Sid spiegando le specifiche e alcuni dei suoi termini sia sicuramente utile. Se andasse un po 'oltre sarebbe un'ottima risposta. Poteva anche rispondere esplicitamente alla domanda :). Ho aggiunto una modifica per questo.

— Studgeek,

1

terribile da leggere? non la penso così, vai a 4.4.1 The p element, l'autore ne parla addirittura fantastic sentenceso qualcosa del genere

— Jaime Hablutzel,

1

@dynamic Vado sempre al riferimento HTML di MDN per una documentazione più semplice da leggere.

— Bonk,

1

@AaronLS Kind of! Quando un browser ti restituisce HTML (ad esempio negli strumenti di sviluppo o da .innerHTML), viene rigenerato dall'albero degli elementi. Quindi, Chrome non sta regolando l'HTML tanto quanto la creazione di un albero valido dall'HTML originale, quindi la generazione di nuovo HTML da quell'albero.

— s4y,

40

Il secondo. Il primo non è valido.

Un paragrafo non può contenere un elenco.
Un elenco non può contenere un paragrafo a meno che quel paragrafo non sia contenuto interamente in un singolo elemento dell'elenco.

Un browser lo gestirà in questo modo:

<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

VAI qui http://validator.w3.org/ carica il tuo file html e ti dirà cosa è valido e cosa no.

— nascosto
fonte

7

in realtà dovresti solo inserire elementi in-line all'interno di p, quindi nel tuo caso olè meglio fuori

— Kris Ivanov
fonte

2

Questa è la stessa risposta della risposta di @David Dorward, che non ti è piaciuta.

— Ceejayoz,

5

<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Perché entrambi <p>e <ol>sono elementi resi come blocco.

— David
fonte