html 태그가 닫혀 있습니까?
HTML5 코드를 작성할 때
또는
를 써야 하는지, 또는 을 써야 하는지 궁금해하신 적이 있나요? 라고 쓰는 것이 왜 잘못된 걸까요? 어쨌든 고민을 하다가 이 주제가 실제로 생각했던 것보다 훨씬 더 흥미롭다는 걸 알게 됐어요.
제 연구 과정에 관심이 없으시면 "합법성" 섹션으로 바로 이동하여 답을 얻으실 수 있습니다.
보이드 요소
콘텐츠가 없는 요소는 콘텐츠를 포함할 수 없는 특수 요소입니다.
와 같은 다른 요소는 내용을 포함하지 않거나 다른 요소나 텍스트를 포함할 수 있습니다.
콘텐츠가 없는 가장 일반적인 요소는 다음과 같습니다.
<링크>
덜 일반적인 콘텐츠 없는 요소는 다음과 같습니다.
<영역> <열>
<트랙>
이것들은 모두 기존의 콘텐츠 없는 요소입니다.
는 br이 콘텐츠를 포함할 수 있음을 암시하므로 합법적인 HTML이 아닙니다(그러나
Hello!는 전혀 의미가 없습니다).
및
XHTML을 사용하면
를 작성해야 한다는 사실은 모두가 알고 있지만 HTML에는 명시적인 요구 사항이 없습니다.
추적 내역
내용 없는 요소를 완전히 이해하려면 그 역사를 이해할 필요가 있습니다.
HTML, XML, XHTML은 모두 SGML을 기반으로 합니다. SGML의 전체 이름은 1986년에 초안이 작성된 "Standard General Markup Language"입니다.
HTML과 XML은 모두 SGML에서 파생됩니다. 여기서 XML은 SGML의 제한된 하위 집합이고 XHTML은 XML을 기반으로 합니다.
XHTML은 기본적으로 HTML과 동일하지만 XML을 기반으로 합니다.
이 관계를 알고 나면 이 기사의 가장 흥미로운 부분으로 넘어가겠습니다.
SGML에는 "Null End Tag(NET)"이라는 기능이 있습니다. 레이블에 간단한 텍스트만 있는 경우 꼬리가 없는 레이블을 사용하면 레이블을 닫을 필요가 없습니다. 예를 들어 인용된 텍스트
를 가 포함되어 있지 않습니다.)
그런 다음 아무 내용도 포함하지 않는 태그는
이 논리에 따라
불행하게도 HTML4 사양의 작성자는 그렇게 생각하지 않고 이를 사양에 작성했습니다. 그러나 당시 브라우저 제조업체는 이 구문을 심각하게 받아들이지 않았으며 이를 크게 지원하지 않았음이 분명합니다. (이쯤 되면 브라우저 제조사들이 좋은 일을 했을지도 모르겠습니다.)
XML(XHTML에도 적용 가능) 사양 작성자는 이 구문이 그다지 좋지 않다는 것을 깨닫고 꼬리 없는 태그 기능을 포함하지 않았습니다.
다행스럽게도 HTML은 지속적으로 개선되고 있으며 W3C 회원들은 과거에 저지른 실수로부터 배우고 있습니다. 이것이 바로 HTML5가 이전 버전에 비해 엄청난 발전을 이룬 이유입니다.
W3C는 HTML5의 새로운 구문을 소개하면서 다음과 같이 말했습니다.
HTML5의 구문은 HTML4 및 XHTML1과 완벽하게 호환되지만 SGML의 모호한 HTML4 기능과는 호환되지 않습니다. 예를 들어 tail 태그(
HTML5 잘했어요!
(저는 Nice와 같은 "짧은 태그" 기능을 유지해야 한다고 생각합니다. 이것이 멋지다고 생각합니다. 하지만 적어도 HTML은 이제 덜 복잡해졌습니다.)
자, 기사 시작 부분의 합법성에 대한 질문으로 돌아가 보겠습니다. 현재 HTML5 사양의 비콘텐츠 태그에 대한 설명은 다음과 같습니다.
이러한 태그는 아래 표와 동일한 순서로 다음 부분으로 구성되어야 합니다.
"<" 문자입니다.
태그 이름.
이 항목은 선택 사항입니다. 하나 이상의 속성이 있으며, 각 속성 앞에는 하나 이상의 공백이 있어야 합니다.
이는 선택 사항이며 하나 이상의 공백입니다.
이 항목은 선택사항이며 "/" 문자입니다. 이 항목은 콘텐츠가 없는 요소에만 나타날 수 있습니다.
">" 문자입니다.
끝에서 두 번째 부분의 "/" 문자는 선택 사항이며 실제 의미는 없습니다. 따라서
XML과 XHTML을 좋아하는 개발자는 "예, /는 선택 사항이지만
당신이 틀렸다는 것을 말해야겠습니다. 실제로 일부에서는 / in contentless 태그는 실제로 허용되는 문법 오류라고 주장합니다. 이 허용 범위는 호환성 고려 사항을 기반으로 하며, 이로 인해 모든 브라우저와 파서는
이 점에 대해 Google의 코드 스타일 가이드에도 content-free 태그를 닫지 말라고 명확하게 규정하고 있습니다.
물론, 내용이 없는 태그를 닫지 않는 것에는 단점도 있지만, 이것이 코드를 깔끔하고 간결하게 만든다는 장점을 가릴 수는 없을 것 같습니다.
첫 번째 단점은 개발자가 콘텐츠 태그가 없는 태그를 알아야 한다는 것입니다.
두 번째 단점은 편집기가 닫히지 않은 콘텐츠 없는 태그를 잘 처리하지 못할 수 있다는 것입니다. 편집기 개발자는 콘텐츠가 없는 태그를 이해하고 적절한 구문 강조 및 코드 완성을 제공해야 합니다. 편집기에서 을 작성할 때 편집자는 그 뒤에 이 절대 오지 않는다는 것을 알아야 합니다.
하지만 이러한 기능은 구현하기가 매우 간단하고, 제가 아는 편집기에서는 이 부분을 꽤 잘 지원하므로 이는 실제로 단점은 아닙니다.
콘텐츠 없는 태그의 개념은 실제로 HTML에서 제거될 수 있다고 생각합니다. 이러한 태그에 콘텐츠를 추가하여 일부 속성을 대체할 수 있습니다.
예를 들어
내 질문은: 왜 alt 속성 대신
태그에는 content라는 속성도 있습니다! 콘텐츠 값을 태그 콘텐츠에 직접 쓰면 어떨까요? 는
로 구문 분석되면
는
>로 구문 분석되지 않습니까? 당신이 나처럼 생각한다면, 당신은 또한 이 구문이 멍청하다고 생각할 것입니다.
동시에 내용이 없는 태그에 대해 비교적 이해하기 쉬운 구문을 제공합니다. 이 구문의 이름은 "요소 없는 태그"이며 다음과 같습니다:
. 이 구문은 너무 자연스러워서 당시 대부분의 개발자는 이것이 올바른 작성 방법이라고 생각했습니다.
적법성
와
사이에는 실제로 아무런 차이가 없습니다.
정확성
가 '더 정확합니다'"라고 말할 수 있습니다.
및
단점
가 콘텐츠 없는 태그인지 모른다고 가정하고 닫는 태그를 찾을 수 없으면 이 태그를 닫아야 할지 궁금할 것입니다. 하지만, 컨텐츠 없는 태그는 전체적으로 몇 개 밖에 되지 않으며, 일반적으로 특정 태그가 컨텐츠 없는 태그인지 한눈에 알 수 있습니다.
컨텐츠 프리 태그에 대한 나의 생각
태그에는 필수 alt 속성이 있습니다. 이 속성은 사용자가 물리적인 결함으로 인해 또는 사용 중인 장치가 이미지를 지원하지 않는 경우를 방지하기 위해 존재합니다. (만약 이미지가 단지 미학적 이유일 경우에는 alt 속성을 추가하면 안 됩니다).
의 내용을 사용하지 않습니까? 이렇게 쓰는 게 더 직관적인 것 같아요:
총독의 이미지.