Apa semua elemen penutup mandiri yang valid di XHTML (seperti yang diterapkan oleh browser utama)?


188

Apa semua elemen penutup mandiri yang valid (mis. <br/>) di XHTML (seperti yang diterapkan oleh browser utama)?

Saya tahu bahwa XHTML secara teknis memungkinkan elemen apa pun untuk ditutup sendiri, tetapi saya sedang mencari daftar elemen yang didukung oleh semua browser utama. Lihat http://dusan.fora.si/blog/self-closing-tags untuk contoh beberapa masalah yang disebabkan oleh elemen penutup diri seperti <div />.


7
Bukankah ini standar salah satu tujuan XHTML? Saya pikir salah satu kelebihan XHTML adalah Anda dapat menggunakan generator XML untuk menghasilkan HTML. Mengapa ada generator XML yang menyadari tag apa yang diizinkan untuk ditutup sendiri? Terlalu aneh.
Elia

6
Alasan mengapa jawaban "lumpuh", "salah" diterima adalah karena menjawab pertanyaan yang jelas diajukan Kamens. Dia ingin tahu elemen mana yang bisa ditutup sendiri ketika menyajikan XHTML sebagai teks / html tanpa menyebabkan masalah rendering di browser. Banyak halaman ditulis dalam XHTML dan disajikan sebagai teks / html meskipun secara teknis salah. Pertanyaannya dapat ditingkatkan dengan klarifikasi ini, tetapi menjawab pertanyaan yang berbeda (apa yang terjadi ketika Anda berfungsi sebagai aplikasi / xml, atau apakah tag tunggal dalam teks / html harus memiliki penutup /) tidak membantu dalam hal ini.
Nick Lockwood

Jawaban:


180

Setiap browser yang mendukung XHTML (Firefox, Opera, Safari, IE9 ) mendukung sintaksis yang menutup sendiri pada setiap elemen .

<div/>, <script/>, <br></br>Semua harus bekerja dengan baik. Jika tidak, maka Anda memiliki HTML dengan DOCTYPE XHTML yang ditambahkan secara tidak tepat.

DOCTYPE tidak mengubah cara dokumen diartikan. Hanya tipe MIME yang melakukannya .

Keputusan W3C tentang mengabaikan DOCTYPE :

HTML WG telah membahas masalah ini: maksudnya adalah untuk memungkinkan browser lama (hanya HTML) untuk menerima dokumen XHTML 1.0 dengan mengikuti pedoman, dan melayani mereka sebagai teks / html. Oleh karena itu, dokumen yang berfungsi sebagai teks / html harus diperlakukan sebagai HTML dan bukan sebagai XHTML.

Ini adalah perangkap yang sangat umum, karena Validator W3C sebagian besar mengabaikan aturan itu, tetapi browser mengikutinya dengan agama. Baca Memahami HTML, XML, dan XHTML dari blog WebKit:

Bahkan, sebagian besar dokumen XHTML seharusnya di internet dilayani sebagai text/html. Yang berarti mereka sama sekali bukan XHTML, tetapi sebenarnya HTML tidak valid yang bertahan karena kesalahan penanganan parser HTML. Semua itu “Valid XHTML 1.0!” tautan di web benar-benar mengatakan "HTML 4.01 Tidak Valid!".


Untuk menguji apakah Anda memiliki XHTML asli atau HTML tidak valid dengan DOCTYPE XHTML, masukkan ini ke dalam dokumen Anda:

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

Ini memvalidasi, dan dalam XHTML nyata berfungsi dengan baik (lihat: 1 vs 2 ). Jika Anda tidak dapat mempercayai mata Anda (atau tidak tahu cara mengatur tipe MIME), buka halaman Anda melalui proxy XHTML .

Cara lain untuk memeriksa adalah melihat sumber di Firefox. Ini akan menyoroti garis miring merah ketika mereka tidak valid.

Di HTML5 / XHTML5 ini tidak berubah, dan perbedaannya bahkan lebih jelas, karena Anda bahkan tidak memiliki tambahan DOCTYPE. Content-Typeadalah raja.


Sebagai catatan, spesifikasi XHTML memungkinkan elemen apa pun untuk menutup sendiri dengan menjadikan XHTML aplikasi XML : [penekanan milikku]

Tag elemen kosong dapat digunakan untuk elemen apa pun yang tidak memiliki konten , terlepas dari apakah itu dinyatakan menggunakan kata KOSONG atau tidak.

Itu juga secara eksplisit ditampilkan dalam spesifikasi XHTML :

Elemen kosong harus baik memiliki tag akhir atau tag awal harus diakhiri dengan />. Misalnya, <br/>atau<hr></hr>


7
Tidak benar afaik, karena menggunakan versi penutupan sendiri <script>atau <div>menghasilkan rendering / interpretasi yang berbeda.
ZeissS

13
@ZeissS hanya di text/html. Dalam XHTML asli, dikirim karena application/xhtml+xmlberfungsi dengan baik. Silakan baca artikel yang saya tautkan ke (atau spesifikasi XHTML Lampiran C) sebelum downvoting.
Kornel

3
@pornel dapatkah Anda memastikan bahwa tag <script /> penutupan sendiri akan berfungsi di peramban yang lebih lama? Saya kira tidak. Anda terdengar otoritatif, dan sebagian besar informasi Anda akurat, tetapi pengalaman memberi tahu saya bahwa tag skrip yang menutup sendiri akan bermasalah dan yang terbaik adalah menghindarinya sama sekali daripada membuat Anda pusing.
Metagrapher

6
@Metagrapher jika browser lama tidak mendukung XHTML asli, ATAU Anda gagal mengatur tipe MIME , maka itu tidak akan berfungsi. Namun, di browser yang mendukung XHTML (semua yang utama pada saat ini) dengan application/xhtml+xmltipe MIME saya dapat menjamin itu <script/>akan berfungsi. Dengan tipe MIME. Hanya.
Kornel

4
@capdragon: Browser lama tidak mendukung XHTML (berfungsi sebagai 'aplikasi / xhtml + xml'). Jika Anda mengirimi mereka dokumen XHTML sebagai 'teks / html', maka XHTML akan diterjemahkan sebagai sup tag (yaitu browser mem-parsingnya sebagai HTML dan menganggap kesalahan tag penutup diri, yang pulih dengan anggun dari). Opsi Anda adalah 1. tulis HTML 4 (bukan pilihan jika menggunakan ASP.NET yang merender XHTML), 2. sajikan XHTML Anda sebagai 'application / xhtml + xml' (memerlukan IE9 +, dan tipe MIME ini akan memecah skrip di semua browser. ngomong-ngomong, jadi def bukan pilihan), 3. tulis HTML 5, yang pada dasarnya menjadikan sup tag sebagai standar :)
Triynko

41

Satu elemen yang sangat berhati-hati dengan topik ini adalah <scriptelemen>. Jika Anda memiliki file sumber eksternal, itu AKAN menyebabkan masalah ketika Anda menutupnya sendiri. Cobalah:

<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />

Ini akan bekerja di Firefox, tetapi setidaknya istirahat di IE6. Saya tahu, karena saya mengalami ini ketika terlalu rajin menutup setiap elemen yang saya lihat ;-)


Mempengaruhi semua versi MSIE: webbugtrack.blogspot.com/2007/08/...
scunliffe

4
<script> tidak menutup sendiri di Firefox 3.
hsivonen

Yah, dulu berfungsi di Firefox ketika saya menemukannya. Sepertinya itu tidak berfungsi di browser apa pun lagi. Mungkin juga hanya bisa berfungsi dalam mode quirks?
Erik van Brakel

1
@erickson berfungsi dengan baik di Firefox jika Anda akan mendapatkan tipe MIME yang benar.
Kornel

WebKit terus melakukannya karena alasan kepatuhan.
Yuhong Bao

35

Sintaks self-closing bekerja pada semua elemen dalam aplikasi / xhtml + xml. Itu tidak didukung pada elemen apa pun di teks / html, tetapi elemen-elemen yang "kosong" di HTML4 atau "void" di HTML5 tidak mengambil tag akhir, jadi jika Anda menaruh garis miring pada yang muncul seolah-olah sintaks penutupan sendiri didukung.


33

Dari situs referensi Sekolah W3 :

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

7
w3schools.com/tags/default.asp Saya melihat 12 tag berakhir dengan />:"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"
mpen

94
Harap dicatat bahwa W3schools tidak berafiliasi dengan W3C, dan bahkan gagal menanggapi koreksi yang dikirim oleh anggota W3C.
Kornel

2
Seperti yang sering terjadi, w3schools hampir benar. Cara akurat untuk menemukan elemen kosong adalah menjalankan grep EMPTY xhtml1-strict.dtd | sortataugrep EMPTY xhtml1-transitional.dtd | sort
cayhorstmann

1
IMHO, orang menampar W3Schools terlalu keras. Itu terbukti sebagai sumber yang bagus untuk ketika Anda MEMULAI (!) Pada topik yang tidak Anda ketahui.
Priidu Neemre

28

Pertanyaan yang lebih baik adalah: tag apa yang dapat ditutup sendiri bahkan dalam mode HTML tanpa mempengaruhi kode? Jawab: hanya mereka yang memiliki konten kosong (tidak berlaku). Menurut spesifikasi HTML , elemen-elemen berikut tidak berlaku:

area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr

Versi spesifikasi yang lebih lama juga tercantum command. Selain itu, menurut berbagai sumber, tag usang atau non-standar berikut tidak berlaku:

basefont, bgsound, frame, isindex


10

Semoga ini bisa membantu seseorang:

<base />
<basefont />
<frame />
<link />
<meta />

<area />
<br />
<col />
<hr />
<img />
<input />
<param />

5

Bagaimana dengan <meta>dan <link>? Mengapa mereka tidak ada dalam daftar itu?

Aturan praktis, jangan tutup sendiri elemen apa pun yang dimaksudkan untuk memiliki konten, karena pasti akan menyebabkan masalah browser cepat atau lambat.

Orang-orang yang secara alami menutup diri, suka <br>dan <img>, harus jelas. Yang tidak ... jangan ditutup sendiri!


4

Terakhir kali saya memeriksa, berikut ini adalah elemen kosong / kosong yang tercantum dalam HTML5.

Berlaku untuk penulis: area, basis, br, col, command, embed, eventsource, jam, img, input, tautan, meta, param, sumber

Tidak valid untuk penulis: basefont, bgsound, frame, spacer, wbr

Selain beberapa yang baru di HTML5, yang akan memberi Anda gambaran tentang yang mungkin didukung saat menyajikan XHTML sebagai teks / html. (Cukup uji mereka dengan memeriksa DOM yang dihasilkan.)

Sedangkan untuk XHTML berfungsi sebagai aplikasi / xhtml + xml (yang menjadikannya XML), aturan XML berlaku dan elemen apa pun bisa kosong (meskipun XHTML DTD tidak dapat mengungkapkan ini).


4

Anda harus melihat DTD xHTML , semuanya terdaftar. Berikut ini ulasan singkat semua yang utama:

<br />
<hr />
<img />
<input />

1
Memperbaiki dan membersihkan markup. Hati-hati dengan tautan di halaman ini, mereka lambat untuk memuat.
e-satis

4

Mereka disebut elemen "void" dalam HTML 5. Mereka terdaftar dalam spesifikasi W3 resmi .

Elemen kosong adalah elemen yang model kontennya tidak pernah mengizinkannya memiliki konten dalam keadaan apa pun.

Per April 2013, mereka adalah:

area, basis, br, col, perintah, embed, jam, img, input, keygen, tautan, meta, param, sumber, trek, wbr

Per Desember 2018 (HTML 5.2), mereka adalah:

area, basis, br, col, embed, jam, img, input, tautan, meta, param, sumber, trek, wbr


2

Masalah tag penutup diri lain untuk IE adalah elemen judul. Ketika IE (baru mencobanya di IE7) melihat ini, itu menyajikan pengguna halaman kosong. Namun Anda "melihat sumber" dan semuanya ada di sana.

<title/>

Saya awalnya melihat ini ketika XSLT saya membuat tag penutup sendiri.


Chromium juga tidak menyukai <title/>tag.
uınbɐɥs

2

Saya tidak akan mencoba menguraikan hal ini lebih lanjut, terutama karena sebagian besar halaman yang saya tulis dihasilkan atau tag memiliki konten. Hanya dua yang pernah memberi saya kesulitan ketika membuat mereka menutup diri adalah:

<title/>

Untuk ini, saya hanya memilih untuk selalu memberikannya tag penutup yang terpisah, karena setelah itu ada di sana di <head></head>dalamnya tidak benar-benar membuat kode Anda lebih berantakan untuk digunakan.

<script/>

Ini adalah masalah besar yang baru-baru ini saya hadapi. Selama bertahun-tahun saya selalu menggunakan <script/>tag yang menutup sendiri ketika skrip berasal dari sumber eksternal. Tapi saya baru-baru ini mulai menerima pesan kesalahan JavaScript tentang formulir nol. Setelah beberapa hari penelitian, saya menemukan bahwa masalahnya (seharusnya) bahwa browser tidak pernah sampai ke <form>tag karena tidak menyadari ini adalah akhir dari <script/>tag. Jadi ketika saya membuatnya menjadi <script></script>tag terpisah , semuanya bekerja. Mengapa berbeda di halaman berbeda yang saya buat di browser yang sama, saya tidak tahu, tapi itu melegakan untuk menemukan solusinya!


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.