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

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.}

• 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.

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.

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.)

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.

Tag penutup sendiri valid dalam HTML5, tetapi tidak wajib.

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

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

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"/>