개발자의 길

DocType 설명. xhtml xhtml 차이 본문

7. HTML5

DocType 설명. xhtml xhtml 차이

자르르 2019. 1. 30. 11:30


1. DocType

웹표준을 지키는 문서타입이 여러 종류가 존재. HTML, XHTML 등이 있고, 각 문서들의 차이는 엄격하게 보냐 느슨하게 보냐의 차이

(내용 수정: 2019.01.27 : XHTML과 HTML의 차이점을 설명을 보충합니다.)
더욱 자세한 내용을 찾는 분은 wystan님의 블로그 를 참고해주세요.

XHTML과 HTML의 차이점

  • XHTML이 XML 문법을 따르므로 HTML과 문법 규칙이 약간 다르다.
  • XHTML을 사용하면 할 수 있으나, HTML로는 불가능한 일이 있다.
  • HTML을 사용하면 할 수 있으나, XHTML로는 불가능한 일이 있다.
  • CSS를 이해하는 방식에 차이가 있다.
  • 클라이언트 쪽의 스크립트(예: 자바 스크립트)를 다루는 방식에 차이가 있다.

아래는 HTML 방식. 태그가 닫히지 않았지만 이런 방식도 허용.

<!-- HTML 방식 -->
<img src="../img.png" alt="이미지는 그 스스로가 내용입니다.">
<p>HTML에서도 대부분의 p태그와 같이 태그를 닫아야 제대로 동작합니다.</p>

XHTML에서는 모든 태그는 닫혀있어야 한다. 아래는 img 태그도 닫은 것을 볼 수 있다. (우린 더 엄격한 방식인 XHTML에 익숙하다.)

<!-- XHTML 방식 -->
<img src="../img.png" alt="이미지는 그 스스로가 내용입니다."/> 
<p>p 요소는 내용을 감싸기 때문에 열리고 닫힙니다.</p>

img태그는 br태그처럼 self closing tag로, 내부에 child를 가지지 않기 때문에 닫는 태그를 굳이 만들지 않아도 된다. w3schools에서는 empty elements라고 설명이 되어 있다.

/* self closing tag */
  <br>    
  <img>
  <meta>
  <link>
  <input>
  <hr>

문서는 HTML5외에 대표적으로 아래의 것들이 있다. 문서 포맷이라고 볼수 있겠다.

  • HTML 4.01
  • XHTML 1.0
  • XHTML 1.1

Strict

엄격한 규격으로, 비표준 규격인 center, font 등을 사용할 수 없다.(css의 center와 font와 다른듯) 이러한 값은 css로 대체할 수 있고 그것을 권장한다.

Transitional

과도기적 규격으로, 표준이 정립되지 않은 때에 만들어진 문서들

Frameset

거의 사용하지 않는 타입인데, 나모웹에디터 시절 html안에 html을 분리해서 작성하는 방식

아래 그림의 예처럼 보면 header.html, menu.html, content.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">

HTML 4.01 Frameset

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

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

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

HTML5

<!DOCTYPE html>

크롬에서는 비표준일지라도 잘 보여준다. 비표준 문서

아래는 IE8에서 렌더링 한것으로, IE8에서 렌더링에서는 레이아웃이 깨지는 것을 볼 수 있다.
IE8 에서 렌더링



저작자표시

'7. HTML5' 카테고리의 다른 글

[html5]input autocomplete, autofocus, datalist 테스트  (0) 2012.01.13
[html5]입력값 검증하기(validation) - 간단한 예제 2 : setCustomValidity이용  (0) 2012.01.13
[html5]입력값 검증하기(validation) - 간단한 예제  (0) 2012.01.13
[html5]meter 테스트  (0) 2012.01.13
[html5]progress 테스트  (0) 2012.01.13


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'7. HTML5' Related Articles more
Comments