Các thẻ tự đóng (không trống) có hợp lệ trong HTML5 không?

Các W3C validator không giống như thẻ tự đóng (những người kết thúc bằng " />") trên phi khoảng trống yếu tố. (Các phần tử trống là những phần tử có thể không bao giờ chứa bất kỳ nội dung nào.) Chúng có còn hợp lệ trong HTML5 không?

Một số ví dụ về các phần tử void được chấp nhận :

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

Một số ví dụ về các yếu tố không trống bị từ chối :

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

Lưu ý: trình xác nhận W3C thực sự chấp nhận các thẻ tự đóng trống: tác giả ban đầu gặp sự cố do lỗi đánh máy đơn giản (\>thay vì/>); tuy nhiên, các thẻ tự đóng không có giá trị 100% trong HTML5 nói chung và các câu trả lời chi tiết về vấn đề các thẻ tự đóng trên các hương vị HTML khác nhau.

• Trong HTML 4 , <foo /(có, hoàn toàn không có >) nghĩa là <foo>(dẫn đến <br />ý nghĩa <br>>(nghĩa là <br>&gt;) và <title/hello/ý nghĩa <title>hello</title>). Đây là một quy tắc SGML mà các trình duyệt đã làm rất kém trong việc hỗ trợ và thông số kỹ thuật khuyên các tác giả nên tránh cú pháp .

• Trong XHTML , <foo />có nghĩa là<foo></foo> . Đây là quy tắc XML áp dụng cho tất cả các tài liệu XML. Điều đó nói rằng, XHTML thường được phục vụ theo text/htmlđó (ít nhất là trong lịch sử) được xử lý bởi các trình duyệt sử dụng trình phân tích cú pháp khác với các tài liệu được phục vụ như application/xhtml+xml. W3C cung cấp các nguyên tắc tương thích để tuân theo XHTML như text/html. (Về cơ bản: Chỉ sử dụng cú pháp thẻ tự đóng khi phần tử được xác định là EMPTY (và thẻ kết thúc bị cấm trong thông số HTML)).

• Trong HTML5 , ý nghĩa của việc <foo /> phụ thuộc vào loại phần tử .

  • Trên các phần tử HTML được chỉ định là phần tử void (về cơ bản là "Một phần tử tồn tại trước HTML5 và bị cấm có bất kỳ nội dung nào"), các thẻ kết thúc chỉ bị cấm. Dấu gạch chéo ở cuối thẻ bắt đầu được cho phép, nhưng không có ý nghĩa. Nó chỉ là đường cú pháp cho những người (và các công cụ tô sáng cú pháp) nghiện XML.
  • Trên các phần tử HTML khác, dấu gạch chéo là một lỗi, nhưng việc khôi phục lỗi sẽ khiến các trình duyệt bỏ qua nó và coi thẻ là thẻ bắt đầu thông thường. Điều này thường sẽ kết thúc với một thẻ kết thúc bị thiếu khiến các yếu tố tiếp theo là trẻ em thay vì anh chị em.
  • Các phần tử nước ngoài (được nhập từ các ứng dụng XML như SVG) coi nó như cú pháp tự đóng.

Như Nikita Skvortsov đã chỉ ra, một div tự đóng sẽ không xác nhận. Điều này là do div là một phần tử bình thường , không phải là phần tử void .

Theo thông số HTML5 , các thẻ không thể có bất kỳ nội dung nào (được gọi là phần tử void ) có thể tự đóng *. Điều này bao gồm các thẻ sau:

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

Tuy nhiên, "/" là hoàn toàn tùy chọn trên các thẻ ở trên, do đó, <img/>không khác biệt <img>, nhưng <img></img>không hợp lệ.

* Lưu ý: các yếu tố nước ngoài cũng có thể tự đóng, nhưng tôi không nghĩ đó là phạm vi cho câu trả lời này.

Trong thực tế, sử dụng các thẻ tự đóng trong HTML sẽ hoạt động như bạn mong đợi. Nhưng nếu bạn lo lắng về việc viết HTML5 hợp lệ , bạn nên hiểu cách sử dụng các thẻ như vậy hoạt động trong hai dạng cú pháp khác nhau mà bạn có thể sử dụng. HTML5 định nghĩa cả cú pháp HTML và cú pháp XHTML, tương tự nhưng không giống nhau. Cái nào được sử dụng phụ thuộc vào loại phương tiện được gửi bởi máy chủ web.

Nhiều khả năng, các trang của bạn đang được phục vụ theo text/html, theo cú pháp HTML nhẹ nhàng hơn. Trong những trường hợp này, HTML5 cho phép các thẻ bắt đầu nhất định có tùy chọn / trước khi kết thúc>. Trong những trường hợp này, / là tùy chọn và bị bỏ qua, do đó <hr>và <hr />giống hệt nhau. Đặc tả HTML gọi các "phần tử void" này và đưa ra một danh sách các phần tử hợp lệ. Nói đúng ra, tùy chọn / chỉ hợp lệ trong các thẻ bắt đầu của các phần tử void này; ví dụ, <br />và <hr />là HTML5 hợp lệ, nhưng <p />không phải.

Thông số HTML5 phân biệt rõ ràng giữa những gì là chính xác cho các tác giả HTML và cho các nhà phát triển trình duyệt web, với nhóm thứ hai được yêu cầu chấp nhận tất cả các loại cú pháp "di sản" không hợp lệ. Trong trường hợp này, điều đó có nghĩa là các trình duyệt tuân thủ HTML5 sẽ chấp nhận các thẻ tự đóng bất hợp pháp, như <p />và hiển thị chúng như bạn có thể mong đợi. Nhưng đối với một tác giả, trang đó sẽ không phải là HTML5 hợp lệ. (Quan trọng hơn, cây DOM bạn nhận được từ việc sử dụng loại cú pháp bất hợp pháp này có thể bị làm hỏng nghiêm trọng; <span />ví dụ, các thẻ tự đóng có xu hướng làm rối tung mọi thứ lên rất nhiều ).

(Trong trường hợp bất thường là máy chủ của bạn biết cách gửi các tệp XHTML dưới dạng loại MIME XML, trang cần phải tuân theo cú pháp XHTML DTD và XML. Điều đó có nghĩa là các thẻ tự đóng được yêu cầu cho các yếu tố được xác định như vậy.)

HTML5 về cơ bản hoạt động như thể dấu gạch chéo không có ở đó. Không có thứ gọi là thẻ tự đóng trong cú pháp HTML5.

• Các thẻ tự đóng trên các phần tử không trống như <p/>, <div/>sẽ không hoạt động. Dấu gạch chéo sẽ bị bỏ qua và chúng sẽ được coi là thẻ mở. Điều này có khả năng dẫn đến các vấn đề làm tổ.

  Điều này đúng bất kể có khoảng trắng phía trước dấu gạch chéo <p />hay không và <div />cũng không hoạt động vì lý do tương tự.

• Các thẻ tự đóng trên các phần tử void như <br/>hoặc <img src="" alt=""/> sẽ hoạt động, nhưng chỉ vì dấu gạch chéo bị bỏ qua và trong trường hợp này xảy ra dẫn đến hành vi đúng.

Kết quả là, mọi thứ hoạt động trong "XHTML 1.0 cũ của bạn được dùng làm văn bản / html" sẽ tiếp tục hoạt động như trước: dấu gạch chéo trên các thẻ không trống không được chấp nhận ở đó trong khi dấu gạch chéo trên các phần tử void hoạt động.

Thêm một lưu ý: có thể biểu diễn một tài liệu HTML5 dưới dạng XML và đôi khi điều này được gọi là "XHTML 5.0". Trong trường hợp này, các quy tắc áp dụng XML và các thẻ tự đóng sẽ luôn được xử lý. Nó sẽ luôn cần được phục vụ với một loại mime XML.

Thẻ tự đóng có giá trị trong HTML5, nhưng không bắt buộc.

<br>và <br />đều ổn cả

Tôi sẽ rất cẩn thận với các thẻ tự đóng vì ví dụ này thể hiện:

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

<span></span><span></span>Thay vào đó, cảm giác ruột của tôi sẽ thay thế

Tuy nhiên -chỉ cho hồ sơ - điều này không hợp lệ:

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

Và một dấu gạch chéo ở đây sẽ làm cho nó hợp lệ trở lại:

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