Dlaczego tag <p> nie może zawierać w sobie tagu <div>?

169

O ile wiem, to prawda:

<div>
  <p>some words</p>
</div>

Ale to jest złe:

<p>
  <div>some words</div>
</p>

Pierwsza z nich może przejść przez walidator W3C (XHTML 1.0), ale druga nie. Wiem, że nikt nie napisze takiego kodu jak ten drugi. Chcę tylko wiedzieć, dlaczego.

A co z relacjami zawierania innych tagów?

html xhtml Henry H Miao
źródło
9
Ponieważ <p>jest to element blokowy i jest (powinien być) używany do wyświetlania tekstu, nie zezwala na umieszczanie w nim innych elementów blokowych, ale tylko elementy wbudowane, takie jak <span>i <strong>.
Bojangles
22
JamWaffles: To pjest element blokowy, który nie ma z tym nic wspólnego. divjest również jednym i pozwala na inne bloki.
Joey,
możliwy duplikat: stackoverflow.com/questions/4967976/… (nieoflagowane): każda przyzwoita odpowiedź na to odpowie, jak czytać specyfikację HTML, a tym samym również na to.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Zadeklarowanie stylu div jako inline również nie działa.
Triynko

Odpowiedzi:

198

Autorytatywnym miejscem do wyszukiwania dozwolonych relacji zawierania jest specyfikacja HTML. Zobacz na przykład http://www.w3.org/TR/html4/sgml/dtd.html . Określa, które elementy są elementami blokowymi, a które wstawiane. W przypadku tych list wyszukaj sekcję oznaczoną „Modele treści HTML”.

W przypadku elementu P określa to, co następuje, co oznacza, że ​​elementy P mogą zawierać tylko elementy wbudowane.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Jest to zgodne z http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , który mówi, że element P „nie może zawierać elementów blokowych (w tym samego P)”.

Colin Campbell
źródło
74
Mam zwyczaj unikania specyfikacji, najbardziej autorytatywnych dokumentów, jakie mamy, ponieważ nie są one przyjemne w czytaniu. +1 za ich przeczytanie, zrozumienie i używanie ich do odpowiadania na pytania.
Stoutie
3
Czy to nadal dotyczy HTML 5? Link do specyfikacji odnosi się konkretnie do HTML 4, a HTML 5 nie ma definicji typu dokumentu .
Ajedi32
2
@ Ajedi32 Tak, tutaj . W HTML5 zmieniono nazwy wielu terminów, ale „Dozwolona zawartość: zawartość fraz” oznacza to samo, co %inlinefragment powyżej. Zobacz także odpowiedź Oriol.
Pan Lister
@Stoutie Racja z tobą, dlatego istnieje Stack Overflow.
Captain Hypertext
69

Krótko mówiąc, niemożliwe jest umieszczenie <div>elementu wewnątrz a <p>w DOM, ponieważ otwierający <div>tag automatycznie zamknie <p>element.

defau1t
źródło
2
Ach, to wyjaśnia, dlaczego jest ogromna przestrzeń przed div wewnątrz ap, ponieważ p tak naprawdę kończy się tuż przed div.
AaronLS
2
Państwo mogą umieścić divelementu Wewnątrz p w DOM , np myP.appendChild(myDiv). Ale parser HTML tego nie zrobi.
Oriol
1
Nie rób tego. Nie masz pojęcia, jak to zareaguje w przyszłych przeglądarkach. Technologia ciągle się zmienia. Może istnieć dynamiczny parser html, który pewnego dnia unieważni to. Celem tworzenia stron internetowych jest tworzenie rzeczy, które mogą być zarówno pożądane, jak i nieco kompatybilne. Jeśli możesz ominąć to, na co pozwala przeglądarka, można śmiało powiedzieć, że nie możesz zagwarantować, że będzie działać wiecznie. Po prostu użyj facetów z zakresu ... Jeśli potrzebujesz elementu div, przestań używać tagu p.
39

Zgodnie z HTML5, model zawartości z divelementów jest zawartość przepływu

Większość elementów używanych w treści dokumentów i aplikacji jest klasyfikowana jako zawartość przepływu.

Że zawiera pelementy, które mogą być wykorzystane wyłącznie w których zawartość przepływu oczekuje.

Dlatego divelementy mogą zawierać pelementy.

Jednak model zawartości z pelementów jest zawartość frazowania

Zawartość fraz to tekst dokumentu, a także elementy, które zaznaczają ten tekst na poziomie wewnątrz akapitu. Przebiegi frazowania zawartości formularza pkt .

Który nie zawiera divelementów, które mogą być wykorzystane wyłącznie w których zawartość przepływu oczekuje.

Dlatego pelementy nie mogą zawierać divelementów.

Ponieważ znacznik końca z pelementów może być pominięty, gdy pelement jest bezpośrednio za pomocą divelementu (między innymi), Następujący

<p>
  <div>some words</div>
</p>

jest analizowany jako

<p></p>
<div>some words</div>
</p>

a ostatnia </p>to błąd.

Oriol
źródło
Ale jeśli w CSS, jeśli ustawię div jako inline, dlaczego tego nie przestrzega?
Sanjay,
Ponieważ wartości CSS są stosowane po analizie dom ... nawet jeśli sprawimy, że div as inline in CSSjest to bezużyteczne, ponieważ nowa przeanalizowana struktura jest <p>Text</p> <div>some words</div> <p></p> prawidłowa?
Sanjay,
@Sanjay Tak, wygląda na to, że masz rację. Co więcej, podczas moich obserwacji, jeśli umieścisz <span> wewnątrz <p>, a następnie ustawisz wyświetlanie span na "blok", zostanie on wyrenderowany jako typowy element blokowy bez takiego efektu.
Andrii Naumovych
-1

Po X HTML konwencja została zmieniona i teraz jest to mieszanka konwencji XML i HTML, dlatego drugie podejście jest błędne i walidator W3C akceptuje rzeczy poprawne, zgodne ze standardami i konwencjami.

geekdev786
źródło
XHTML nie zmienił się zbytnio. Element p nigdy nie mógł zawierać elementu div.
Quentin
-7

Ponieważ divtag ma wyższy priorytet niż ptag. pTag reprezentuje znacznik akapitu natomiast divtag reprezentuje znacznik dokumentu.

Możesz napisać wiele akapitów w znaczniku dokumentu, ale nie możesz napisać dokumentu w akapicie. To samo, co plik DOC.

Gaurav Agrawal
źródło
2
Właściwie to podział. W przeciwnym razie byłoby <doc>: D
Kyle,
6
Pierwszeństwo nie jest pojęciem odnoszącym się do elementów html, a div reprezentuje podział, jak mówi @KyleSevenoaks :)
SimplGy
Co to jest plik DOC? Plik programu Microsoft Word ?
Peter Mortensen