코딩스쿨

▶ HTML References

HTML Doctypes

1. HTML Doctype이란?

HTML Doctype은 HTML 문서의 첫 번째 줄에 선언되며, 브라우저에게 해당 문서가 어떤 HTML 버전을 따르고 있는지 알려주는 역할을 합니다. Doctype 선언은 웹 페이지가 브라우저에서 올바르게 렌더링되도록 돕습니다.

2. HTML Doctype의 필요성

Doctype은 브라우저가 문서를 처리할 때 표준 모드(standards mode)로 렌더링할지, 아니면 쿼크 모드(quirks mode)로 렌더링할지 결정하는 중요한 요소입니다.

표준 모드: 웹 표준을 준수하는 방식으로 페이지를 렌더링합니다.
쿼크 모드: 과거 비표준 HTML 문서와의 호환성을 유지하기 위해, 표준을 따르지 않는 방식으로 페이지를 렌더링합니다.

올바른 Doctype 선언을 하지 않으면, 브라우저가 쿼크 모드로 웹 페이지를 렌더링할 수 있어, 페이지의 레이아웃이 깨지거나 예상과 다른 방식으로 표시될 수 있습니다.

3. HTML5 Doctype

HTML5는 최신 웹 표준을 따르며, Doctype 선언 방식이 매우 간단합니다. HTML5에서는 단순히 다음과 같이 선언하면 됩니다:

<!DOCTYPE html>

이 선언은 웹 페이지가 HTML5 표준을 따른다는 것을 브라우저에 알려줍니다.

HTML5 Doctype 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Doctype 예시</title>
</head>
<body>
    <p>이 페이지는 HTML5 표준을 따릅니다.</p>
</body>
</html>

4. 과거의 Doctype 선언

HTML5 이전에는 HTML과 XHTML의 다양한 버전에 따라 복잡한 Doctype 선언이 필요했습니다. 각각의 Doctype은 특정 HTML 버전 및 문서 유형을 지정하며, 선언 형식도 다릅니다.

HTML 4.01 Doctype

HTML 4.01은 HTML5 이전의 주요 웹 표준이었으며, 세 가지 모드(Strict, Transitional, Frameset)에 따라 Doctype이 다르게 선언됩니다.

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>">
```
- 이 모드는 엄격한 표준을 따르면서도, 몇 가지 구식 요소를 허용합니다. 예를 들어, <center> 같은 레거시 태그가 허용됩니다.

Frameset 모드:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "<http://www.w3.org/TR/html4/frameset.dtd>">

이 모드는 프레임을 사용하는 레이아웃을 지원합니다.

XHTML 1.0 Doctype

XHTML 1.0은 XML을 기반으로 한 HTML로, 문법이 엄격합니다. XHTML에서도 세 가지 모드가 존재합니다.

Strict 모드:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>">

이 모드는 가장 엄격한 XHTML 표준을 따릅니다.

Transitional 모드:
```
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
```
- XHTML 1.0 Transitional 모드는 엄격한 규칙을 따르면서도, 몇 가지 구식 HTML 태그를 허용합니다.

Frameset 모드:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>">

프레임을 사용하는 레이아웃에 사용됩니다.

5. Doctype 선언의 위치

Doctype 선언은 HTML 문서의 가장 첫 번째 줄에 위치해야 하며, HTML 코드 앞에 어떤 내용도 있어서는 안 됩니다. 심지어 공백조차 없어야 합니다.

잘못된 예시:

<!-- 공백이 있거나, 코멘트가 앞에 있는 경우 -->
 <!DOCTYPE html>

올바른 예시:

<!DOCTYPE html>

Doctype 선언이 페이지 최상단에 있지 않으면 브라우저가 이를 제대로 인식하지 못해, 쿼크 모드로 페이지를 렌더링할 수 있습니다.

6. Doctype 선언이 없는 경우

Doctype 선언이 없으면 브라우저는 문서를 쿼크 모드로 렌더링합니다. 쿼크 모드는 과거의 비표준 방식의 렌더링을 사용하여, 오래된 웹 페이지와 호환되도록 돕습니다. 하지만 표준을 지키지 않는 방식이기 때문에 레이아웃이나 스타일이 예상과 다르게 적용될 수 있습니다.

따라서 Doctype 선언은 항상 HTML 문서에 포함되어야 하며, 최신 표준인 HTML5를 따르는 것이 권장됩니다.

7. 브라우저 호환성

HTML5 Doctype은 대부분의 최신 브라우저에서 지원됩니다. HTML5 Doctype을 사용하는 것이 표준이므로, HTML5 문서를 작성할 때에는 항상 <!DOCTYPE html> 선언을 사용하는 것이 좋습니다.

브라우저	HTML5 Doctype 지원 여부
Chrome	Yes
Firefox	Yes
Safari	Yes
Edge	Yes
Internet Explorer	IE9+부터 지원

코딩 스쿨 HTML