공백이 아닌 태그가 HTML5에서 유효한가요?

공백이 아닌 태그가 HTML5에서 유효한가요?

---

W3C 유효성 검사기는 자동 폐쇄 태그 (와 그이를 "처럼하지 않습니다 />에") void 이외의 요소. (Void 요소는 콘텐츠를 포함 할 수없는 요소입니다.) HTML5에서도 여전히 유효합니까?

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

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

거부 된 무효가 아닌 요소 의 몇 가지 예 :

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

참고 : W3C 유효성 검사기는 실제로 무효 자체 닫는 태그를 허용합니다. 작성자는 원래 간단한 오타 (\>대신/>) 때문에 문제가있었습니다 . 그러나 자동 종료 태그는 일반적으로 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는 유효성을 검사하지 않습니다. 사업부가 있기 때문이다 일반적인 요소 가 아닌 무효 요소 .

HTML5 사양 에 따르면 콘텐츠를 포함 할 수없는 태그 ( void 요소 라고 함 )는 자동으로 닫힐 수 있습니다 *. 여기에는 다음 태그가 포함됩니다.

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 요소의 시작 태그 내에서만 유효합니다. 예를 들어, <br />및 <hr />유효 HTML5, 그러나 <p />아니다.

HTML5 사양은 HTML 작성자와 웹 브라우저 개발자에게 올바른 것이 무엇인지 명확하게 구분합니다. 두 번째 그룹은 모든 종류의 잘못된 "레거시"구문을 허용해야합니다. 이 경우 HTML5 호환 브라우저가과 같은 불법 자체 닫힘 태그를 허용하고 <p />예상대로 렌더링 함을 의미합니다. 그러나 저자에게는 해당 페이지가 유효한 HTML5 가 아닙니다 . (더 중요한 것은 이러한 종류의 불법 구문을 사용하여 얻은 DOM 트리가 심각하게 망가질 수 있다는 것입니다. <span />예를 들어 자체 폐쇄 태그는 일을 많이 엉망으로 만드는 경향이 있습니다 ).

(서버가 XHTML 파일을 XML MIME 유형으로 보내는 방법을 알고있는 비정상적인 경우 페이지는 XHTML DTD 및 XML 구문을 준수해야합니다. 즉 , 이와 같이 정의 된 요소에 대해 자체 닫기 태그가 필요 합니다.)

---

HTML5는 기본적으로 후행 슬래시가없는 것처럼 작동합니다. HTML5 구문에는 자동으로 닫히는 태그가 없습니다.

• 에 태그를 자동 폐쇄 되지 않은 무효 등의 요소 <p/>, <div/>전혀 작동하지 않습니다. 후행 슬래시는 무시되며 여는 태그로 처리됩니다. 이로 인해 중첩 문제가 발생할 수 있습니다.

  이 여부에 관계없이 사실이다 슬래시 앞에 공백이있다 : <p />과 <div />같은 이유로 작동하지 않습니다.

• Self-closing tags on void elements like <br/> or <img src="" alt=""/> will work, but only because the trailing slash is ignored, and in this case that happens to result in the correct behaviour.

The result is, anything that worked in your old "XHTML 1.0 served as text/html" will continue to work as it did before: trailing slashes on non-void tags were not accepted there either whereas the trailing slash on void elements worked.

One more note: it is possible to represent an HTML5 document as XML, and this is sometimes dubbed "XHTML 5.0". In this case the rules of XML apply and self-closing tags will always be handled. It would always need to be served with an XML mime type.

---

Self-closing tags are valid in HTML5, but not required.

<br> and <br /> are both fine.

---

I would be very careful with self closing tags as this example demonstrates:

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

My gut feeling would have been <span></span><span></span> instead

---

However -just for the record- this is invalid:

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

And a slash here would make it valid again:

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

참고URL : https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5