<p> etiketi neden içinde <div> etiketi içeremez?

169

Bildiğim kadarıyla, bu doğru:

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

Ama bu yanlış:

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

Birincisi W3C doğrulayıcısını (XHTML 1.0) geçebilir , ancak ikincisi geçemez . Kimsenin ikincisi gibi kod yazmayacağını biliyorum. Sadece nedenini bilmek istiyorum.

Peki ya diğer etiketlerin sınırlama ilişkisi?

html xhtml

— Henry H Miao
kaynak

9

Çünkü <p>bir blok düzeyi unsurdur ve metin görüntülemek için kullanılan (olması gerekiyordu) olup, bu İçindeki diğer blok seviyesi elemanları gibi, ama sadece satır içi olanları izin vermez <span>ve <strong>.

— Bojangles

22

JamWaffles: Bu p, blok düzeyinde bir öğenin onunla hiçbir ilgisi yok. divaynı zamanda diğer bloklara izin verir.

— Joey

olası kopyası: stackoverflow.com/questions/4967976/… (unflagged): HTML spesifikasyonunun nasıl okunacağını ve böylece buna cevap verilebilecek iyi bir cevap.

— Ciro Santilli 法轮功冠状病六四事件法轮功

Div'in stilini satır içi olarak bildirmek de işe yaramaz.

— Triynko

199

İzin verilen çevreleme ilişkilerini aramak için yetkili bir yer HTML spesifikasyonudur. Örneğin, bkz . Http://www.w3.org/TR/html4/sgml/dtd.html . Hangi öğelerin blok öğeleri ve hangilerinin satır içi olduğunu belirtir. Bu listeler için "HTML içerik modelleri" işaretli bölümü arayın.

P öğesi için, P öğelerinin yalnızca satır içi öğeler içermesine izin verildiğini gösteren aşağıdakileri belirtir.

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

Bu, http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 ile tutarlıdır; bu, P öğesinin "blok düzeyinde öğeler (P'nin kendisi dahil) içeremeyeceğini söyler.

— Colin Campbell
kaynak

74

Bu tür şeyler için sahip olduğumuz en yetkili belgelerden, spesifikasyonlardan kaçınma alışkanlığım var, çünkü okumak eğlenceli değil. Onları gerçekten okumak, anlamak ve soruları cevaplamak için kullanmak için +1.

— Stoutie

3

Bu HTML 5 için hala geçerli mi? Bağlantı verilen spesifikasyon özellikle HTML 4'e atıfta bulunur ve HTML 5'in belge türü tanımı yoktur .

— Ajedi32

2

@ Ajedi32 Evet, burada . HTML5 birçok terminolojiyi yeniden adlandırdı, ancak "İzin verilen içerik: kelime öbeği" %inlineyukarıdaki bit ile aynı anlama gelir . Ayrıca bakınız Oriol'un cevabı.

— Bay Lister

@Stoutie Evet, işte bu yüzden Stack Overflow var.

— Kaptan Hypertext

69

Kısacası, DOM'da a <div>öğesinin içine bir öğe yerleştirmek imkansızdır <p>çünkü açılış <div>etiketi <p>öğeyi otomatik olarak kapatacaktır .

— defau1t
kaynak

2

Ah, bu neden ap içinde bir div'den önce büyük bir alan olduğunu açıklıyor, çünkü p aslında div'den hemen önce bitiyor.

— AaronLS

2

Sen edebilir bir yere divbir iç elemanı p DOM'daki , mesela myP.appendChild(myDiv). Ancak bir HTML ayrıştırıcısı bunu yapmaz.

— Oriol

1

Yapma bunu. Gelecekteki tarayıcılarda bunun nasıl yanıt vereceği hakkında hiçbir fikriniz yok. Teknoloji sürekli değişiyor. Bir gün geçersiz kılan dinamik bir html ayrıştırıcısı olabilir. Web geliştirmedeki amaç, hem arzu edilir hem de biraz uyumlu olma yeteneğine sahip şeyler yaratmaktır. Tarayıcının izin verdiği şeyi atlayabilirseniz, sonsuza kadar çalışacağından emin olamayacağınızı söylemek güvenlidir. Sadece bir span çocuklar kullanın ... bir div gerekiyorsa, p etiketini kullanmayı bırakın.

39

HTML5'e göre , öğelerin içerik modeli akış içeriğidir div

Belgelerde ve uygulamalarda kullanılan öğelerin çoğu akış içeriği olarak sınıflandırılır.

Bu, yalnızca akış içeriğinin beklendiği yerlerde kullanılabilecek p öğeleri içerir .

Bu nedenle, divelemanlar eleman içerebilir p.

Bununla birlikte, içerik modeli arasında pelemanları olan Phrasing içeriği

İfade içeriği belgenin metninin yanı sıra bu metni paragraf içi düzeyinde işaretleyen öğelerdir. Arasında çalışır içeriği phrasing şekilde paragraflar .

Bu, yalnızca akış içeriğinin beklendiği yerlerde kullanılabilen div öğeler içermez .

Bu nedenle, pöğeler öğe içeremez div.

Yana uç etiketi ve pbunun element ihmal edilebilir pelemanın hemen takip eder divelemanının (diğerlerinin yanı sıra), şu

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

olarak ayrıştırılır

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

ve sonuncusu </p>bir hatadır.

— Oriol
kaynak

Ama eğer CSS'de div'i satır içi olacak şekilde ayarlarsam neden buna saygı duymuyorsunuz?

— Sanjay

CSS değerleri dom Ayrıştırma işleminden sonra uygulandığından ... kullanılmasa bile div as inline in CSS, yeni ayrıştırılmış yapı <p>Text</p> <div>some words</div> <p></p> benim anlayışım doğru mu?

— Sanjay

@Sanjay Evet, haklısın gibi görünüyor. Dahası, gözlemlerim sırasında, <span> 'ı <p> içine koyar ve daha sonra span'ın ekranını "bloke" olarak ayarlarsanız, böyle bir etkisi olmayan tipik bir blok öğesi olarak işlenir.

— Andrii Naumovych

-1

X HTML'den sonra kurallar değiştirildi ve şimdi XML ve HTML kurallarının bir karışımı, bu yüzden ikinci yaklaşım yanlış ve W3C doğrulayıcısı standartlara ve kurallara göre doğru olan şeyleri kabul ediyor.

— geekdev786
kaynak

XHTML fazla değişmedi. P öğesinin hiçbir zaman bir div öğesi içermesine izin verilmez.

— Quentin

-7

Çünkü divetiket, etikete göre daha yüksek önceliğe sahiptir p. pOysa etiketi bir paragraf etiketi temsil divetiketi bir belge etiketi temsil eder.

Belge etiketine çok sayıda paragraf yazabilirsiniz, ancak paragrafa belge yazamazsınız. Bir DOC dosyası ile aynı.

— Gaurav Agrawal
kaynak

2

Aslında, bu bölünme. Aksi takdirde şöyle olurdu <doc>: D

— Kyle

6

Öncelik html öğeleri için geçerli bir kavram değildir ve div @KyleSevenoaks'in söylediği gibi bir bölümü temsil eder :)

— SimplGy

DOC dosyası nedir? Bir Microsoft Word dosyası?

— Peter Mortensen