Czy ol / ul powinien znajdować się wewnątrz <p> czy na zewnątrz?

292

Który standard jest zgodny między tymi dwoma?

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

LUB

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

html

— dynamiczny
źródło

40

@oded: czy kontekst ma znaczenie?

— dynamiczny

422

Krótka odpowiedź jest taka, że olelementy nie są prawnie dozwolone w pelementach.

Aby zobaczyć dlaczego, przejdźmy do specyfikacji ! Jeśli potrafisz się oswoić ze specyfikacją HTML, odpowie na wiele twoich pytań i ciekawostek. Chcesz wiedzieć, czy ktoś olmoże mieszkać w domu p. Więc…

4.5.1 pElement :

Kategorie: Przepływ treści , Wyczuwalne treści .
Model treści: treść frazowania .

4.5.5 olElement :

Kategorie: Przepływ treści .
Model zawartości : zero lub więcej elementów li i obsługujących skrypty .

Pierwsza część mówi, że pelementy mogą zawierać tylko treść frazowania (które są elementami „wbudowanymi”, takimi jak spani strong).

Druga część mówi, że ols to treść przepływu (elementy „blokowe”, takie jak pi div). Więc nie można ich używać wewnątrz p.

oli inne flow contentmogą być użyte w niektórych innych elementach, takich jak div:

4.5.13 divElement :

Kategorie: Przepływ treści , Wyczuwalne treści .
Model treści: treść przepływu .

— s4y
źródło

9

@link: Tak, w3.org jest trochę techniczny. Mimo to nie ma wątpliwości, co jest poprawne, kiedy je zrozumiałeś.

— nyson

5

Myślę, że @Sid wyjaśniający specyfikację i niektóre jej warunki są zdecydowanie pomocne. Gdyby poszedł nieco dalej, byłaby to świetna odpowiedź. Mógłby również wyraźnie odpowiedzieć na pytanie :). Dodałem do tego edycję.

— studgeek

1

okropnie czytać? nie myśl tak, idź do 4.4.1 The p element, autor nawet o tym mówi fantastic sentenceslub coś w tym stylu

— Jaime Hablutzel

1

@dynamic Zawsze idę do dokumentacji HTML MDN, aby łatwiej czytać dokumentację.

— Bonk

1

@AaronLS Niby! Gdy przeglądarka zwraca HTML (np. W narzędziach programistycznych lub z .innerHTML), jest on ponownie generowany z drzewa elementów. Chrome nie dostosowuje HTML tak bardzo, jak tworzenie prawidłowego drzewa z oryginalnego HTML, a następnie generowanie nowego HTML z tego drzewa.

— s4y

40

Drugi. Pierwszy jest nieprawidłowy.

Akapit nie może zawierać listy.
Lista nie może zawierać akapitu, chyba że akapit ten jest zawarty w całości w jednym elemencie listy.

Przeglądarka będzie to obsługiwać w następujący sposób:

<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
źródło

13

PRZEJDŹ tutaj http://validator.w3.org/ prześlij plik HTML, a dowiesz się, co jest ważne, a co nie.

— ukryty
źródło

7

właściwie powinieneś umieszczać tylko elementy wewnątrz p, więc w twoim przypadku ollepiej jest na zewnątrz

— Kris Iwanow
źródło

2

To ta sama odpowiedź, co odpowiedź Davida Dorwarda, której nie lubiłeś.

— ceejayoz,

5

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

Ponieważ oba <p>i <ol>są elementem wyświetlany jako blok.

— David
źródło