Sollte ol / ul drinnen oder draußen sein?

292

Welches ist standardkonform zwischen diesen beiden?

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

ODER

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>
html dynamisch
quelle
40
@oded: Ist der Kontext wichtig?
dynamische

Antworten:

422

Die kurze Antwort lautet, dass olElemente innerhalb von pElementen gesetzlich nicht zulässig sind .

Um zu sehen warum, gehen wir zur Spezifikation ! Wenn Sie sich mit der HTML-Spezifikation vertraut machen können, werden viele Ihrer Fragen und Neugierde beantwortet. Sie möchten wissen, ob ein olin einem leben kann p. So…

4.5.1 Das pElement :

Kategorien: Flow-Inhalt , Tastbarer Inhalt .
Inhaltsmodell: Formulierung von Inhalten .

4.5.5 Das olElement :

Kategorien: Flow-Inhalt .
Inhaltsmodell : Null oder mehr li und skriptunterstützende Elemente.

Der erste Teil besagt, dass pElemente nur Phraseninhalte enthalten können (die "Inline" -Elemente wie spanund sind strong).

Der zweite Teil , sagt ols sind Strömungs Inhalt ( „block“ Elemente wie pund div). Sie können also nicht in einem verwendet werden p.

ols und andere flow contentkönnen in einigen anderen Elementen verwendet werden, wie zum Beispiel div:

4.5.13 Das divElement :

Kategorien: Flow-Inhalt , Tastbarer Inhalt .
Inhaltsmodell: Flussinhalt .

s4y
quelle
9
@link: Ja, w3.org ist ein bisschen technisch. Es besteht jedoch kein Zweifel darüber, was wann richtig ist und ob Sie es verstanden haben.
Nyson
5
Ich denke, @Sid, das die Spezifikation und einige ihrer Begriffe erklärt, ist definitiv hilfreich. Wenn er noch ein bisschen weiter gehen würde, wäre das eine großartige Antwort. Er könnte die Frage auch explizit beantworten :). Ich habe dafür eine Bearbeitung hinzugefügt.
Studgeek
1
schrecklich zu lesen? glaube nicht, geh zu 4.4.1 The p element, der Autor spricht sogar darüber fantastic sentencesoder so etwas
Jaime Hablutzel
1
@dynamic Ich gehe immer zur HTML-Referenz von MDN , um die Dokumentation leichter lesen zu können.
Bonk
1
@ AaronLS Art von! Wenn ein Browser HTML zurückgibt (z. B. in den Entwicklertools oder von .innerHTML), wird es aus dem Elementbaum neu generiert. Chrome passt den HTML-Code also nicht so sehr an, sondern erstellt einen gültigen Baum aus dem ursprünglichen HTML-Code und generiert dann neuen HTML-Code aus diesem Baum.
s4y
40

Der Zweite. Der erste ist ungültig.

  • Ein Absatz darf keine Liste enthalten.
  • Eine Liste kann keinen Absatz enthalten, es sei denn, dieser Absatz ist vollständig in einem einzelnen Listenelement enthalten.

Ein Browser wird damit wie folgt umgehen:

<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
quelle
7

Eigentlich solltest du nur Inline-Elemente in das setzen p, also ist es in deinem Fall olbesser draußen

Kris Ivanov
quelle
2
Dies ist die gleiche Antwort wie die Antwort von @David Dorward, die Ihnen nicht gefallen hat.
Ceejayoz
5 
<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Weil beide <p>und <ol>Elemente als Block gerendert werden.

David
quelle