(무효) 자체 폐쇄 태그가 HTML5에서 유효합니까?

W3C 유효성 검사기는 자동 폐쇄 태그 (와 그이를 "처럼하지 않습니다 />에") void 이외의 요소. (공백 요소는 내용을 포함하지 않을 수있는 요소입니다.) HTML5에서도 유효합니까?

허용되는 void 요소 의 몇 가지 예 :

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

거부 되지 않은 무효 요소 의 몇 가지 예 :

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

_{참고 :
W3C 유효성 검사기는 실제로 void 자체 닫기 태그를 허용합니다. 작성자는 원래 간단한 오타 () \>대신 문제가있었습니다 />. 그러나 자체 폐쇄 태그는 일반적으로 HTML5에서 100 % 유효하지 않으며 다양한 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. (필수적으로 : 요소가 EMPTY로 정의되고 HTML 태그에서 종료 태그가 금지 된 경우에만 자체 닫기 태그 구문을 사용하십시오).

• 에서 HTML5 의 의미는 <foo /> 요소의 유형에 따라 달라집니다 .

  • void 요소 로 지정된 HTML 요소 (본질적으로 "HTML5 이전에 존재했으며 내용이 금지 된 요소")에서 종료 태그는 단순히 금지됩니다. 시작 태그의 끝에 슬래시는 허용되지만 의미는 없습니다. XML에 중독 된 사람 (및 구문 강조 표시 자)의 구문 설탕 일뿐입니다.
  • 다른 HTML 요소에서 슬래시는 오류이지만 오류 복구로 인해 브라우저에서이를 무시하고 태그를 일반 시작 태그로 취급합니다. 일반적으로 후속 태그가 형제 대신 하위 요소가되는 종료 태그가 누락됩니다.
  • SVG와 같은 XML 응용 프로그램에서 가져온 외부 요소는이 요소를 자체 닫기 구문으로 처리합니다.

Nikita Skvortsov가 지적했듯이 자체 결산 사업부는 유효성을 검사하지 않습니다. 이는 div가 void 요소가 아닌 일반 요소 이기 때문 입니다.

HTML5 spec 에 따르면 , 어떤 내용도 가질 수없는 태그 ( void elements )는 자체 닫힘 *이 될 수 있습니다. 여기에는 다음과 같은 태그가 포함됩니다.

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 사양에서는 이러한 "void elements"를 호출하고 유효한 요소 목록을 제공합니다. 엄밀히 말하면, 선택적 /은 이러한 void 요소의 시작 태그 내에서만 유효합니다. 예를 들어, <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"/>