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

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