매번 VSC에서 html 파일에서 느낌표(!)를 누르고 tab키를 누르면 html 기본 코드가 자동완성 됐다.
항상 당연하게 쓰다가 '근데 이걸 왜 저렇게 써야하고, 왜 필요한걸까?' 라는 궁금증이 생겨 찾아보게 됐다.
- 이번 글에서는 맨 상단에 위치한 DOCTYPE의 의미는 무엇이며, 왜 써야하는지를 알아보자.
<!DOCTYPE html>
HTML 문서의 첫 줄인 HTML(Hypertext Markup Language) 선언이며,
사용 중인 HTML 버전과 웹 페이지 표시 방법을 웹 브라우저에 알려주는 것이다.
웹 브라우저가 HTML 문서를 받으면 DOCTYPE 선언을 확인하여 사용 중인 HTML 버전을 확인한다.
HTML 버전마다 규칙과 구문이 다르므로,
버전마다 적용되는 태그와 적용되지 않는 태그가 있다.
따라서, 웹 페이지가 올바르게 표시되도록 호환성을 위해 올바른 버전을 선언하는 것이 중요하다.
예를 들어 HTML5에 대한 선언문은 항상 생각없이, 밥 먹듯이 쓰던 <!DOCTYPE html> 이다.
이 선언은 문서가 HTML5로 작성되었으며 해당 버전에 맞는 규칙과 구문을 사용해야 함을 브라우저에 알려주는 것이고,
선언을 통해 이전 버전과 새로운 버전에 알맞게 문법을 검사하는 것이다.
( HTML 4.01 버전에서 HTML5 버전의 HTML 태그를 사용한다면, 웹브라우저에서는 문법오류로 인식할 것 이다.)
올바른 DOCTYPE 선언을 사용하면 웹 페이지가 모든 브라우저와 장치에서 올바르게 표시되도록 할 수 있으며
웹 페이지의 접근성과 SEO(검색 엔진 최적화)를 개선할 수도 있다고 한다. (개발자의 숙명 ㅠㅠ)
* HTML의 버전마다 DOCTYPE 을 쓰는 방법이 다르다.
참고)
HTML5 ⇒ <!DOCTYPE html>
HTML 4.01 Strict ⇒ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional ⇒ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
등등...
제일 중요한건 DOCTYPE 은 html 파일의 맨 위에 위치해야 한다는 것.
'개발 > HTML' 카테고리의 다른 글
| Font(폰트) Preload 와 최적화 (0) | 2023.06.04 |
|---|---|
| 시멘틱 태그와 웹 접근성 (1) | 2023.03.16 |
개발 블로그
포스팅이 좋았다면 "좋아요❤️" 누르기 !
