4. document element & metadata

<!DOCTYPE html><html><head><title><link><meta>

`<!DOCTYPE html>`

DTD (Document type Definition) 라고 부르며 문서의 타입에 대한 정보를 제공합니다. 만약 제거하면 브라우저는 쿼크 모드(quirks mode : 하위 호환성 모드)로 html을 랜더링하게 됩니다. 쿼크 모드에서는 브라우저마다 구현 방식이 조금씩 다르기 때문에 다르게 동작할 가능성이 있으므로 반드시 문서 최상단에 선언을 해야합니다.

표준 모드와 호환 모드 : https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

`<html>`

HTML은 document element 즉, 문서의 최상위 요소입니다. lang 속성을 통해 문서의 주 언어가 무엇인지 설정 할 수 있습니다. 주 언어 설정은 검색엔진과 스크린 리더의 작동에 영향을 미치게 됩니다.

`<head>`

문서에 적용되는 메타데이터의 집합입니다.

`<title>`

문서의 제목을 의미합니다. 반드시 한번만 사용되어야 합니다.

`<link>`

외부의 자원을 문서와 연결하는 역할을 합니다.

`<meta>`

해당 문서의 메타데이터를 나타내는 요소입니다.

charset : 문서의 문자 인코딩 상태를 의미합니다. 보통 UTF-8 로 설정하여 전 세계 모든 언어를 지원하도록 합니다.

name=”author” : 페이지를 작성한 개발자의 이름입니다.

name="description" : 페이지에 대한 설명 정보를 나타냅니다. 검색엔진이 사용자에게 결과 화면을 출력할 때 중요한 고려 요소입니다.

name=”viewport” : 모바일 장치에서 사용자 화면의 사이즈에 대한 값을 설정합니다. 필수는 아니지만 스마트폰이나 태블릿 같은 모바일 기기에서도 많은 접속이 이뤄지는 요즘은 반드시 넣어주는게 좋습니다.

http-equiv="X-UA-Compatible” : 프라그마 지시문(pragma directive : 컴파일러에게 특정 기능을 지정)이라고 합니다. 브라우저에 어떤 행동을 지시하려는 목적으로 사용합니다. X-UA-Compatible 속성값은 IE브라우저에서 페이지를 어떠한 형식으로 랜더링할지 지정할 수 있으며 content=’IE=edge’는 IE8 버전 이상에서 항상 표준모드로 랜더링 되도록 합니다.