👩‍💻/HTML5

DOCTYPE, HTML, XHTML, 그리고 HTML5

한나 2021. 4. 24. 00:14

DOCTYPE

유규한 역사를 가진 HTML은 시간이 지나며 그때 그때 필요한 기능을 표준으로 하는 버전들을 계속 업데이트해왔다. 당연히 여러 버전이 존재할 수밖에 없고, 이들은 각각의 이름도 가지고 있다. 가까운 순으로 HTML5, XHTML 1.1, HTML 4 등을 들어볼 수 있는데, 버전 별로 지원하는 태그나 속성이 조금씩 다르다. 물론 deprecated된 기능도 있다.

그러다보니 웹 문서가 어떤 HTML 버전을 사용하는지 브라우저에게 알려줄 DTD(Document Type Declaration)이라 하는 문서 형식 지시자를 <!DOCTYPE html>와 같이 HTML 문서 최상단에 작성하게 된다. 그러면 브라우저는 이를 읽고 선언된 버전에 맞는 문서를 렌더링해서 보여줄 수 있게 되는 것이다. deprecated 되는 몇 가지 기능들이 있다고 해도, 과거부터 계속 쌓여온 구버전 문서 형식들이 아예 사라지지 않는 한 문서의 형식은 이런 식으로 구분될 필요성이 있다. 만일 제대로 맞는 형식을 써주지 않는다면 타 버전에서 정상적으로 작동해야 할 문법이 오류라고 브라우저는 인식할 것이다.

구버전 같은 경우 아래처럼 W3C 메타 링크를 항상 함께 적어주어야 했지만, HTML5부터 간소화되어 생략된 형태를 쓸 수 있게 되었다.

<!-- XHTML 1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<!-- HTML5 -->
<!DOCTYPE html>

HTML5

각 문서 형식을 간단하게 비교해 어떤 특징이 있는지 살펴보자면, 우선 HTML5는 XHTML 1.0 이전 버전의 '느슨함'을 지향한다고 말할 수 있다. 클로징 태그를 선택적으로 사용해 더 적은 코드를 사용할 수 있게 되었고, 대소문자 모두 사용이 가능하다. 컨텐트를 보여주고, 인터랙티브한 사용을 위한 기능이 많이 업데이트되었다.

XHTML

W3C에서 개발된 XHTML은 Extensible HyperText Markup Language로, XML 호환을 염두에 두고 만든 HTML 확장 버전이다. 그러다보니 소문자만 사용해야 하고, 클로징 태그가 반드시 필요하다는 식의 엄격한 룰을 지향한다. 잘 구조화된 포맷을 사용하므로 웹 브라우저에서 빠르게 파싱될 수 있다는 장점이 있다.

HTML4 이전의 HTML

Case sensitive하지 않다는 점에서 HTML5와 비슷하지만, 비디오나 오디오 같은 미디어를 위한 지원이 없다.

'👩‍💻 > HTML5' 카테고리의 다른 글

브라우저에 데이터 저장하기 : WebStorage(localStorage와 SessionStorage) & Cookie #2 (0)	2021.02.24
브라우저에 데이터 저장하기 : WebStorage(localStorage와 SessionStorage) & Cookie #1 (0)	2021.02.24

현재글DOCTYPE, HTML, XHTML, 그리고 HTML5

프론트엔드 개발자의 Today I Learnt

Frontend, github, ESLint, git, vue.js, javascript, 루비, React, techBlog, vue, CSS, todolist, programmers, 프론트엔드, 프로그래머스, 리액트, Typescript, CRA, coding test, 파이썬,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Under the Sign of Saturn

DOCTYPE, HTML, XHTML, 그리고 HTML5

DOCTYPE

HTML5

XHTML

HTML4 이전의 HTML

'👩‍💻 > HTML5' 카테고리의 다른 글

'👩‍💻/HTML5'의 다른글

티스토리툴바

DOCTYPE, HTML, XHTML, 그리고 HTML5

DOCTYPE

HTML5

XHTML

HTML4 이전의 HTML

'👩‍💻 > HTML5' 카테고리의 다른 글

'👩‍💻/HTML5'의 다른글

관련글

티스토리툴바