<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>위 코드는 Visual Studio Code 에서
!단축키 를 통해 생성한 html5 기본 구조이다.
HTML문서 최상단에는<!DOCTYPE html>가 항상 있다
대체 무슨 기능을 하기에 필요할까?
어쩌다 생겼을까?
과거에 브라우저 NetScape Navigator와 MicroSoft Internet Explorer가 있었다. 두 브라우저에서 동작하는 방식이 달랐다. 그 후 W3C에서 웹 표준을 만들었다.
하지만 웹 표준에 따라 코드를 작성할 경우, 두 브라우저에서는 제대로 동작하지 않는다.
그래서 기존 모드와 표준 모드를 각각 다르게 처리하기로 했다. DOCTYPE 적어 웹 표준을 따르는 모드로 해석할 수 있도록 했다.
현재 모드 종류
현재 브라우저에서 사용하는 모드는
표준 모드를 따르는 no-quirks,
표준과 quirks가 섞인 limited-quirks,
Navigator4와 Internet Explorer5 동작방식인 quirks 모드이다.
과거에는 <!DOCTYPE html 뒤에 버전과 모드를 적었다. 그러나 현재 html5는 <!DOCTYPE html>로 통일했다.
결론
항상 no-quirk 모드로 해석되기 위해 최상단에 <!DOCTYPE html> 를 항상 붙이는 것이다.
만약 사용하지 않으면 quirks 모드로 해석될 수 있어, 원하는 대로 표시되지 않을 것이다. 지금은 필수로 넣도록 되어있다.
참고 문서
https://developer.mozilla.org/ko/docs/Glossary/Doctype
https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
