แท็กที่ปิดตัวเอง (ไม่เป็นโมฆะ) ใช้ได้กับ HTML5 หรือไม่

เครื่องมือตรวจสอบ W3Cไม่ชอบแท็กปิดตัวเอง (แท็กที่ลงท้ายด้วย " />") ในองค์ประกอบที่ไม่เป็นโมฆะ (องค์ประกอบที่เป็นโมฆะเป็นองค์ประกอบที่อาจไม่เคยมีเนื้อหาใด ๆ ) พวกเขายังคงใช้งานได้ใน HTML5 หรือไม่?

ตัวอย่างขององค์ประกอบโมฆะที่ยอมรับได้ :

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

ตัวอย่างบางส่วนขององค์ประกอบที่ไม่ใช่โมฆะถูกปฏิเสธ :

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

_{หมายเหตุ:
ตัวตรวจสอบความถูกต้อง W3C ยอมรับแท็กปิดตัวเองเป็นโมฆะ: ผู้เขียนมีปัญหาเนื่องจากการพิมพ์ผิดปกติ ( \>แทน/>); อย่างไรก็ตามแท็กที่ปิดตัวเองนั้นใช้ไม่ได้ 100% ใน HTML5 โดยทั่วไปและคำตอบที่อธิบายรายละเอียดเกี่ยวกับปัญหาของแท็กที่ปิดตัวเองในรสชาติ HTML ต่างๆ}

• ในHTML 4 , <foo /(ใช่ไม่มี>เลย) หมายถึง<foo>(ซึ่งนำไปสู่<br />ความหมาย<br>>(คือ<br>&gt;) และ<title/hello/ความหมาย<title>hello</title>) นี้เป็นSGMLกฎที่เบราว์เซอร์ได้งานที่ดีมากในการสนับสนุนและสเป็คให้คำแนะนำแก่ผู้เขียนที่จะหลีกเลี่ยงไวยากรณ์

• ในXHTML , วิธีการ<foo /> <foo></foo>นี่เป็นกฎXMLที่ใช้กับเอกสาร XML ทั้งหมด ที่กล่าวว่า XHTML มักจะทำหน้าที่เป็นtext/htmlที่ (อดีตอย่างน้อย) application/xhtml+xmlได้รับการประมวลผลโดยใช้เบราว์เซอร์ตัวแยกวิเคราะห์ที่แตกต่างจากเอกสารที่ทำหน้าที่เป็น ของ W3C ให้แนวทางการทำงานร่วมกันที่จะปฏิบัติตามสำหรับ XHTML text/htmlเป็น (พื้นฐาน: ใช้ไวยากรณ์แท็กปิดตัวเองเฉพาะเมื่อองค์ประกอบถูกกำหนดเป็นว่างเปล่า (และแท็กสิ้นสุดถูกห้ามในข้อมูลจำเพาะ HTML))

• ในHTML5ความหมายของขึ้นอยู่กับชนิดขององค์ประกอบ<foo />

  • ในองค์ประกอบ HTML ที่ถูกกำหนดให้เป็นองค์ประกอบโมฆะ (เป็นหลัก "องค์ประกอบที่มีอยู่ก่อน HTML5 และสิ่งต้องห้ามที่มีเนื้อหาใด ๆ ") แท็กปิดท้ายจะถูกห้ามเพียงแค่ อนุญาตให้ใช้เครื่องหมายทับที่ส่วนท้ายของแท็กเริ่มต้น แต่ไม่มีความหมาย มันเป็นเพียงน้ำตาล syntactic สำหรับคน (และเน้นข้อความเน้นข้อความ) ที่ติด XML
  • ในองค์ประกอบ HTML อื่น ๆ เครื่องหมายทับเป็นข้อผิดพลาด แต่การกู้คืนข้อผิดพลาดจะทำให้เบราว์เซอร์ละเว้นและถือว่าแท็กเป็นแท็กเริ่มต้นปกติ ซึ่งมักจะจบลงด้วยแท็กปิดท้ายที่หายไปทำให้องค์ประกอบที่ตามมาเป็นลูกแทนที่จะเป็นพี่น้อง
  • องค์ประกอบภายนอก (นำเข้าจากแอปพลิเคชัน XML เช่น SVG) ถือว่าเป็นไวยากรณ์ที่ปิดตัวเอง

ดังที่ Nikita Skvortsov ชี้ให้เห็น div ที่ปิดตัวเองจะไม่ตรวจสอบความถูกต้อง เพราะนี่คือ div เป็นองค์ประกอบปกติไม่ได้เป็นองค์ประกอบที่เป็นโมฆะ

ตามข้อมูลจำเพาะ HTML5แท็กที่ไม่สามารถมีเนื้อหาใด ๆ (เรียกว่าองค์ประกอบโมฆะ ) สามารถปิดตัวเองได้ * ซึ่งรวมถึงแท็กต่อไปนี้:

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

"/" เป็นตัวเลือกอย่างสมบูรณ์บนแท็กด้านบนดังนั้นจึง<img/>ไม่แตกต่างจาก<img>แต่<img></img>ไม่ถูกต้อง

* หมายเหตุ: องค์ประกอบต่างประเทศสามารถปิดตัวเองได้ แต่ฉันไม่คิดว่ามันอยู่ในขอบเขตสำหรับคำตอบนี้

ในทางปฏิบัติการใช้แท็กปิดตัวเองใน HTML ควรใช้งานได้ตามที่คุณคาดหวัง แต่ถ้าคุณกังวลเกี่ยวกับการเขียนHTML5 ที่ถูกต้องคุณควรเข้าใจว่าการใช้แท็กดังกล่าวทำงานอย่างไรในรูปแบบไวยากรณ์สองแบบที่แตกต่างกันสองแบบที่คุณสามารถใช้ได้ HTML5 กำหนดทั้งไวยากรณ์ HTML และไวยากรณ์ XHTML ซึ่งคล้ายกัน แต่ไม่เหมือนกัน ประเภทใดที่ใช้จะขึ้นอยู่กับประเภทสื่อที่ส่งโดยเว็บเซิร์ฟเวอร์

มากกว่าที่เป็นไปได้ว่าหน้าเว็บของคุณกำลังแสดงผลtext/htmlซึ่งทำตามไวยากรณ์ HTML ที่ผ่อนปรนมากขึ้น ในกรณีเหล่านี้ HTML5 อนุญาตให้แท็กเริ่มต้นบางตัวมี / เป็นตัวเลือกก่อนที่จะยกเลิก> ในกรณีเหล่านี้ / เป็นทางเลือกและละเว้นดังนั้น<hr>และ<hr />เหมือนกัน ข้อมูลจำเพาะ HTML เรียก "องค์ประกอบโมฆะ" เหล่านี้และให้รายการของวัตถุที่ถูกต้อง การพูดอย่างเคร่งครัดตัวเลือก / จะใช้ได้ภายในแท็กเริ่มต้นขององค์ประกอบโมฆะเหล่านี้เท่านั้น ตัวอย่างเช่น<br />และ<hr />เป็น HTML5 ที่ถูกต้อง แต่<p />ไม่ใช่

ข้อมูลจำเพาะ HTML5 สร้างความแตกต่างที่ชัดเจนระหว่างสิ่งที่ถูกต้องสำหรับผู้เขียน HTML และสำหรับนักพัฒนาเว็บเบราว์เซอร์โดยกลุ่มที่สองจะต้องยอมรับไวยากรณ์ "ดั้งเดิม" ที่ไม่ถูกต้องทุกชนิด ในกรณีนี้หมายความว่าเบราว์เซอร์ที่ใช้ HTML5 จะยอมรับแท็กปิดตัวเองที่ผิดกฎหมายเช่น<p />และแสดงผลตามที่คุณคาดหวัง แต่สำหรับผู้เขียนหน้านั้นจะไม่ถูกต้อง HTML5 (ที่สำคัญกว่านั้นคือ DOM ทรีที่คุณได้รับจากการใช้ไวยากรณ์ผิดกฎหมายประเภทนี้สามารถถูกทำให้ผิดพลาดได้อย่างรุนแรง<span />เช่นแท็กที่ปิดตัวเองเช่นมีแนวโน้มที่จะทำสิ่งต่าง ๆเป็นจำนวนมาก )

(ในกรณีที่ผิดปกติที่เซิร์ฟเวอร์ของคุณรู้วิธีส่งไฟล์ XHTML เป็นประเภท XML MIME หน้าจะต้องสอดคล้องกับ XHTML DTD และไวยากรณ์ XML ซึ่งหมายความว่าจำเป็นต้องใช้แท็กปิดตัวเองสำหรับองค์ประกอบที่กำหนดเช่นนี้)

HTML5 โดยทั่วไปจะทำงานราวกับว่ามีการทับส่วนท้ายไม่ได้อยู่ที่นั่น ไม่มีแท็กปิดตัวเองในไวยากรณ์ HTML5

• แท็กปิดตัวเองเมื่อไม่เป็นโมฆะองค์ประกอบเช่น<p/>, <div/>จะไม่ทำงานเลย เครื่องหมายสแลชต่อท้ายจะถูกละเว้นและสิ่งเหล่านี้จะถือเป็นแท็กเปิด สิ่งนี้มีแนวโน้มที่จะนำไปสู่ปัญหาการซ้อน

  นี่เป็นเรื่องจริงโดยไม่คำนึงว่ามีช่องว่างอยู่หน้าเครื่องหมายทับหรือไม่: <p /><div />หรือไม่และก็จะไม่ทำงานด้วยเหตุผลเดียวกัน

• แท็กปิดตัวเองในองค์ประกอบที่เป็นโมฆะเช่น<br/>หรือ<img src="" alt=""/> จะทำงานได้ แต่เพียงเพราะเครื่องหมายสแลชต่อท้ายถูกละเว้นและในกรณีนี้ที่เกิดขึ้นกับผลลัพธ์ในพฤติกรรมที่ถูกต้อง

ผลลัพธ์คืออะไรก็ตามที่ทำงานใน "XHTML 1.0 ที่ทำหน้าที่เป็นข้อความ / html" เก่าของคุณจะทำงานต่อไปเหมือนที่เคยทำมา: การต่อท้ายสแลชบนแท็กที่ไม่เป็นโมฆะไม่ได้รับการยอมรับเช่นกัน

อีกหนึ่งหมายเหตุ: เป็นไปได้ที่จะแสดงเอกสาร HTML5 เป็น XML และบางครั้งก็ขนานนามว่า "XHTML 5.0" ในกรณีนี้กฎของ XML ที่ใช้และแท็กปิดตัวเองจะได้รับการจัดการเสมอ มันจะต้องได้รับการบริการด้วยประเภท XML mime

แท็กที่ปิดตัวเองนั้นใช้ได้ใน HTML5 แต่ไม่จำเป็น

<br>และ<br />ทั้งคู่ก็โอเค

ฉันจะระมัดระวังอย่างมากกับแท็กปิดตัวเองเนื่องจากตัวอย่างนี้แสดงให้เห็น:

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

ความรู้สึกของฉันจะถูก<span></span><span></span>แทนที่

อย่างไรก็ตาม - เพียงแค่สำหรับการบันทึก - สิ่งนี้ไม่ถูกต้อง:

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

และเครื่องหมายทับที่นี่จะทำให้ใช้ได้อีกครั้ง:

    <rect width="800" height="400" fill="#000"/>