DOCTYPE html
DOCTYPE html 선언이란?
DOCTYPE html 이란 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능입니다.
DTD(Document Type Declaration)를 통해서 현재의 웹문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달합니다.
브라우저는 선언된 문서 버전에 맞는 HTML 기술로 페이지를 로드합니다.
선언의 목적
선언의 목적은 문서간의 호환성을 높이기 위함입니다.
HTML 문서 버전의 종류에는 HTML5, HTML4 이하 및 XHTML이 있습니다. 사용 용도와 발전 기간에 따라 버전이 달라졌습니다.
왜 선언을 해야 할까요? HTML 버전마다 적용되는 태그가 있고, 적용되지 않는 태그가 있습니다. 만약 선언없이 구버전과 신버전 HTML을 사용한다면, 웹브라우저는 현재 버전의 엄격한 기준으로 과거 버전에서 정상적으로 작성된 태그들을 문법 오류로 간주하는 오류를 범할 것입니다.
예를 들어 학창 시절에 HTML 문법 시간에 들어본것 같은 <center>, <font> 태그 등은 현재 HTML5버전에서는 웹표준이 아닙니다. 하지만 과거 HTML 문서에서는 표준입니다.
이럴 경우 과거 문서가 단지 <font> 태그를 사용했다는 이유만으로 웹표준이 아니라고 정의하게 되면 불합리할 것입니다.
따라서 과거 버전의 글도 현재의 브라우저에서 호환을 얻어서 자료를 보존하기 위해서 기준이 필요합니다. 즉 선언이란 과거 HTML 버전에서는 해당 버전에 맞게 문법을 검사하고 현재 버전에서는 현재 기준에 맞게 검사하는 기능입니다.
구버전 폐지하지 않는 이유
어째서 최신 버전의 기준으로 통일을 하지 않고 구버전 등의 기준을 동시에 적용해야 하는지 궁금할 수 있습니다. 구버전 기준을 유지하는 이유는 과거 웹 자료의 보존 목적을 위함에 있습니다.
웹문서에 수십년전에 과거 버전 기준으로 이미 작성된 요소들을 전부 수정하는 것은 불가능하기 때문입니다.
만약 현재의 버전 선언이외에 구버전의 선언을 오류로 간주해버린다면 수 많은 웹페이지의 과거 자료들을 잃어버리게 될 것입니다.
따라서 과거 자료의 보존을 위해서 HTML은 버전이 계속 증가해도 과거의 기준도 통용될 수 밖에 없습니다.
선언이라는 개념이 이해가 잘 되지 않는 다면 맨 하단의 HTML 버전별 태그 호환성 비교 표를 통해서 직관적으로 이해할 수 있습니다. 아무래도 HTML DOCTYPE 보다는 태그들이 더 익숙하기 때문입니다.
HTML5 문서 선언
<!DOCTYPE html>
HTML5에서는 <!DOCTYPE html> 형태로 간단하게 선언을 할 수 있습니다. DOCTYPE html 선언은 HTML 웹문서의 최상단에 위치해야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>안경의 기능</title>
</head>
<body>
<h1>안경</h1>
<p>안경은 기계와 비슷하다.</p>
</body>
</html>XHTML 1.0 문서 선언
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1 문서 선언
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML 4.01 문서 선언
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">HTML 5 vs 4.0 vs XHTML 1.0 호환 모드별 허용 태그
선언의 효용성은 아래 표와 같이 버전별로 허용되는 태그가 다르기 때문에 의미가 있습니다. 과거 기준으로 작성된 웹문서도 그 당시의 웹표준을 선언을 통해 구현하면 웹브라우저는 해당 문서를 웹표준으로 인식할 수 있습니다.
따라서 선언을 통해서 HTML 태그의 기술 발전으로 문법 기준이 변경되면서도 과거에 작성된 웹자료들을 과거 기준을 통해서 적절하게 보존할 수 있습니다.
| 태그 | HTML5 | HTML 4.0 XHTML 1.0 |
XHTML 1.1 | ||
|---|---|---|---|---|---|
| Transitional | Strict | Frameset | |||
| <acronym> | x | o | o | o | o |
| <applet> | x | o | x | o | x |
| <area> | o | o | o | o | x |
| <article> | o | x | x | x | x |
| <aside> | o | x | x | x | x |
| <audio> | o | x | x | x | x |
| <basefont> | x | o | x | o | x |
| <bdi> | o | x | x | x | x |
| <bdo> | o | o | o | o | x |
| <big> | x | o | o | o | o |
| <canvas> | o | x | x | x | x |
| <center> | x | o | x | o | x |
| <col> | o | o | o | o | x |
| <colgroup> | o | o | o | o | x |
| <datalist> | o | x | x | x | x |
| <del> | o | o | o | o | x |
| <details> | o | x | x | x | x |
| <dialog> | o | x | x | x | x |
| <dir> | x | o | x | o | x |
| <embed> | o | x | x | x | x |
| <figcaption> | o | x | x | x | x |
| <figure> | o | x | x | x | x |
| <footer> | o | x | x | x | x |
| <frame> | x | x | x | o | x |
| <frameset> | x | x | x | o | x |
| <header> | o | x | x | x | x |
| <iframe> | o | o | x | o | x |
| <ins> | o | o | o | o | x |
| <main> | o | x | x | x | x |
| <map> | o | o | o | o | x |
| <mark> | o | x | x | x | x |
| <meter> | o | x | x | x | x |
| <nav> | o | x | x | x | x |
| <noframes> | x | o | x | o | x |
| <output> | o | x | x | x | x |
| <progress> | o | x | x | x | x |
| <rp> | o | x | x | x | x |
| <rt> | o | x | x | x | x |
| <ruby> | o | x | x | x | x |
| <s> | o | o | x | o | x |
| <section> | o | x | x | x | x |
| <source> | o | x | x | x | x |
| <strike> | x | o | x | o | x |
| <summary> | o | x | x | x | x |
| <tbody> | o | o | o | o | x |
| <tfoot> | o | o | o | o | x |
| <thead> | o | o | o | o | x |
| <time> | o | x | x | x | x |
| <track> | o | x | x | x | x |
| <tt> | x | o | o | o | o |
| <u> | o | o | x | o | x |
| <video> | o | x | x | x | x |
| <wbr> | o | x | x | x | x |