728x90
반응형
DOCTYPE 정의
지금껏 당연하다고만 생각하며 깊게 알아보지 않고 넘어갔던 DOCTYPE 선언은 Document Type의 줄임말로, 웹문서가 어떤 버전 및 형식의 HTML로 작성되었는지 정의 하는 데 사용하는 마크업 선언이다.
DTD(Document Type Declaration)를 통해서 현재의 웹문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달한다.
왜 선언 할까?
문서간의 호환성을 높이기 위해서이다.
HTML 문서 버전에는 옛부터 사용되었던 HTML4 이전의 문서들, 현재 사용되고 있는 HTML5와 XHTML 등이 있다.
HTML의 버전마다 적용되는 태그와, 적용되지않는 태그가 따로 존재한다. 만약 html4 이전 버전에서 html5의 새로운 태그를 사용한다면 브라우저에서 문법 오류로 간주할 것이다. 또한 버전별로 DOCTYPE의 선언 방식이 다르다.
구 버전을 폐지하지 않는 이유
최신 버전의 기준으로 통일하지 않고 왜 구버전의 기준을 동시에 적용해야하는지 궁금할 수 있다.
이것은 당연하게도 웹브라우저 초창기 시절부터 이미 작성되었던 과거 버전 웹문서들을 최신 버전으로 모두 수정하기에는 불가능하기 때문이다. 만약 현재의 버전 선언이외에 구버전의 선언을 오류로 간주해버린다면수 많은 웹페이지의 과거 자료들을 잃어버리게 될 것이다.
따라서 과거 자료의 보존을 위해서 HTML은 버전이 앞으로 계속 업그레이드 된대도 과거의 기준과 함께 통용될 수 밖에 없다.
HTML 버전 별 DOCTYPE의 선언 방법
DOCTYPE의 선언은 항상 웹문서 최상단에 위치해야한다.
HTML5
<!DOCTYPE html>HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML4.01 Framset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML1.0 Framset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 태그 종류와 버전 별 호환성
아래는 html 태그들의 의미와 호환성에 대해 표로 정리한 요약표이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다.
| 태그 | 설명 |
| <!-- --> | 주석(comment)을 정의함. |
| <!DOCTYPE> | 해당 문서(document)의 타입을 정의함. |
| <a> | 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. |
| <abbr> | 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. |
| <acronym> | 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 <abbr> 요소를 사용함. |
| <address> | 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. |
| <applet> | 문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 <embed> 요소나 <object> 요소를 사용함. |
| <area> | 이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의함. |
| <article> | 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의함. |
| <aside> | 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의함. |
| <audio> | 음악이나 오디오 스트림과 같은 사운드를 정의함. |
| <base> | 해당 문서의 모든 상대 주소(relative URL)에 대한 기본 URL과 target 속성값을 정의함. |
| <basefont> | 해당 문서의 모든 텍스트에 대한 색상, 크기 및 폰트의 기본값을 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함. |
| <bdi> | 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의함. |
| <bdo> | 자식 요소의 텍스트 방향성(text directionality)을 정의함. |
| <big> | 글자 크기가 큰 텍스트를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함. |
| <blockquote> | 다른 출처로부터 인용된 영역을 정의함. |
| <body> | 해당 문서의 콘텐츠 영역을 정의함. |
| <br> | 행 바꿈(line-break)을 정의함. |
| <button> | 클릭할 수 있는 버튼을 정의함. |
| <canvas> | 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함. |
| <caption> | 테이블의 캡션(caption)을 정의함. |
| <center> | 가운데로 정렬되는 텍스트를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함. |
| <cite> | 예술 작품과 같은 창작물의 제목을 정의함. |
| <code> | 컴퓨터 코드(code)의 일부분을 나타냄. |
| <col> | <colgroup> 요소에 속하는 각 열(column)의 속성을 정의함. |
| <colgroup> | 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함. |
| <data> | 특정 콘텐츠에 기계가 읽을 수 있는(machine-readable) 형태의 값(value)을 덧붙여 나타낼 때 사용함. |
| <datalist> | <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의함. |
| <dd> | 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의함. |
| <del> | 텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현함. |
| <details> | 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시함. |
| <dfn> | HTML에서 용어(term)의 정의를 나타냄. |
| <dialog> | 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의함. |
| <dir> | HTML 리스트(list)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 <ul> 요소를 사용함. |
| <div> | HTML 문서에서 특정 영역이나 구획을 정의함. |
| <dl> | 용어와 그에 대한 설명을 리스트 형식으로 정의함. |
| <dt> | 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어(term) 부분을 정의함. |
| <em> | 강조된 텍스트를 표현함. |
| <embed> | 외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너를 정의함. |
| <fieldset> | <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용함. |
| <figcaption> | <figure> 요소의 캡션(caption)을 정의함. |
| <figure> | 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의함. |
| <font> | 텍스트의 폰트, 색상 그리고 크기를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함. |
| <footer> | 문서나 특정 섹션의 푸터(footer)를 정의함. |
| <form> | 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의함. |
| <frame> | <frameset> 요소에 포함되는 하나의 프레임(frame)을 정의함. HTML5에서는 더 이상 지원하지 않음. |
| <frameset> | 문서의 레이아웃을 구성하기 위해 사용되는 프레임(frame)들의 집합을 정의함. HTML5에서는 더 이상 지원하지 않음. |
| <h1> ~ <h6> | HTML 문서에서 제목(headings)을 정의함. |
| <head> | 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함. |
| <header> | 문서나 특정 섹션의 헤더(header)를 정의함. |
| <hr> | 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의함. |
| <html> | HTML 문서의 루트 요소(root element)를 정의함. |
| <i> | 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의함. |
| <iframe> | 인라인 프레임(inline frame)을 정의함. |
| <img> | 이미지(image)를 정의함. |
| <input> | 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의함. |
| <ins> | 텍스트 아래쪽에 라인을 추가하여 문서에 추가된 텍스트를 표현함. |
| <kbd> | 키보드 입력을 나타냄. |
| <label> | 사용자 인터페이스(UI) 요소의 라벨(label)을 정의함. |
| <legend> | <fieldset> 요소의 캡션(caption)을 정의함. |
| <li> | HTML 리스트(list)에 포함되는 아이템(item)을 정의함. |
| <link> | 해당 문서와 외부 소스(external resource) 사이의 관계를 정의함. |
| <main> | 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의함. |
| <map> | 클라이언트 사이드 이미지맵(client-side image-map)을 정의함. |
| <mark> | 형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의함. |
| <meta> | 해당 문서에 대한 정보인 메타데이터(metadata)를 정의함. |
| <meter> | 분수 값이나 범위(gauge) 내에서 특정 스칼라 값이 어느 정도인지를 표현함. |
| <nav> | 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의함. |
| <noframes> | 프레임(frame) 기능을 사용하지 않도록 설정했거나, 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함. HTML5에서는 더 이상 지원하지 않음. |
| <noscript> | 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함. |
| <object> | 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체(embedded object)를 정의함. |
| <ol> | 순서가 있는 HTML 리스트(list)를 정의함. |
| <optgroup> | 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의함. |
| <option> | 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의함. |
| <output> | 스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타냄. |
| <p> | 문단(paragraph)을 정의함. |
| <param> | <object> 요소에 의해 호출되는 플러그인의 매개변수(parameter)를 정의함. |
| <picture> | <img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의함. |
| <pre> | 미리 정의된 형식(preformatted)의 텍스트를 정의함. |
| <progress> | 작업의 진행률을 나타냄. |
| <q> | 짧은 인용구를 정의함. |
| <rp> | 루비 주석을 지원하지 않는 브라우저를 위한 대체 내용을 정의함. |
| <rt> | 루비 주석에서 발음이나 설명을 나타내는 윗첨자를 정의함. |
| <ruby> | 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의함. |
| <s> | 텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현함. |
| <samp> | 컴퓨터 프로그램의 샘플 또는 인용 출력(output)을 나타냄. |
| <script> | 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함. |
| <section> | HTML 문서에 포함된 독립적인 섹션(section)을 정의함. |
| <select> | 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의함. |
| <small> | 글자 크기가 작은 텍스트를 정의함. |
| <source> | <audio> 요소나 <video> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의함. |
| <span> | HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용함. |
| <strike> | 텍스트 한가운데 라인을 추가할 때 사용함. HTML5에서는 더 이상 지원하지 않으며, 대신 <del> 요소나 <s> 요소를 사용함. |
| <strong> | 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조함. |
| <style> | 해당 HTML 문서의 스타일 정보를 정의함. |
| <sub> | 아랫첨자(subscript) 텍스트를 표현함. |
| <summary> | <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의함. |
| <sup> | 윗첨자(superscript) 텍스트를 표현함. |
| <svg> | SVG 그래픽을 위한 컨테이너를 정의함. |
| <table> | 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의함. |
| <tbody> | 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용함. |
| <td> | 테이블에서 하나의 셀(cell)을 정의함. |
| <template> | 추가되거나 복사될 수 있는 HTML 요소들을 정의함. |
| <textarea> | 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의함. |
| <tfoot> | 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함. |
| <th> | 테이블에서 제목이 되는 헤더 셀(header cell)들을 정의함. |
| <thead> | 테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용함. |
| <time> | 사람이 읽을 수 있는(human-readable) 형태의 날짜와 시간 데이터를 정의함. |
| <title> | 해당 문서의 제목(title)을 정의함. |
| <tr> | 테이블에서 셀들로 이루어진 하나의 행(row)을 정의함. |
| <track> | <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(track)을 정의함. |
| <tt> | 텔레타이프 텍스트(teletype text)를 나타냄. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함. |
| <u> | 철자가 틀린 단어나 중국어의 고유 명사처럼 문체상 일반적인 텍스트와는 달라야만 하는 텍스트를 표현함. |
| <ul> | 순서가 없는 HTML 리스트(list)를 정의함. |
| <var> | 변수(variable)를 정의함. |
| <video> | 무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의함. |
| <wbr> | 단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의함. |
출처: https://inpa.tistory.com/entry/HTML-%F0%9F%8F%B7%EF%B8%8F-%ED%83%9C%EA%B7%B8-%EC%9A%94%EC%95%BD%ED%91%9C [Inpa Dev 👨💻:티스토리]
728x90
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML] 메타(meta) 태그의 개념과 종류 (0) | 2024.03.02 |
|---|
