💻 DOCTYPE HTML 선언이란?
웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능
문서 형식 선언 DTD(Document Type Declaration) 를 통해서 현재의 웹문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달하고, 브라우저는 선언된 문서 버전에 맞는 HTML 기술로 페이지를 로드한다.
선언하는 이유? 🤔
HTML 버전마다 적용되는 태그가 있고, 적용되지 않는 태그가 있다. 만약 선언없이 구버전과 신버전 HTML을 사용한다면, 웹브라우저는 현재 버전의 엄격한 기준으로 과거 버전에서 정상적으로 작성된 태그들을 문법 오류로 간주하는 오류를 범할 수 있다.
구버전 폐지하지 않는 이유? 🤔
과거 버전 기준으로 이미 작성된 요소들을 전부 수정하는 것은 불가능하여 과거 웹 자료의 보존 목적을 위해 과거 버전의 기준을 최신 버전과 동시에 적용하고 있다.
📁 HTML5 Document Element
<!DOCTYPE html>
- DOCTYPE html 선언은 HTML 웹문서의 최상단에 위치해야 한다.
<html>
- HTML은 document element 즉, 문서의 최상위 요소로 lang 속성을 통해 문서의 주 언어가 무엇인지 설정 할 수 있다.
- 주 언어 설정은 검색엔진과 스크린 리더의 작동에 영향을 미치게 된다.
<head>
- 문서에 적용되는 메타데이터의 집합이다. 이 태그 안에는 페이지에 대한 정보가 포함돼 있다.
<title>
- 문서의 제목을 의미한다. 반드시 한번만 사용되어야 한다.
- 요소의 콘텐츠는 방문할 페이지의 URL 주소 입력창 위에 있는 브라우저 상단에 표시되거나, 브라우저 탭에 표시된다.
<link rel="" href="">
- 외부의 자원을 문서와 연결하는 역할을 한다.
rel관계(relationship), 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명한다.href참조(hypertext reference), 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시
<meta>
- 해당 페이지에 대한 정보를 포함한다.
<meta>요소는 사용자에게 보이지 않지만 검색 엔진이 파악할 수 있는 페이지에 대한 키워드, 제작자, 유효기간 설정같이 다양한 목적에 사용한다.
🔗 참고
https://dasima.xyz/doctype-html/
https://velog.io/@moooeyg/HTML-02-Document-element-metadata
#의욕넘치는#💻#✨#FE#💪🏻