모든 웹 문서의 시작은 문서형 정의(DTD)의 선언으로부터 시작합니다. 일단 웹 사이트의 목적과 목표를 정확히 정한 후, 첫 번째로 HTML로 마크업할 것인지, XHTML, HTML5로 마크업 할지를 결정해야 합니다.또 한, 웹 사이트를 제작할 때 필요한 기능을 구현하기 위해 비추천 요소와 속성을 사용할 것인지를 고려해야 합니다.
DOCTYPE 정의 및 선언(DTD)이란?
문서형 정의(DTD:Document Type Definition)은 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성등을 처리하는 기준이 되며 유효성 검사에 이용된다.
문서형 정의를 생략하는 경우, 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks mode)로 렌더링되어 크로스 브라우징에 어려움을 겪는다. 문서형 정의는 HTML문서의 최상위에 위치해야 한다.
DTD
이전 버전의 HTML(HTML2~HTML4)은 SGML(Standard Generalized Markup Language)에 기반을 두어 만들어졌기 때문에 DTD 참조가 필요하며, 이 때문에 DOCTYPE 선언을 하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다.
HTML과 XHTML은 각 버전에서 사용 가능한 태그나 속성 등을 DTD로 상세히 정의한다. DTD는 XML 문서들의 클래스에 논리적인 구조를 강요하는 법칙이다. 따라서 DTD는 모든 적법한 마크업을 쓰고 마크업이 문서에 포함될 수 있는 장소와 그 방법을 지정한다. 이런 요소 구문 또는 문법은 요소와 그들의 속성의 의미를 정의한다.
HTML5 DOCTYPE 선언
HTML5에서는 SGML에 기반을 두지 않아서 DTD 참조가 필요 없으며, 최소한의 코드 작성이 기본 방향이라 매우 간단히 선언할 수 있다.
<!DOCTYPE html>DOCTYPE 선언은 선택적이지만 하위 호환성을 위해 위와 같이 사용하는 것이 추천된다.
XHTML 1.0 DOCTYPE 선언
HTML 5가 등장하면서 더 이상은 XHTML 1.0을 고집하는 경우는 적습니다.
Strict DTD
W3C가 의도했던 문서 타입으로, 구조와 표현을 분리하기 위해 단계적으로 사라질 표현에 관한 요소와 속성을 배제한 문서 타입이다. center, font, iframe, strike, u, 새창띄우기 등이 제한된다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">Transitional DTD
기존에 만들어진 문서들과의 호환성을 유지하기 위해 사용한다. iframe과 새창띄우기(target="_blank")등을 사용할 수 있어 XHTML 사용시 이것을 추천한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">Frameset DTD
현재는 거의 사용하지 않는 프레임셋을 구현하기 위해서 사용한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1-frameset.dtd">XHTML 프롤로그(선언문)
모든 XML문서는 XML 해석 방법을 브라우저에게 말하는 선언문에서 시작된다. XML 선언문 또는 프롤로그는 DOCTYPE과 네임스페이스 선언, 그리고 문서의 타입 또는 마크업 랭귀지를 정의하는 것에 앞서서 정의된다. 예를 들면 아래와 같다.
<?xml version="1.0" encoding="UTF-8"?>
몇몇 옛 버전의 브라우저들(IE6)은 <?xml 프롤로그에 막혀서 공백 페이지를 표시한다. 또한 Mac용 인터넷 익스플로러 4와 5버전과 네스케이프 네비게이터4는 <?xml 구문을 인식하지 못하기 때문에 XML 프롤로그가 있는 웹 페이지를 만나게 되면 오작동을 유발한다. 그리고 프롤로그는 PHP처럼 서버 기반의 분석 엔진과 이따금씩 문제를 일으키기도 한다.
따라서 W3C는 프롤로그가 선택적으로 사용되도록 만들었다. 즉, HTML 페이지에서 프롤로그는 생략하거나 또는 새로운 버전의 브라우저를 위해 조건적으로 포함시키는 것 둘 다 가능하다. 만약 기본값인 UTF-8 또는 UTF-16 이외의 문자 셋을 사용하기 원하거나, 프롤로그를 사용하지 않기를 원한다면 프롤로그 대신에 아래와 같이 meta http-equiv 태그를 사용할 수 있다.
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
HTML 4.01 DOCTYPE 선언
근래에는 HTML 4.01로 문서가 작성되는 경우는 없습니다만 기록은 남겨둡니다.
strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">DOCTYPE과 MIME의 차이
웹 서버는 송신하는 각 문서를 MIME(Multipart Internet Mail Extensions)으로 확인한다. MIME은 콘텐츠 타입이라고 부르기도 한다. 이 콘텐츠 타입은 문서의 HTTP head 요소에 들어있으며, 브라우저는 콘텐츠 타입에 따라 문서 처리 방식을 결정하게 된다. 콘텐츠 타입이 text/html인 문서가 수신되면 브라우저는 그 문서를 HTML로 렌더링한다.
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
XHTML Media Types에 따르면 웹 서버는 XHTML을 다음 세가지 콘텐츠 타입 중 하나로 송신한다.
- text/html : 브라우저가 문서를 XML로 인식해서는 안될 경우, 다른 XML 네임스페이스에 MathML 같은 내용을 넣지만 않는다면 XHTML 문서를
text/html로 송신할 수도 있다. 이렇게 송신된 문서는 브라우저는 그 문서를 HTML로 인식해서 처리한다. - application/xhtml+xml : XHTML을
application/xhtml+xml으로 송신하게 되면 IE7 이하 버전은 이 유형의 페이지를 표시하지 못한다. - XML : IE7 이하 버전과 같이
application/xhtml+xml을 처리하지 못하는 브라우저는 이 문서를 일반 XML로 인식해서 모든 XHTML의 의미론적 의미가 무시되므로 링크와 폼은 제 기능을 못하고 문서 렌더링 시간도 훨씬 오래 걸린다.
게코(Gecko) 브라우저는 XML 콘텐츠 타입으로 수신된 문서를 완전히 내려받아서 코딩 에러가 전혀 없음을 확인한 후 렌더링한다. 그리고 DOCTYPE에 관계없이 문서를 Strict 모드로 렌더링한다.
현재 XHTML 웹페이지 송신용으로 가장 신뢰성 높은 콘텐츠 타입은 text/html이다. 이 유형은 W3C가 지원하며 대부분의 브라우저에서 인식된다. 형식을 이렇게 지정하면 브라우저는 HTML로 인식하고 유효성 검사를 하지 않고 잘 동작한다(application/xhtml+xml인 경우에는 문서를 자동으로 유효성검사를 완료한후 렌더링한다). 브라우저는 웹페이지에 에러가 있든 없든 개의치 않고 어느 버전의 HTML이나 XHTML로든 표시할 수 있는 형식으로 파싱한다. 반면, XHTML 문서에는 사소한 에러만 있어도 브라우저가 각종 XML 명령을 통해 XHTML 문서 전체 렌더링을 막는다.
'웹코딩 > HTML' 카테고리의 다른 글
| HEAD(문서 머리) 영역 - TITLE, BASE, STYLE (0) | 2015.04.17 |
|---|---|
| 네임스페이스와 휴먼랭귀지, manifest (0) | 2015.04.17 |
| HTML 기초(개요, 역사, 요소) (0) | 2015.04.17 |
| [HTML5] 9장 추가된 DOM과 자바스크립트 (0) | 2013.02.12 |
| [HTML5] 8장 그밖의 추가된 속성 (0) | 2013.02.11 |
