HEAD, BODY 및 HTML 태그를 작성해야합니까?


194

그것은 쓸 필요가있다 <html>, <head>그리고 <body>태그?

예를 들어, 나는 그런 페이지를 만들 수 있습니다 :

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

Firebug는 머리와 몸을 올바르게 분리합니다. 여기에 이미지 설명을 입력하십시오

W3C 유효성 검사에 따르면 유효합니다.

그러나 나는 웹 에서이 관행을 거의 보지 못합니다.

이 태그를 작성해야 할 이유가 있습니까?


5
html5.validator.nu 의 HTML5 유효성 검사기 는 title태그 가 필요합니다 . 이것은 유효한 것으로 간주되는 가장 작은 문서입니다 :<!DOCTYPE html> <title>A</title>
bonh

답변:


142

HTML 사양 html에서는 head, 및 body 태그를 생략 할 수 있습니다. 근본적인 이유는 브라우저가 항상 기존 웹 페이지와 일관성을 유지하려고 노력했기 때문이며 HTML의 초기 버전에서는 이러한 요소를 정의하지 않았습니다. HTML 일 때2.0 먼저 태그가 누락되었을 때 유추되는 방식으로 수행되었습니다.

프로토 타이핑 할 때, 특히 테스트 사례를 작성할 때 태그가 문제가되는 테스트에 집중하도록하는 데 도움이되므로 태그를 생략하는 것이 편리하다는 것을 종종 알았습니다. 추론 프로세스 Firebug에서와 동일한 방식으로 요소를 작성 해야 하며 브라우저는이를 일관성있게 수행해야합니다.

그러나...

IE에는이 영역에 알려진 버그가 하나 이상 있습니다. IE9조차도 이것을 보여줍니다. 마크 업이 다음과 같다고 가정하십시오.

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

다른 브라우저에서 다음과 같은 DOM을 가져와야합니다.

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

그러나 IE에서는 다음을 얻습니다.

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

직접 참조하십시오.

이 버그는 form텍스트 내용과 시작 태그 앞에있는 시작 태그로 제한됩니다 body.


5
HTML 1.0 정의 HTML, HEAD 및 BODY : w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly

6
@Liza-문서가 HTML 1.0을 정의하는지 여부는 논쟁의 여지가 있지만 HTML 2.0 이전의 요소는 수정되었습니다. 감사. 그러나 1992 년 w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… 를 참조하십시오 . 그러면 요소가 존재하지 않습니다.
Alohci

1
이 버그는 Internet Explorer 11에 영향을 미치지 않는 것 같습니다 (내가 영향을받는 것으로 확인 된 IE8도 테스트했습니다)
jornane

2
@Justin-이러한 제한은 대부분 기술적이며 일반적으로 귀하에게 영향을 미치지 않습니다. 그렇습니다. 코멘트 노드 또는 공백이 헤드 요소 바로 앞에 또는 그 내부에 나타나는지 여부에 관계없이 (페이지의 JS 가 여기에 의존 할 수 있음) 관계가 올바른지 확인하려면 헤드 시작 태그를 명시 적으로 식별해야합니다. . 그러나 그렇지 않은 경우 (그리고 아직 HTML 페이지를 작성하지 않은 경우) 헤드 태그가 합리적인 위치에서 유추되어 안전하게 생략 할 수 있습니다. 다른 html, head 및 body 태그도 마찬가지입니다.
Alohci

3
@Justin이 답변은 "HEAD, BODY 및 HTML 태그를 작성해야합니까?"라는 질문에 대한 단서가있는 것 같습니다. 좋은 습관인지 아닌지 컨벤션이 바뀌는 경향이 있습니다 ... 구글 스타일 가이드를 살펴보세요 ... 이 태그를 생략 해야하는 컨벤션입니다 ... :-)
Potherca

77

HTML 용 Google 스타일 가이드는 모든 선택적 태그를 생략 할 것을 권장합니다.
포함 <html>, <head>, <body>, <p><li>.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

파일 크기 최적화 및 스캔 가능성을 위해 선택적 태그를 생략하십시오. HTML5 사양은 생략 할 수있는 태그를 정의합니다.

(이 접근 방식은 웹 개발자가 일반적으로 가르치는 내용과 크게 다르기 때문에 유예 기간을 더 넓은 지침으로 설정해야 할 수도 있습니다. 일관성과 단순성을 위해 선택 사항뿐만 아니라 모든 선택적 태그를 생략하는 것이 가장 좋습니다.)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

2
비 호환성 예 : 웹 개발 (푸어)에 사용하는 라이브 재로드 도구가 자동으로 스크립트를 헤드에 삽입합니다. <head> 태그가 없으면 작동하지 않습니다.
Offirmo

@ Offirmo 지구상에서 무엇입니까?
Ken Sharp

@KenSharp livereload 웹 개발 도구는 일반적으로 다음과 같이 제공된 페이지에 코드를 삽입하여 작동합니다 <script src="http://localhost:35729/livereload.js"></script>. 이국적인 템플릿의 경우 코드를 어디에 삽입해야하는지 이해하지 못합니다.
Offirmo

1
@Offirmo livereload 설명서에는 해당 스크립트를 클라이언트 페이지에 직접 추가해야한다고 나와 있습니다. 아마도 당신을 위해 그것을하는 마법의 라이브러리를 사용하고있을 것입니다. 그것이 당신이 겪고있는 어려움의 근원이되어야합니다.
kequc

7
가능한 모든 태그를 생략하는 것은 페니와 현명한 어리석은 일입니다. 대역폭 절감은 아주 적습니다 (특히 대부분의 연결이 자동 압축되기 때문에). 경우에 따라 사람이 실수 할 가능성이 높습니다 (작성자, 편집자 및 HTML 파서 작성자 고려). 엔트로피의 변화로 인해 오류를 찾기가 더 어렵습니다.
TextGeek

48

HTML5에 대한 @Liza Daly의 메모와는 달리, 스펙은 실제로 어떤 태그를 생략 할 수 있는지, 언제 (그리고 규칙은 HTML 4.01과 약간 다릅니다.

관련 참조는 http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags 이며 다음과 같습니다.

  • html 요소 내부의 첫 번째 항목이 주석이 아닌 경우 html 요소의 시작 태그를 생략 할 수 있습니다.

  • html 요소 바로 뒤에 주석이 없으면 html 요소의 종료 태그를 생략 할 수 있습니다.

  • 요소가 비어 있거나 헤드 요소 내부의 첫 번째 요소가 요소 인 경우 헤드 요소의 시작 태그를 생략 할 수 있습니다.

  • head 요소 바로 뒤에 공백 문자 나 주석이없는 경우 head 요소의 종료 태그를 생략 할 수 있습니다.

  • 본문 요소의 첫 번째 항목이 스크립트 또는 스타일 요소 인 경우를 제외하고, 요소가 비어 있거나 본문 요소의 첫 번째 항목이 공백 문자 나 주석이 아닌 경우 본문 요소의 시작 태그를 생략 할 수 있습니다.

  • 본문 요소 바로 뒤에 주석이없는 경우 본문 요소의 종료 태그를 생략 할 수 있습니다.

따라서 귀하의 예제는 유효한 HTML5이며 html, head 및 body 태그를 암시 적 위치로 사용하여 다음과 같이 구문 분석됩니다.

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

스크립트 자체가 헤드의 일부이지만 "이 스크립트는 헤드에있을 것"이라는 주석은 실제로 본문의 일부로 구문 분석됩니다. 사양에 따르면, 당신이 전혀 다르기를 원한다면 </HEAD>and <BODY>태그를 생략하지 않아도됩니다. (해당 태그 <HEAD></BODY>태그는 여전히 사용할 수 있지만)


15

HTML4에서 생략해도됩니다 :

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

HTML5 구문은 더 느슨하게 정의되므로 HTML5에는 "필수"또는 "선택적"요소가 없습니다. 예를 들면 다음과 title같습니다.

title 요소는 대부분의 상황에서 필수 자식이지만 상위 수준 프로토콜이 제목 정보를 제공하는 경우 (예 : HTML을 전자 메일 작성 형식으로 사용하는 경우 전자 메일의 제목 줄) title 요소는 생략 할 수 있습니다. .

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

XHTML-acting-like-HTML5와 달리 거의 사용되지는 않지만 실제 XHTML5에서는 생략 할 수 없습니다.

그러나 실용적인 관점에서 HTML 및 CSS 렌더링의 예측 가능성을 위해 브라우저를 "표준 모드"에서 실행하기를 원할 때가 있습니다. DOCTYPE과보다 구조화 된 HTML 트리를 제공하면보다 예측 가능한 크로스 브라우저 결과가 보장됩니다.


13
태그로 요소를 혼동하지 마십시오. 이 페이지의 다른 곳에서 cHao의 의견을 참조하십시오. 를 들어 html, headbody, 요소는 필수이지만, 태그는 선택 사항입니다.
Alohci

실제로 당신은 마지막 비트에서 틀 렸습니다. 태그 생략은 SGML DTD 기능이며, SGML 구문 분석을 지원하는 모든 브라우저 (모든 브라우저)는 태그 생략도 지원합니다. XHTML5에서이를 수행 할 수없는 이유는 SGML이 아니라 XML이기 때문입니다. XML이 요소를 유추하기에는 너무 바보입니다.
OdraEncoded

@OdraEncoded 명세서에 대한 검증을 제공 할 수 있습니까? 나는 그것이 사실이라고 생각하지 않습니다 ( HTML 표준 참조 ).
칫솔

@OdraEncoded-닫히지 만 사실은 아닙니다. 태그 생략은 ISO 8879에 정의 된대로 SGML 파서의 선택적 기능 (대부분은 지원하지만)입니다. Python의 'html.parse'는 보이지 않지만 거의 모든 HTML 파서가이를 지원합니다 ( stackoverflow.com/questions/29954170/… ).
TextGeek

14

HTML 사양에 따라 특정 경우에 특정 태그를 생략 할 수 있지만 일반적으로 그렇게하는 것은 현명하지 않습니다.

두 가지 효과가 있습니다-스펙이 더 복잡 해져서 브라우저 작성자가 올바른 구현을 작성하는 것이 어렵습니다 (IE가 잘못 알고 있음).

이것은 스펙의이 부분에서 브라우저 오류 가능성을 높입니다. 웹 사이트 작성자는 이러한 태그를 포함하여이 문제를 피할 수 있습니다. 따라서 사양에서 요구하지는 않지만 문제가 발생할 가능성을 줄이면 엔지니어링이 우수합니다.

또한 최신 HTML 5.1 WG 사양에는 현재 진행중인 작업이며 아직 변경 될 수 있음을 명심하십시오.

본문 요소의 첫 번째 항목이 메타, 링크, 스크립트, 스타일 인 경우를 제외하고, 요소가 비어 있거나 본문 요소의 첫 번째 항목이 공백 문자 나 주석이 아닌 경우 본문 요소의 시작 태그를 생략 할 수 있습니다. 또는 템플릿 요소입니다.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

이것은 약간 미묘합니다. 바디와 헤드를 생략하면 브라우저가 해당 요소를 삽입 할 위치를 유추합니다. 이로 인해 명시 적이 지 않아 혼동 될 수 있습니다.

그래서 이거

<html>
  <h1>hello</h1>
  <script ... >
  ...

script 요소가 body 요소의 자식이되지만

<html>
  <script ... >
  <h1>hello</h1>

스크립트 태그는 head 요소의 자식이됩니다.

이렇게하면 명시 적으로 나타날 수 있습니다

<html>
    <body>
      <script ... >
      <h1>hello</h1>

그런 다음 스크립트 또는 h1 중 어느 것이 먼저 있든지 body 요소에 예상대로 나타납니다. 이것들은 코드를 리팩토링하고 디버깅하는 동안 간과하기 쉬운 것들입니다. (예를 들어, 본문에서 첫 번째 스크립트 요소를 찾고있는 JS가 있습니다. 두 번째 스 니펫에서는 작동을 멈 춥니 다.

일반적으로 사물에 대해 명시 적으로 표현하는 것이 사물을 해석에 공개하는 것보다 항상 좋습니다. 이와 관련하여 XHTML은 코드에서 요소 구조에 대해 완전히 명시해야하기 때문에 더 단순하고 잘못 해석하기가 쉽지 않기 때문에 더 좋습니다.

따라서 예, 생략하고 기술적으로 유효 할 수는 있지만 일반적으로 그렇게하는 것은 현명하지 않습니다.


1
저자는 표준에 대해 신경 쓰지 않았기 때문에 문제가 발생합니다. 제대로 작동하지 않으면 잘못입니다. 표준은 정의되어 있으므로 IE와 함께 작동해야합니다.
Ken Sharp

3
@ KenSharp 나는 동의하지 않지만, 당신이 모든 고객이 그것을 사용하지 못하게 할 때까지 우리는 그것에 붙어 있습니다. 따라서 작동해야하는 모든 것에 의존하기보다는 완전히 모호하지 않은 코드를 작성하는 것이 좋습니다.
Peter Bagnall

1
사용자는 규정을 준수하지 않아 IE를 수년간 버려야했습니다. 사람들이 여전히 Windows XP를 설치하더라도 사용자가 IE6을 계속 사용할 것으로 기대하지 않습니다. Windows 3.1도 영원히 지원할 수는 없습니다. OSI 레벨 8 오류.
Ken Sharp

1
정확히 어떤 태그를 생략 할 수 있고 정확히 어디에 HTML 버전에 따라 다릅니다. 그것은 또한 그것들을 피해야 할 좋은 이유처럼 보입니다 (가장 명확하고 일반적이며 일관된 경우는 제외).
TextGeek

@TextGeek <!DOCTYPE html>.
Det

-3

브라우저가 자동으로 잘못된 마크 업을 수정하므로 Firebug에서이를 올바르게 표시합니다. 이 동작은 어디에도 지정되어 있지 않으며 브라우저마다 다를 수 있습니다. 이러한 태그는 사용중인 DOCTYPE에 필요하며 생략해서는 안됩니다.

html 요소는 모든 HTML 페이지의 루트 요소입니다. 다른 모든 요소의 설명을 보면 요소를 사용할 수있는 위치가 표시됩니다 (거의 모든 요소에는 머리 또는 몸통이 필요합니다).


크로스 브라우저가 아닌 것일 수 있습니까?
Larry Cinnabar

5
다시 말해, 정의되지 않은 결과를 산출하는 나쁜 관행.
랜디

3
@Innuendo 무언가가 크다고해서 그것이 잘 정리되었다는 의미는 아닙니다.
데미안 브레히트

2
권위에 대한 호소로서 나는 설득력이 없다. google.com도 유효하지 않은 HTML입니다. 당신이되어야한다는 것을 의미하지는 않습니다.
Rein Henrichs

17
요소가 존재해야합니다. 태그 가하는 말은 없습니다 . html / head / body 태그가없는 HTML은 실제로 어떤 곳에 요소가 표시되지 않는 한 유효합니다 . ( 예 : <title>a 뒤에 <p></p>)
cHao
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.