주요 브라우저에서 구현 한 XHTML의 모든 유효한 자동 폐쇄 요소는 무엇입니까?


188

XHTML의 모든 주요 자동 폐쇄 요소 (예 : <br/>)는 무엇입니까?

XHTML은 기술적으로 모든 요소를 ​​자동으로 닫을 수 있지만 모든 주요 브라우저에서 지원하는 요소 목록을 찾고 있습니다. <div />와 같은 자체 폐쇄 요소로 인한 일부 문제의 예는 http://dusan.fora.si/blog/self-closing-tags 를 참조 하십시오 .


7
이것이 XHTML의 목적 중 하나가 기본값이 아닙니까? XHTML의 장점 중 하나는 XML 생성기를 사용하여 HTML을 생성 할 수 있다는 것입니다. XML 생성기가 자동 종료가 허용되는 태그를 알고있는 이유는 무엇입니까? 너무 이상한.
Elijah

6
"불명예", "잘못된"대답이 받아 들여진 이유는 kamens가 분명히 묻는 질문에 대답했기 때문입니다. 그는 브라우저에서 렌더링 문제를 일으키지 않고 XHTML을 텍스트 / html로 제공 할 때 어떤 요소를 자동으로 닫을 수 있는지 알고 싶었습니다. 많은 페이지가 XHTML로 작성되었으며 기술적으로 올바르지는 않지만 텍스트 / html로 제공됩니다. 이 설명을 통해 질문을 개선 할 수는 있지만 다른 인스턴스 (응용 프로그램 / xml로 제공 될 때 발생하는 상황 또는 text / html의 단일 태그에 닫는 /가 있어야하는지 여부)에 대답하는 것은 도움이되지 않습니다.
Nick Lockwood

답변:


180

XHTML (Firefox, Opera, Safari, IE9 )을 지원 하는 모든 브라우저는 모든 요소 에서 자체 폐쇄 구문을 지원합니다 .

<div/>, <script/>, <br></br>모두 잘 작동합니다. 그렇지 않은 경우 XHTML DOCTYPE이 부적절하게 추가 된 HTML 이 있습니다.

DOCTYPE은 문서 해석 방법을 변경하지 않습니다. MIME 형식 만 수행 합니다.

DOCTYPE 무시에 대한 W3C 결정 :

HTML WG는이 문제에 대해 논의했습니다. 구식 (HTML 전용) 브라우저가 지침에 따라 XHTML 1.0 문서를 수락하고이를 텍스트 / html로 제공하도록하는 것이 었습니다. 따라서 text / html로 제공되는 문서는 XHTML이 아닌 HTML로 처리해야합니다.

W3C Validator는이 규칙을 대부분 무시하지만 브라우저는 종교적으로 따르기 때문에 매우 일반적인 함정입니다. WebKit 블로그에서 HTML, XML 및 XHTML 이해를 읽으십시오 .

실제로 인터넷에있는 대부분의 XHTML 문서는로 제공됩니다 text/html. 이는 XHTML이 아니라 HTML 파서의 오류 처리로 인해 실제로 유효하지 않은 HTML을 의미합니다. 모든 "유효한 XHTML 1.0!" 웹의 링크는 실제로 "잘못된 HTML 4.01!"이라고 말합니다.


XHTML의 DOCTYPE을 사용하여 실제 XHTML 또는 유효하지 않은 HTML이 있는지 테스트하려면 다음을 문서에 넣으십시오.

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

그것은 유효성을 검사하고 실제 XHTML에서는 완벽하게 작동합니다 ( 12 참조 ). 눈을 믿을 수 없거나 MIME 유형을 설정하는 방법을 모르는 경우 XHTML 프록시 를 통해 페이지를여십시오 .

확인하는 또 다른 방법은 Firefox에서 소스보기입니다. 유효하지 않으면 슬래시가 빨간색으로 강조 표시됩니다.

HTML5 / XHTML5에서는 변경되지 않았으며 추가 사항이 없기 때문에 구별이 더 명확 DOCTYPE합니다. Content-Type왕입니다.


기록을 위해, XHTML 스펙은 XHTML을 XML 애플리케이션 으로 만들어 어떤 요소가 자체적으로 닫힐 수 있도록합니다 . [emphasis mine]

빈 요소 태그는 키워드 EMPTY를 사용하여 선언되는지 여부에 관계 없이 content가없는 모든 요소에 사용될 수 있습니다 .

또한 XHTML 사양 에 명시 적으로 표시됩니다 .

빈 요소가 있어야 하거나 종료 태그 또는로 끝나야 시작 태그가 />. 예를 들어, <br/>또는<hr></hr>


7
자체 결산 버전을 사용 <script>하거나 <div>다른 렌더링 / 통역이 발생 하므로 afaik을 수정하지 마십시오 .
ZeissS

13
@ZeissS 에서만 사용할 수 있습니다 text/html. 실제 XHTML에서는 application/xhtml+xml제대로 작동하므로 전송됩니다 . 다운 보트하기 전에 내가 링크 한 기사 (또는 XHTML 사양 부록 C)를 읽으십시오.
Kornel

3
@pornel 자동 종료 <script /> 태그가 이전 브라우저에서 작동한다는 것을 보증 할 수 있습니까? 나는 그렇게 생각하지 않습니다. 당신은 권위가 있고, 대부분의 정보는 정확하지만, 경험에 따르면 자체 닫기 스크립트 태그는 문제가 될 수 있으며 두통을 피하기보다는 완전히 피하는 것이 가장 좋습니다.
Metagrapher

6
@Metagrapher 구형 브라우저가 실제 XHTML을 지원하지 않거나 MIME 유형을 설정 하지 않으면 작동하지 않습니다. 그러나 MIME 유형의 XHTML 지원 브라우저 (이 시점의 모든 주요 브라우저) 에서application/xhtml+xml<script/> 작동 한다는 것을 보장 할 수 있습니다. MIME 타입으로. 뿐.
Kornel

4
@capdragon : 이전 브라우저는 XHTML ( 'application / xhtml + xml'로 제공)을 지원하지 않습니다. XHTML 문서를 'text / html'로 보내면 XHTML은 태그 수프로 렌더링됩니다 (예 : 브라우저는 HTML로 구문 분석하고 자동 종료 태그 오류를 고려하여 정상적으로 복구합니다). 옵션은 1. HTML 4 작성 (XHTML을 렌더링하는 ASP.NET을 사용하는 경우 정확히 옵션이 아님) 2. XHTML을 'application / xhtml + xml'로 제공 (IE9 + 필요)이 MIME 유형은 모든 브라우저에서 스크립트를 중단합니다 어쨌든, 그래서 옵션을 정의하지 마십시오), 3. 기본적으로 태그 수프를 표준으로 만드는 HTML 5 작성 :)
Triynko

41

이 주제에서 매우주의해야 할 요소는 <script> 요소입니다. 외부 소스 파일이 있으면 직접 닫을 때 문제가 발생합니다. 시도 해봐:

<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />

이것은 Firefox에서는 작동하지만 최소한 IE6에서는 작동하지 않습니다. 내가 본 모든 요소를 ​​지나치게 열심히 닫을 때이 문제가 발생했기 때문에 알고 있습니다.


모든 MSIE 버전에 영향을 webbugtrack.blogspot.com/2007/08/...
scunliffe

4
<script> 않습니다 파이어 폭스 3에서하지 자기 가까이
hsivonen

글쎄, 그것은 Firefox를 만났을 때 Firefox에서 작동했습니다. 더 이상 브라우저에서 작동하지 않는 것 같습니다. 아마도 쿼크 모드에서만 작동 할 수 있습니까?
Erik van Brakel

1
@erickson MIME 형식을 올바르게 사용 하면 Firefox에서 제대로 작동합니다 .
Kornel

WebKit은 호환성을 위해 계속합니다.
Yuhong Bao

35

자체 닫기 구문은 application / xhtml + xml의 모든 요소에서 작동합니다. text / html의 요소에서는 지원되지 않지만 HTML4에서 "비어 있음"또는 HTML5에서 "void"인 요소는 어쨌든 종료 태그를 사용하지 않으므로 슬래시를 넣으면 마치 자체 결산 구문이 지원되었습니다.


33

로부터 W3 학교 참조 사이트 :

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

7
w3schools.com/tags/default.asp 12 태그로 끝나는 것을 봅니다 />:"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"
mpen

94
W3schools는 W3C와 관련이 없으며 W3C 회원이 보낸 수정 사항에 응답하지 않습니다.
Kornel

2
자주 w3schools는 거의 옳습니다. 빈 요소를 찾을 수있는 정확한 방법은 다음을 수행하는 것입니다 grep EMPTY xhtml1-strict.dtd | sort또는grep EMPTY xhtml1-transitional.dtd | sort
cayhorstmann

1
IMHO, 사람들은 W3Schools를 너무 열심히 강타합니다. 그것은 당신이 모르는 주제에 대해 시작할 때 (!) 좋은 자원임을 입증했습니다.
Priidu Neemre

28

더 좋은 질문은 코드에 영향을주지 않고 HTML 모드에서도 어떤 태그를 자동으로 닫을 수 있는가하는 것입니다. 답 : 빈 내용물이있는 것 (무효)입니다. HTML 사양 에 따르면 다음 요소는 무효입니다.

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

이전 버전의 사양도 나와 있습니다 command. 또한 다양한 출처에 따라 다음과 같이 사용되지 않거나 표준이 아닌 태그는 무효입니다.

basefont, bgsound, frame, isindex


10

이것이 누군가를 돕기를 바랍니다.

<base />
<basefont />
<frame />
<link />
<meta />

<area />
<br />
<col />
<hr />
<img />
<input />
<param />

5

무엇에 대한 <meta>그리고 <link>? 왜 그들은 그 목록에 없습니까?

빠른 경험 법칙은 콘텐츠를 가지고있는 요소를 자동으로 닫지 마십시오. 곧 브라우저 문제가 발생할 수 있기 때문입니다.

자연스럽게 같은 자동 폐쇄,있는 사람 <br>과는 <img>분명해야한다. 그렇지 않은 사람들은 ... 그들을 스스로 닫지 마십시오!


4

마지막으로 확인했을 때 다음은 HTML5에 나열된 비어 있거나 비어있는 요소입니다.

작성자에게 해당 : area, base, br, col, command, embed, eventsource, hr, img, input, link, meta, param, source

작성자에게 유효하지 않음 : basefont, bgsound, frame, spacer, wbr

HTML5의 새로운 기능 외에도 XHTML을 텍스트 / html로 제공 할 때 지원 될 수있는 아이디어를 제공해야합니다. (단순히 생성 된 DOM을 검사하여 테스트하십시오.)

XHTML이 application / xhtml + xml (XML로 만들어 짐)로 제공되는 경우 XML 규칙이 적용되며 모든 요소가 비어있을 수 있습니다 (XHTML DTD가이를 표현할 수는 없지만)


4

xHTML DTD를 살펴보면 모두 나열되어 있습니다. 다음은 모든 주요 내용을 빠르게 검토하는 것입니다.

<br />
<hr />
<img />
<input />

1
마크 업 수정 및 정리 이 페이지의 링크를 조심스럽게 사용하면로드 속도가 느립니다.
전자

4

이를 HTML 5에서 "void"요소라고합니다. 공식 W3 spec에 나열되어 있습니다.

void 요소는 컨텐츠 모델이 어떤 상황에서도 컨텐츠를 가질 수없는 요소입니다.

2013 년 4 월 기준으로 다음과 같습니다.

지역, 자료, br, 열, 명령, 포함, 시간, img, 입력, keygen, 링크, 메타, 매개 변수, 소스, 트랙, wbr

2018 년 12 월 (HTML 5.2) 기준은 다음과 같습니다.

지역, 자료, br, 열, 포함, 시간, img, 입력, 링크, 메타, 매개 변수, 소스, 트랙, wbr


2

IE의 또 다른 자체 닫는 태그 문제는 title 요소입니다. IE (방금 IE7에서 시도한 경우)에서이를 볼 때 사용자에게 빈 페이지를 표시합니다. 그러나 "소스보기"와 모든 것이 있습니다.

<title/>

XSLT에서 자체 결산 태그를 생성 할 때 원래 이것을 보았습니다.


Chromium은 <title/>태그를 좋아하지 않습니다 .
uınbɐɥs

2

필자가 작성한 대부분의 페이지가 생성되거나 태그에 내용이 있기 때문에 특히 과도하게 설명하지 않을 것입니다. 자동 폐쇄시 문제를 일으킨 유일한 사람은 다음과 같습니다.

<title/>

이를 위해 항상 별도의 닫는 태그를 지정하는 것에 의지했습니다. 일단 태그가 올라간 <head></head>후에는 코드가 더 이상 어수선하지 않습니다.

<script/>

이것은 내가 최근에 문제를 겪었던 가장 큰 것입니다. 몇 년 동안 <script/>스크립트가 외부 소스에서 나올 때 항상 자체 닫는 태그를 사용했습니다 . 그러나 최근에는 null 형식에 대한 JavaScript 오류 메시지를 받기 시작했습니다. 며칠간의 연구 끝에, 문제는 (아마도) 이것이 브라우저가 <form>태그의 끝이라는 것을 인식하지 못했기 때문에 태그에 도달하지 못하는 것으로 나타났습니다 <script/>. 그래서 별도의 <script></script>태그로 만들면 모든 것이 작동했습니다. 같은 브라우저에서 만든 다른 페이지가 다른 이유는 모르겠지만 솔루션을 찾는 것이 큰 도움이되었습니다!


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.