Beberapa tag penutup HTML 1 adalah opsional , yaitu:
</HTML>
</HEAD>
</BODY>
</P>
</DT>
</DD>
</LI>
</OPTION>
</THEAD>
</TH>
</TBODY>
</TR>
</TD>
</TFOOT>
</COLGROUP>
Catatan: Jangan bingung dengan tag penutup yang dilarang untuk dimasukkan, yaitu:
</IMG>
</INPUT>
</BR>
</HR>
</FRAME>
</AREA>
</BASE>
</BASEFONT>
</COL>
</ISINDEX>
</LINK>
</META>
</PARAM>
Catatan: xhtml
berbeda dari HTML. xhtml adalah bentuk xml, yang mengharuskan setiap elemen memiliki tag penutup. Tag penutup dapat dilarang dalam html, namun wajib dalam xhtml
.
Apakah tag penutup opsional
- dimasukkan secara ideal , tetapi kami akan menerimanya jika Anda lupa, atau
- idealnya tidak termasuk, tetapi kami akan menerimanya jika Anda memasukkannya
Dengan kata lain, haruskah saya memasukkannya, atau tidakkah saya harus memasukkannya?
Spesifikasi HTML 4.01 berbicara tentang penutupan tag elemen sebagai opsional , tetapi tidak mengatakan apakah lebih disukai untuk memasukkannya, atau lebih disukai untuk tidak memasukkannya.
Di sisi lain, artikel acak tentang DevGuru mengatakan :
Tag akhir adalah opsional. Namun, disarankan untuk disertakan.
Alasan saya bertanya adalah karena Anda tahu itu opsional untuk alasan kompatibilitas; dan mereka akan membuatnya ( wajib | dilarang ) jika mereka bisa.
Dengan kata lain: Apa yang dilakukan HTML 1, 2, 3 terkait dengan tag penutup yang sekarang opsional ini. Apa yang dilakukan HTML 5? Dan apa yang harus saya lakukan?
Catatan
Beberapa elemen dalam HTML dilarang memiliki tag penutup. Anda mungkin tidak setuju dengan itu, tapi itu spesifikasinya, dan itu tidak cocok untuk diperdebatkan. Saya bertanya tentang tag penutup opsional , dan apa tujuannya.
Catatan kaki
1 HTML 4.01
</p>
tag penutup dan yang kedua menghilangkannya!/>
, seperti<meta charset="utf-8" />
meskipun<meta charset="utf-8">
adalah HTML5 valid?<meta charset="utf-8" />
adalah valid html, itu harus menjadi<meta charset="utf-8">
. Di sisi lain<meta charset="tuf-8">
adalah valid xhtml, itu harus menjadi<meta charset="utf-8" />
<meta charset="UTF-8"/>
dengan tag penutup. Kalau tidak, bagaimana polyglot atau xhtml bisa divalidasi sebagai html5 dan xml?Jawaban:
Yang opsional adalah semua yang semestinya jelas di mana mereka berakhir, tanpa perlu tag akhir. Masing-masing EG
<li>
menyiratkan a</li>
jika tidak ada yang tepat sebelumnya.Tag akhir terlarang semua akan segera diikuti oleh tag akhir mereka sehingga agak berlebihan jika harus mengetik
<img src="blah" alt="blah"></img>
setiap waktu.Saya hampir selalu menggunakan tag opsional (kecuali saya memiliki alasan yang sangat bagus untuk tidak melakukannya) karena ini memberikan kode yang lebih mudah dibaca dan dapat diperbarui.
sumber
<LI>
seperti peluru. Tidak ada yang mau harus membungkus seluruh poin<LI>...</LI>
. Jadi dengan cara ituLI
cocok dengan apa yang biasanya ditulis orang selama markup. Sames berlaku untuk tanda paragraf (<P>
), dalam pengolah kata Anda menambahkan tanda paragraf di awal paragraf; dan tidak pada setiap akhir juga. Jadi dalam interpretasi ini tag penutup adalah opsional karena tidak ada orang normal yang berpikir untuk memilikinya. Plus, elemen itu sendiri tidak memiliki konten - elemennya adalah konten.Ada kasus-kasus di mana tag eksplisit membantu, tetapi kadang-kadang itu tidak berguna.
Perhatikan bahwa spesifikasi HTML menentukan dengan jelas kapan valid untuk menghilangkan tag, jadi itu tidak selalu merupakan kesalahan.
Misalnya Anda tidak pernah membutuhkannya
</body></html>
. Tidak ada yang pernah ingat untuk menempatkan<tbody>
secara eksplisit (ke titik XHTML membuat pengecualian untuk itu).Anda tidak perlu
</head><body>
kecuali Anda memiliki skrip manipulasi DOM yang benar-benar mencari<head>
(maka lebih baik untuk menutupnya secara eksplisit, karena aturan untuk akhir yang tersirat<head>
dapat mengejutkan Anda).Daftar bersarang sebenarnya lebih baik tanpa
</li>
, karena dengan begitu lebih sulit untuk membuatul > ul
pohon yang salah .Sah:
Tidak valid:
Dan perlu diingat bahwa tag akhir tersirat apakah Anda mencoba untuk menutup semua elemen atau tidak. Menempatkan tag akhir tidak akan secara otomatis membuat parsing lebih kuat:
akan diuraikan sebagai:
Itu hanya dapat membantu ketika Anda memvalidasi dokumen.
sumber
<p>foo <p>bar</p> baz</p>
tidak diuraikan sebagai duap
tag bersarang ?<P>
elemen tidak dapat mengandung elemen level blok, dan<P>
merupakan elemen level blok. Dari ( w3.org/TR/REC-html40/struct/text.html#edef-P ) "Elemen P mewakili sebuah paragraf. Elemen ini tidak dapat mengandung elemen level blok (termasuk P sendiri)."block
Tampilan CSS adalah hal yang sama sekali berbeda dari konten level blok HTML (kebetulan saja sebagian besar elemen level blok HTML ditampilkan sebagai blok CSS secara default).<t>
tidak akan berfungsi<title>
.Saya menambahkan beberapa tautan di sini untuk membantu Anda dengan sejarah HTML, agar Anda dapat memahami berbagai kontradiksi. Ini bukan jawaban untuk pertanyaan Anda, tetapi Anda akan tahu lebih banyak setelah membaca berbagai intisari ini.
Beberapa kutipan dari Dive Into HTML5 :
sumber
Itu kesimpulan yang menarik. Bacaan saya tentang itu adalah bahwa setiap saat tag dapat disimpulkan dengan andal, tag adalah opsional. Desain menunjukkan bahwa tujuannya adalah membuatnya cepat dan mudah untuk ditulis.
DTD untuk HTML 2 tertanam di RFC yang, bersama dengan HTML DTD asli , memiliki tag awal dan akhir opsional di semua tempat.
HTML 3 ditinggalkan (berkat perang browser) dan diganti dengan HTML 3.2 (yang dirancang untuk menggambarkan keadaan web saat itu).
HTML 5 diarahkan untuk "membuka jalan setapak" sejak awal.
Ah, sekarang subjektif dan argumentatif :)
Beberapa orang berpikir bahwa tag eksplisit lebih baik untuk keterbacaan dan pemeliharaan karena berada di depan mata pembaca.
Beberapa orang berpikir bahwa tag yang disimpulkan lebih baik untuk keterbacaan dan pemeliharaan karena tidak mengacaukan editor.
sumber
Jawaban atas pertanyaan ini ada di W3C Working Draft: http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission
Ini masalah gaya. Saya mencoba untuk tidak pernah menghilangkan tag akhir karena itu membantu saya untuk menjadi keras dan tidak menghilangkan tag yang diperlukan.
sumber
Jika berlebihan, tinggalkan saja.
Jika itu melayani tujuan (bahkan tujuan yang tampaknya sepele, seperti memenuhi tuntutan IDE Anda atau menenangkan mata Anda), biarkan saja.
Jarang dalam spesifikasi yang terdefinisi dengan baik untuk melihat item opsional yang tidak memengaruhi perilaku. Kecuali "komentar", tentu saja. Tetapi spesifikasi HTML kurang dari spesifikasi desain, dan lebih merupakan dokumen dari kondisi implementasi utama saat ini. Jadi ketika suatu item bersifat opsional dalam HTML dan tampaknya tidak ada gunanya, kita dapat menebak bahwa sifat opsional hanyalah dokumentasi dari kekhasan dalam browser tertentu.
Melihat bagian HTML-5 RFC spec yang ditautkan di atas, Anda melihat bahwa tag opsional secara aneh terkait dengan keberadaan komentar! Itu akan memberi tahu Anda bahwa penulis tidak mengenakan topi desain. Mereka malah memainkan permainan "mendokumentasikan kebiasaan" dalam implementasi besar. Jadi kita tidak bisa menganggap spek terlalu serius dalam hal ini.
Jadi, solusinya adalah: Jangan berkeringat. Pindah ke sesuatu yang benar-benar penting. :)
sumber
Saya pikir jawaban terbaik adalah dengan memasukkan tag penutup untuk keterbacaan atau deteksi kesalahan. Namun, jika Anda memiliki banyak HTML yang dihasilkan (katakanlah, tabel data), Anda dapat menghemat bandwidth yang signifikan dengan menghilangkan tag opsional.
sumber
Rekomendasi saya adalah Anda menghilangkan sebagian besar tag penutup opsional, dan semua atribut opsional yang dapat Anda hilangkan. Banyak IDE akan mengeluh sehingga Anda mungkin tidak bisa menghilangkan beberapa dari ini tetapi umumnya lebih baik untuk ukuran file yang lebih kecil dan lebih sedikit kekacauan. Jika Anda memiliki generator kode pasti menghilangkan tag akhir di sana karena Anda bisa mendapatkan beberapa pengurangan ukuran yang baik dari itu. Biasanya itu tidak terlalu penting.
Tetapi ketika itu penting, maka lakukanlah. Pada beberapa karya terbaru saya, saya dapat mengurangi ukuran HTML yang saya render dari 1,5 MB menjadi 800 KB dengan menghilangkan sebagian besar atribut yang dihasilkan akhir dan nilai redundan untuk tag terbuka, di mana teks elemen sama dengan nilai. Saya memiliki sekitar 200 tag. Saya bisa menerapkan ini dengan cara lain sepenuhnya, tetapi itu akan lebih banyak bekerja ($$$), jadi ini memungkinkan saya untuk dengan mudah membuat halaman lebih responsif.
Hanya karena penasaran saya menemukan bahwa jika saya menghapus tanda kutip di sekitar atribut yang tidak membutuhkannya saya bisa menghemat 20 KB, tetapi IDE saya (Visual Studio) tidak menyukainya. Saya juga terkejut menemukan bahwa ID yang sangat panjang yang dihasilkan oleh ASP.NET menghasilkan 20% dari file saya.
Gagasan bahwa kami bisa mendapatkan fraksi yang relevan dari HTML yang benar-benar valid ternyata salah arah, jadi lakukan apa pun yang terbaik untuk Anda dan pelanggan Anda. Sebagian besar alat yang pernah saya lihat atau gunakan akan mengatakan mereka menghasilkan xhtml, tetapi mereka tidak benar-benar bekerja 100%, dan bagaimanapun juga tidak ada manfaat dari kepatuhan yang ketat.
sumber
</p>
atau</li>
) baik-baik saja sesuai dengan spesifikasi HTML. Jika browser tidak memahaminya, maka ada masalah dengan browser.Secara pribadi, saya penggemar XHTML dan, seperti ghoppe, "Saya mencoba untuk tidak pernah menghilangkan tag akhir karena itu membantu saya untuk menjadi keras dan tidak menghilangkan tag yang diperlukan."
tapi
Jika Anda sengaja menggunakan HTML 4.n, orang tidak dapat membantah bahwa dengan menyertakannya membuatnya lebih mudah untuk mengkonsumsi dokumen, karena gagasan pembentukan yang baik sebagai lawan validitas adalah konsep XML, dan Anda kehilangan manfaat itu saat Anda melarang tag penutup tertentu. Jadi satu-satunya masalah menjadi validitas ... dan jika masih berlaku tanpa mereka ... Anda mungkin menghemat bandwidth, bukan?
sumber
Menggunakan tag akhir membuat berurusan dengan fragmen lebih mudah karena perilakunya tidak bergantung pada elemen saudara. Alasan ini saja harus cukup meyakinkan. Apakah ada yang berurusan dengan dokumen html monolitik lagi?
sumber
Dalam beberapa bahasa kurung kurawal seperti C #, Anda dapat menghilangkan kurung kurawal di sekitar pernyataan if jika panjangnya hanya dua baris. sebagai contoh...
if ([condition])
[code]
tetapi Anda tidak dapat melakukan ini ...
if ([kondisi])
[kode]
[kode]
baris ketiga tidak akan menjadi bagian dari pernyataan if. itu menyakitkan keterbacaan, dan bug dapat dengan mudah diperkenalkan, dan sulit ditemukan.
untuk alasan yang sama, saya menutup semua tag. tag seperti tag img masih perlu ditutup, hanya saja tidak dengan tag penutup yang terpisah.
sumber
Jika Anda menulis parser HTML, apakah akan lebih mudah untuk mem-parsing HTML yang menyertakan tag penutup opsional, atau HTML yang tidak? Saya pikir tag penutup opsional yang hadir akan membuatnya lebih mudah, karena saya tidak perlu menyimpulkan di mana tag penutup seharusnya.
Untuk alasan itu, saya selalu menyertakan tag penutup opsional - pada teori bahwa halaman saya mungkin membuat lebih cepat, karena saya membuat lebih sedikit pekerjaan untuk parser HTML browser.
sumber
<li>
tag tanpa tag penutup, pada titik tertentu browser harus memutuskan di mana elemen berakhir, dan bertindak seolah-olah Anda telah menempatkan tag akhir pada titik itu. Ini mungkin jumlah yang relatif sepele dari logika, tetapi "beberapa" masih lebih dari "tidak ada" dan saya pikir itu tidak masuk akal untuk menganggap bahwa meninggalkan tag akhir opsional membuat lebih banyak pekerjaan untuk browser daripada memasukkannya.</table>
dan tumpukan Anda berisi<table><tbody><tr><td>
, maka Anda bisa menutup semuanya sampai Anda cocok dengan<table>
. Demikian pula untuk membuka<p>
dalam konteks non-jam. Tapi mungkin ada banyak kasus yang lebih sulit, saya tidak tahu.Lakukan apa pun yang menurut Anda membuat kode lebih mudah dibaca dan dipelihara.
Secara pribadi saya akan selalu cenderung untuk menutup
<td>
dan<tr>
, tetapi saya tidak akan pernah peduli<li>
.sumber
<td>
dan<li>
itu yang membuat Anda tidak repot-repot<li>
? Bagi saya, ada sedikit perbedaan.Untuk jenis penutupan terlarang gunakan sintaksis seperti:
<img />
Dengan/>
untuk menutup tag yang diterima dalam xmlsumber