Haruskah ol / ul berada di dalam <p> atau di luar?

292

Yang memenuhi standar antara keduanya?

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

ATAU

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>
html dinamis
sumber
40
@oded: apakah konteksnya penting?
dinamis

Jawaban:

422

Jawaban singkatnya adalah bahwa olelemen-elemen tidak diizinkan secara hukum di dalam pelemen-elemen.

Untuk melihat alasannya, mari kita pergi ke spec ! Jika Anda merasa nyaman dengan spec HTML, itu akan menjawab banyak pertanyaan dan keingintahuan Anda. Anda ingin tahu apakah suatu oldapat hidup di dalam p. Begitu…

4.5.1 pUnsur :

Kategori: Mengalirkan konten , konten yang dapat diraba .
Model konten: Konten frasa .

4.5.5 olUnsur :

Kategori: Mengalirkan konten .
Model konten : Nol atau lebih elemen li dan skrip pendukung .

Bagian pertama mengatakan bahwa pelemen hanya dapat berisi konten ungkapan (yang merupakan elemen "inline" seperti spandan strong).

Bagian kedua mengatakan ols adalah konten aliran (elemen "blok" suka pdan div). Jadi mereka tidak bisa digunakan di dalam a p.

oldan lainnya flow contentdapat digunakan di beberapa elemen lain seperti div:

4.5.13 divElemen :

Kategori: Mengalirkan konten , konten yang dapat diraba .
Model konten: Mengalirkan konten .

s4y
sumber
9
@ tautan: Ya, w3.org sedikit teknis. Namun, tidak ada keraguan tentang apa yang benar kapan dan jika Anda sudah memahaminya.
nyson
5
Saya pikir @Sid menjelaskan spesifikasi dan beberapa ketentuannya pasti membantu. Jika dia melangkah lebih jauh, itu akan menjadi jawaban yang bagus. Dia juga bisa secara eksplisit menjawab pertanyaan :). Saya menambahkan suntingan untuk itu.
studgeek
1
enak dibaca? jangan berpikir begitu, pergilah 4.4.1 The p element, penulis bahkan berbicara tentang fantastic sentencesatau sesuatu seperti itu
Jaime Hablutzel
1
@dinamik Saya selalu membuka referensi HTML MDN untuk lebih mudah membaca dokumentasi.
Bonk
1
@ AaronLS Jenis! Ketika browser memberi Anda kembali HTML (misalnya dalam alat pengembang, atau dari .innerHTML), itu dihasilkan ulang dari elemen pohon. Jadi, Chrome tidak menyesuaikan HTML sebanyak membuat pohon yang valid dari HTML asli, lalu menghasilkan HTML baru dari pohon itu.
s4y
40

Kedua. Yang pertama tidak valid.

  • Paragraf tidak dapat berisi daftar.
  • Daftar tidak dapat berisi paragraf kecuali paragraf itu terkandung seluruhnya dalam satu item daftar.

Peramban akan menanganinya seperti ini:

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

sebenarnya Anda hanya harus meletakkan elemen in-line di dalam p, jadi dalam kasus Anda ollebih baik di luar

Kris Ivanov
sumber
2
Ini adalah jawaban yang sama dengan balasan @David Dorward, yang tidak Anda sukai.
ceejayoz
5 
<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Karena keduanya <p>dan <ol>elemen diberikan sebagai blok.

David
sumber