HTML 문서정보
출처: 고경희, Do it! HTML5+CSS3 웹 표준의 정석, 이지스퍼블리싱, 2013, 01-6장
내용을 요약하고 관련된 생각을 추가하였습니다.
doctype을 빼먹지 말자.
HTML5 doctype은 단순합니다.
<!doctype html>
doctype 문서 유형은 웹 브라우저에서 "이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라."고 알려주는 것입니다.
HTML4와 HTML5의 가장 큰 차이점이 문서 유형을 선언하는 방법입니다. 브라우저마다 HTML4를 지원하는 내용이 조금씩 달랐기 때문에 세가지 가운데 선택하여 사용했습니다.
HTML4에서 사용하는 문서유형
- strict : 표준 규약을 정확히 지켜야 하는 유형
- transitional : 표준 규약의 변형을 어느 정도 허용하는 유형
- frameset : 프레임 사용을 허용하는 유형
그럼 여기서 떠오르는 생각이 'frameset유형은 프레임을 허용하는 transitional유형인가?' 하는 것입니다. strict유형은 프레임을 포함하지 않는 것 같아 보이고, transitional이 변형을 허용하니 아무래도 frameset은 transitional쪽으로 기우는 것 같습니다. W3C 문서에 frameset과 transitional이 같다고 나와있습니다.
원문의 내용을 그대로 가져와 보면
This is the HTML 4.01 Frameset DTD, which should be used for documents with frames. This DTD is identical to the HTML 4.01 Transitional DTD except for the content model of the "HTML" element: in frameset documents, the "FRAMESET" element replaces the "BODY" element. 즉, BODY 태그 대신 FRAMESET을 사용하는 것 말고는 똑같다는 말입니다.
문서 유형을 설정하는 것이 까다로워서 아예 문서 유형을 지정하지 않은 문서도 많습니다. 문서 유형을 지정하지 않으면 브라우저에서 웹 문서를 로딩할 때 관용 모드(Quirks mode)로 인식하게 됩니다. 관용 모드는 아주 오래된 브라우저에서도 볼 수 있도록 하는 유형이기 때문에 웹 표준은 고려되지 않습니다. 또한 웹 문서 제작자가 의도한 대로 결과 화면이 나오지 않을 수 있습니다.
IE의 경우 doctype을 지정하지 않으면 IE5 쿼크(Quirks)모드를 사용합니다.
CSS로 기껏 둥글게둥글게 만들어 놓은 스타일이 단순한 네모박스로 나타날 가능성이 높습니다.
html도 속성이 있다.
lang 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다.
<html lang="ko">
언어를 표기하지 않으면 어떻게 될까요? 검색 사이트에서 '한국어 검색'처럼 특정 언어로 제한해서 검색할 수 있는데, 언어를 지정하지 않으면 언어를 제한해서 검색할 때 검색되지 않을 것입니다.
사용언어를 표기하는 것과 파일을 저장할 때 encoding 타입을 지정하는 것은 전혀 다른 문제입니다.
언어는 사람(넓게는 검색엔진)을 위한 장치이고, encoding 타입은 컴퓨터(서버)를 위한 장치입니다.
meta 태그의 역할이 커지고 있다.
여러가지 용도로 사용됩니다. 가장 중요한 것은 문자셋을 지정하는 것입니다.
문서의 키워드와 요약 정보를 지정할 수 있습니다.
<!-- HTML4 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTML5 --> <meta charset="utf-8"> <!-- 그외 아래와 같은 속성들을 많이 볼 수 있습니다. --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="An interactive getting started page...">
meta 태그의 문자셋과 파일을 저장할 때 사용한 인코딩 방식을 일치하거나 서로 이해할 수 있는 방식(euc-kr과 ANSI)이어야 합니다.
meta 태그의 문자셋과 파일 인코딩 방식이 다르면 어떻게 될까요? 브라우저가 문자를 어떻게 표현할까요?
가장 먼저, 영어(알파벳)는 아무런 제약을 받지 않습니다. 내용이 모두 영어로만 되어 있으면 문자셋이나 인코딩에 별로 신경쓰지 않아도 됩니다. 영어를 제외한 다른 문자는 문제가 됩니다. 간혹 페이지의 글자가 모두 이상한 모양으로 나타나는 것을 볼 수 있습니다. 이런 경우 십중팔구는 문자셋과 인코딩이 맞지 않아서 나타나는 현상입니다.
meta charset, file encoding, HTTP-header encoding, server character setup이 모두 엮여있는 문제입니다. 벌써 페이지도 길어졌고, 내용 정리를 해서 올리도록 하겠습니다.