Apakah tag penutup diri (tidak batal) valid dalam HTML5?

670

The W3C validator tidak seperti tag menutup diri (orang-orang yang berakhir dengan " />") pada non-kekosongan elemen. (Elemen kosong adalah elemen yang mungkin tidak pernah mengandung konten apa pun.) Apakah masih valid dalam HTML5?

Beberapa contoh elemen batal yang diterima :

<br />
<img src="" />
<input type="text" name="username" />

Beberapa contoh elemen non-void yang ditolak :

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

Catatan:
Validator W3C benar-benar menerima tag penutup otomatis yang batal: penulis awalnya memiliki masalah karena kesalahan ketik yang sederhana ( \>bukan />); namun, tag penutup sendiri tidak 100% valid dalam HTML5 secara umum, dan jawabannya menguraikan masalah tag penutup sendiri di berbagai rasa HTML.

Ardent Coder
sumber
2
@ Ben: oh, maaf, saya pikir Anda benar. Dalam hal ini, saya salah paham tentang pertanyaan awal, saya pikir OP ingin tahu apakah tag penutup diri sama sekali valid dalam HTML5. Tapi ini berarti dia baru saja membuat kesalahan ketik dalam kodenya, atau dia tidak tahu bagaimana menulis tag penutupan secara wajar, yang masuk akal bahwa validator W3C menandai kodenya sebagai tidak valid.
Sk8erPeter
16
Untuk menghemat waktu bagi pembaca di masa mendatang: ya, sintaks dalam pertanyaan salah, dan tidak, Anda tidak boleh mengubahnya. OP secara eksplisit dan tepat menjelaskan alasannya . Karena memunculkan kesalahan validasi yang mendorong pertanyaan ini, sintaksis tidak boleh diperbaiki.
Jordan Grey
2
Apakah Anda masih memperjuangkan arah tebasan yang harus dihadapi? Ayolah.
BoltClock
3
@BoltClock Yup, masih berjuang. Guys: jika pertanyaan ini diajukan, pertanyaan \>itu harus ditutup sebagai pertanyaan fix-my-typo yang tidak berguna. Jawabannya semua alamat />. The />Versi adalah satu-satunya yang berguna. Biarlah.
Gilles 'SANGAT berhenti menjadi jahat'
1
Maka pertanyaannya harus ditulis ulang, karena validator W3C sebenarnya menerima tag yang menutup sendiri. Sulit untuk menulis ulang pertanyaan sedemikian rupa tanpa mengurangi integritasnya sehubungan dengan maksud aslinya. Oleh karena itu, jika kita ingin mematuhi aturan SO, kita mungkin harus mengorbankan kejelasan dalam pertanyaan seperti ini, meskipun tampaknya mengedit pertanyaan adalah satu-satunya hal yang masuk akal untuk dilakukan, demi kebaikan yang lebih besar pada rata-rata. Kita bisa memulai diskusi lain tentang meta, jika ada banyak pertanyaan lain masalah yang sama.
Osa

Jawaban:

1238
  • Dalam HTML 4 , <foo /(ya, tanpa >sama sekali) berarti <foo>(yang mengarah ke <br />makna <br>>(yaitu <br>&gt;) dan <title/hello/makna <title>hello</title>). Ini adalah aturan SGML bahwa browser melakukan pekerjaan yang sangat buruk dalam mendukung, dan spesifikasi menyarankan penulis untuk menghindari sintaksis .

  • Dalam XHTML , <foo />berarti<foo></foo> . Ini adalah aturan XML yang berlaku untuk semua dokumen XML. Yang mengatakan, XHTML sering berfungsi sebagai text/htmlyang (setidaknya secara historis) diproses oleh browser menggunakan parser berbeda dari dokumen yang dilayani application/xhtml+xml. W3C menyediakan pedoman kompatibilitas untuk diikuti untuk XHTML sebagai text/html. (Pada dasarnya: Hanya gunakan sintaksis tag penutup sendiri ketika elemen didefinisikan sebagai KOSONG (dan tag akhir dilarang dalam spesifikasi HTML)).

  • Dalam HTML5 , arti dari <foo /> tergantung pada jenis elemen .

    • Pada elemen HTML yang ditetapkan sebagai elemen void (pada dasarnya "Elemen yang ada sebelum HTML5 dan yang dilarang memiliki konten apa pun"), tag akhir hanya dilarang. Garis miring di akhir tag awal diizinkan, tetapi tidak memiliki arti. Ini hanya gula sintaksis untuk orang (dan penyorot sintaks) yang kecanduan XML.
    • Pada elemen HTML lain, garis miring adalah kesalahan, tetapi pemulihan kesalahan akan menyebabkan browser mengabaikannya dan memperlakukan tag sebagai tag awal yang teratur. Ini biasanya akan berakhir dengan tag akhir yang hilang yang menyebabkan elemen berikutnya menjadi anak-anak daripada saudara kandung.
    • Elemen asing (diimpor dari aplikasi XML seperti SVG) memperlakukannya sebagai sintaksis yang menutup sendiri.
Quentin
sumber
24
" ... yang kecanduan XML. " Anda tampaknya menyarankan bahwa kepatuhan XML itu buruk. Namun, hasil akhirnya dalam HTML5 tampaknya adalah bahwa kita masih harus berurusan dengan tanda kurung siku (yaitu sesuatu dengan sebagian besar ketidaknyamanan XML), sementara itu membuatnya lebih sulit untuk menggunakan alat berbasis XML (misalnya alat template atau berbagai prosesor) ). Bahkan dari sudut pandang generasi, akan terlihat bahwa <object data="..." />dan <img src="..."></src>tidak OK, sementara <object data="..."></object>dan <img src="..." />sedang, yang membuatnya lebih sulit untuk konsistensi alat. Ini seperti situasi kalah-kalah.
Bruno
7
@ Bruno - HTML mendahului XML. Upaya untuk membuat orang pindah ke XHTML gagal. Dengan text/html, browser tidak memberikan arti khusus pada slash, jadi termasuk itu tidak memiliki tujuan praktis. Itu hanya ada untuk membuatnya lebih seperti XML untuk orang yang tidak bisa keluar dari kebiasaan itu.
Quentin
6
@ Quentin, aku tidak sepenuhnya tidak setuju. Saya hanya merasa agak memalukan bahwa XML setara yang valid belum tentu valid HTML5 (misalnya, <img ...></img>bukan <img ...>atau <img ... />). Karena HTML5 secara efektif kurang ketat secara umum (mungkin mengapa XHTML gagal), bisa jadi hal itu bisa ditoleransi <img ...></img>. Sayangnya, tidak, jadi generator template berbasis XML perlu tahu cara membedakan produksi elemen kosong atau elemen yang menutup sendiri: Anda bahkan tidak dapat memiliki satu aturan untuk mengatakan menulis semua elemen kosong <tag></tag>.
Bruno
3
XHTML gagal sebelum HTML 5 bahkan di cakrawala, dan Anda tidak dapat telah lama membentuk elemen kosong karena koreksi kesalahan browser mendahului XHTML akan melakukan hal-hal seperti memperlakukan </br>sebagai <br>sehingga <br></br>akan menjadi satu baris ganda. (dan kompatibilitas dengan markup buruk dunia nyata (seperti </br>) adalah salah satu tujuan desain HTML 5).
Quentin
1
DARI W3C: Elemen kosong: area, basis, br, col, embed, hr, img, input, keygen, tautan, meta, param, sumber, trek, wbr "Elemen kosong hanya memiliki tag awal; tag akhir tidak boleh ditentukan untuk elemen batal. " w3.org/TR/html5/syntax.html#void-elements
Fabio Nolasco
406

Seperti yang ditunjukkan Nikita Skvortsov, div yang menutup sendiri tidak akan memvalidasi. Ini karena div adalah elemen normal , bukan elemen kosong .

Menurut spec HTML5 , tag yang tidak dapat memiliki konten apa pun (dikenal sebagai elemen kosong ) dapat ditutup sendiri *. Ini termasuk tag berikut:

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

Namun, "/" sepenuhnya opsional pada tag di atas, jadi <img/>tidak berbeda dengan <img>, tetapi <img></img>tidak valid.

* Catatan: elemen asing juga bisa menutup sendiri, tapi saya pikir itu bukan ruang untuk jawaban ini.

Orca Merah
sumber
1
Alat Pengembang IE10 memberi saya "HTML1500: Tag tidak dapat menutup sendiri. Gunakan tag penutup eksplisit." on the line <meta charset = "UTF-8" /> Ada ide mengapa itu terjadi?
James in Indy
Ok, saya menemukan bahwa tag penutup diri seharusnya tidak memiliki garis miring (dan menghapusnya memperbaiki kesalahan saya). Mengutip: tiffanybbrown.com/2011/03/23/…
James in Indy
Spek telah berubah. Sekarang, elemen "void" atau "self-closing" tidak boleh termasuk slash, ketika disajikan sebagai HTML 5 doctype. Namun, jika sedang disajikan sebagai XHTML, slash penutup mungkin diperlukan (periksa dokumen dalam kasus ini). Dalam penggunaan praktis, halaman biasanya akan ditampilkan seperti yang diharapkan bahkan jika penutupan /telah dimasukkan, tetapi ini tidak dijamin (tergantung pada browser secara efektif menulis ulang kode untuk Anda, dan menafsirkannya seperti yang Anda inginkan.) Juga, jika untuk beberapa alasan halaman Anda diharuskan untuk melewati validasi HTML 5, itu mungkin tidak lulus jika Anda menutup tag untuk elemen yang tidak valid.
SherylHohman
Mengenai komentar @ SherylHohman, saya tidak percaya spec telah berubah (atau jika sudah, itu telah berubah kembali). Lihat w3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) - void (atau asing) elemen mungkin masih termasuk slash.
ChrisC
63

Dalam praktiknya, menggunakan tag penutup diri dalam HTML seharusnya berfungsi seperti yang Anda harapkan. Tetapi jika Anda khawatir tentang penulisan HTML5 yang valid , Anda harus memahami bagaimana penggunaan tag tersebut berperilaku dalam dua bentuk sintaks yang berbeda yang dapat Anda gunakan. HTML5 mendefinisikan sintaks HTML dan sintaks XHTML, yang mirip tetapi tidak identik. Yang mana yang digunakan tergantung pada jenis media yang dikirim oleh server web.

Kemungkinan besar, halaman Anda dilayani text/html, yang mengikuti sintaks HTML yang lebih lunak. Dalam kasus ini, HTML5 memungkinkan tag awal tertentu memiliki opsi / sebelum diakhiri>. Dalam kasus ini, / adalah opsional dan diabaikan, jadi <hr>dan <hr />identik. Spesifikasi HTML menyebut ini "elemen kosong", dan memberikan daftar yang valid. Sebenarnya, opsional / hanya valid dalam tag awal elemen yang tidak berlaku ini; misalnya, <br />dan <hr />HTML5 yang valid, tetapi <p />tidak.

Spesifikasi HTML5 membuat perbedaan yang jelas antara apa yang benar untuk penulis HTML dan untuk pengembang browser web, dengan kelompok kedua diminta untuk menerima semua jenis sintaksis "warisan" yang tidak valid. Dalam hal ini, itu berarti bahwa browser yang mematuhi HTML5 akan menerima tag yang ditutup sendiri secara ilegal, seperti <p />, dan merendernya seperti yang Anda harapkan. Tetapi untuk seorang penulis, halaman itu tidak akan menjadi HTML5 yang valid. (Lebih penting lagi, pohon DOM Anda dapatkan dari menggunakan jenis sintaks ilegal dapat serius kacau; diri tertutup <span />tag, misalnya, cenderung mengacaukan segalanya banyak ).

(Dalam kasus yang tidak biasa bahwa server Anda tahu cara mengirim file XHTML sebagai tipe MIME XML, halaman tersebut harus sesuai dengan XHTML DTD dan sintaks XML. Itu berarti tag penutup diri diperlukan untuk elemen-elemen yang didefinisikan seperti itu.)

Michael Edenfield
sumber
31
<p /> akan diperlakukan sebagai tag pembuka, bukan tag yang ditutup sendiri. Itu berarti seluruh sisa dokumen akan diperlakukan sebagai dalam elemen P. Bukan itu yang saya "harapkan", dan akan menghasilkan kekacauan serius pada halaman yang tidak sepele.
mhsmith
12

HTML5 pada dasarnya berperilaku seolah-olah garis miring tidak ada. Tidak ada tag penutup sendiri dalam sintaksis HTML5.

  • Tag yang menutup sendiri pada elemen non-void seperti <p/>, <div/>tidak akan berfungsi sama sekali. Garis miring trailing akan diabaikan, dan ini akan diperlakukan sebagai tag pembuka. Ini kemungkinan menyebabkan masalah bersarang.

    Ini benar terlepas dari apakah ada spasi putih di depan garis miring: <p />dan <div />juga tidak akan berfungsi karena alasan yang sama.

  • Tag penutup sendiri pada elemen batal suka <br/>atau <img src="" alt=""/> akan berfungsi, tetapi hanya karena garis miring diabaikan, dan dalam hal ini yang terjadi menghasilkan perilaku yang benar.

Hasilnya adalah, apa pun yang bekerja di "XHTML 1.0 lama Anda berfungsi sebagai teks / html" akan terus berfungsi seperti sebelumnya: trailing slash pada tag non-void tidak diterima di sana juga sedangkan slash trailing pada elemen void berfungsi.

Satu catatan lagi: dimungkinkan untuk merepresentasikan dokumen HTML5 sebagai XML, dan ini terkadang dijuluki "XHTML 5.0". Dalam hal ini aturan XML berlaku dan tag penutup diri akan selalu ditangani. Itu selalu harus dilayani dengan tipe mime XML.

thomasrutter
sumber
5

Tag penutup sendiri valid dalam HTML5, tetapi tidak wajib.

<br>dan <br />keduanya baik-baik saja.

Nick
sumber
12
Menurut spec HTML5, sintaksis penutupan sendiri ( />) tidak dapat digunakan pada elemen HTML yang tidak batal.
naXa
3
Pertanyaannya adalah tentang tag penutup diri pada elemen yang tidak kosong , seperti <p/>atau <div/>.
thomasrutter
2
Awalnya pertanyaannya tidak secara khusus tentang elemen non-void. Itu lebih seperti, apakah Anda masih bisa menggunakan <... />seperti di XHTML atau Anda harus menghapus /di HTML5. Pertanyaan berubah beberapa kali setelahnya.
Nick
Either way, jawabannya adalah bahwa slash akan diabaikan, yang akan memecah elemen tidak dinyatakan sebagai batal, tetapi akan kompatibel dengan elemen batal.
thomasrutter
4

Saya akan sangat berhati-hati dengan tag penutup sendiri karena contoh ini menunjukkan:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

Perasaan saya akan <span></span><span></span>sebaliknya

Andreas Herd
sumber
2
Ini dijelaskan dalam jawaban yang diterima:On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
Palec
-1

Namun - hanya untuk catatan - ini tidak valid:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

Dan garis miring di sini akan membuatnya valid lagi:

    <rect width="800" height="400" fill="#000"/>
Leo
sumber
1
Itu karena svg ditulis dalam xml, bukan html. Menggunakan aturan penguraian yang berbeda
Kopi Listrik