DTD가 뭐에요?(feat. !DOCTYPE html)

728x90

VScode에서 웹을 만들다보면 ! 를 입력하면 자동으로 다음과 같은 코드 입력이 완성되는데요.

여기서 !DOCTYPE html이 뭘까요? 이걸 알기 위해서는 DTD가 뭔지부터 짚고 넘어가야 할 필요가 있습니다.

DTD란?

DTD(Document Type Definition, 문서 형식 정의)는 XML이나 HTML 문서에서 사용되는 문서 형식을 정의하는 규칙이나 표준입니다.

DTD는 문서가 어떤 요소, 속성, 계층 구조, 데이터 유형 등을 포함해야 하는지를 명확히 규정하며, 문서의 구조적 유효성을 검사하는 데 사용되는데요. 주로 HTML, XML과 같은 마크업 언어에서 사용되며, 문서가 규격에 맞게 작성되었는지를 검증하는 역할을 합니다.

예를 들어, XML 문서를 작성할 때 DTD를 사용하면 태그가 올바르게 사용되었는지, 계층 구조가 적합한지를 확인할 수 있습니다. 이를 통해 문서의 일관성을 유지하고, 다른 시스템에서 문서를 쉽게 처리할 수 있도록 보장합니다.

DTD는 HTML/XML 문서 내부에 작성해도 되고, note.dtd 과 같은 외부 파일에 작성 후 그걸 참조해도 됩니다.

DTD 작성해보는 예시(XML)

문서 내부에 작성하는 경우는 다음과 같을 것이고,

<!DOCTYPE note [
    <!ELEMENT note (to, from, heading, body)>
    <!ELEMENT to (#PCDATA)>
    <!ELEMENT from (#PCDATA)>
    <!ELEMENT heading (#PCDATA)>
    <!ELEMENT body (#PCDATA)>
]>
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
</note>

외부에서 참조하는 경우, note.dtd 파일을 다음과 같이 생성한 후에,

<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

xml 파일에서 아래와 같이 note.dtd를 참조해주면 됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
    <to>John</to>
    <from>Jane</from>
    <heading>Reminder</heading>
    <body>Don't forget our meeting tomorrow!</body>
</note>

DTD 주요 기능

요소 정의(Element Definition): 문서에서 사용할 수 있는 요소(태그)와 해당 요소가 포함할 수 있는 콘텐츠를 정의합니다.
- ex: <!ELEMENT title (#PCDATA)> → title 요소는 텍스트 데이터를 포함할 수 있음을 정의.
속성 정의(Attribute Definition): 요소에 사용할 수 있는 속성과 속성의 데이터 유형 또는 기본값을 정의합니다.
- ex: <!ATTLIST img src CDATA #REQUIRED> → img 태그의 src 속성은 반드시 포함되어야 함을 정의.
계층 구조 정의: 요소들이 서로 어떻게 중첩되고 포함될 수 있는지를 정의합니다.
- ex: <!ELEMENT article (title, body)> → article 요소는 title과 body를 자식 요소로 가져야 함.
엔터티 정의(Entity Definition): 문서에서 반복적으로 사용되는 텍스트를 재사용 가능하게 정의합니다.
- ex: <!ENTITY author "John Doe"> → &author;를 사용하면 "John Doe"가 삽입됨.

DTD 작성해보는 예시(HTML)

HTML5에서는 명시적으로 DTD를 정의하지 않고, 간단하게 <!DOCTYPE html>로 대체되었지만, html4까지만 해도 DTD를 통해 문서의 버전과 렌더링 방식을 브라우저에 알려줬어야했습니다.

예를 들어, HTML4에서 DTD를 사용하여 다음과 같이 Strict, Transitional, Frameset 버전을 명시했습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

그래서 !DOCTYPE html이 뭔데?

여기까지 글을 읽으셨다면 대충 문서 형식을 지정해주는 거라는 걸 유추할 수 있겠죠?

!DOCTYPE html은 HTML 문서의 문서 유형 선언(Document Type Declaration)으로, 웹 브라우저에 현재 문서가 어떤 HTML 버전을 사용하는지 알려주는 역할을 합니다.

즉, HTML5 체제 하에서 <!DOCTYPE html>라는 단순한 선언을 사용하면, 이 선언은 브라우저에게 표준 모드(Standard Mode)로 문서를 렌더링하라는 신호를 주는 거라고 생각하시면 될 것 같습니다.