1) HTML5의 문서 구조
가장 중요한 변화임에도 쉽게 간과할 수 있는 부분이 HTML5의 시멘틱한 문서 구조입니다. 여기에서는 HTML5의 문서 구조가 HTML 4.01의 문서 구조와 어떻게 다른지를 먼저 살펴보겠습니다.
2) HTML 4.01의 문서 구조 vs HTML5의 문서 구조
HTML 4.01에서는 웹 문서의 레이아웃을 구성할 때 <div>를 이용해 텍스트나 이미지를 담아두고 CSS(Cascading Style Sheet)를 사용해서 각 <div>를 원하는 형태로 배치하였습니다. 이때 <div> 요소를 서로 구분하기 위해 id="header"나 id="nav"와 같이 식별자를 붙입니다. 페이지 상단의 내용 부분을 <div id="header">라고 해도 되고 <div id="content1">이라고 해도 아무 문제가 없는 것이죠. <div>라는 태그는 아무 의미도 없고 그 안에 들어 있는 내용들이 제작자가 붙이는 id에 따라 구분되는 웹 페이지 제작자가 임의로 붙이는 것이기 때문에 소스만 보아서는 문서 구조나 내용을 알기가 어렵습니다.
3) HTML5의 문서 유형 지정 - DOCTYPE
DOCTYPE은 이 웹 페이지가 어떤 유형으로 만들어졌는지, 즉 현재 문서의 유형을 정의하는 요소입니다. 브라우저마다 조금씩 호환성이 다르기 때문에 아무리 완벽한 웹 문서를 만들었다 하더라도 DOCTYPE을 선언해 놓지 않으면 브라우저별로 결과가 다르게 보일 수 있습니다.
다음은 XHTML 1.0의 DOCTYPE의 예입니다.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
하지만 HTML5에서의 DOCTYPE은 아주 간단합니다.
|
<!DOCTYPE HTML> |
대소문자 구별도 하지 않고 단지 <!DOCTYPE HTML>만으로 문서 유형을 지정할 수 있게 된 것입니다. 전에 비해 무척 단순해졌지요? 특히 HTML5는 HTML 문법을 사용하는 문서를 표준 모드로 인식해 동작하기 때문에 DOCTYPE을 이러저리 바꿔 지정할 필요가 없습니다. 단순히 <!DOCTYPE HTML>만 있으면 표준 모드로 동작합니다.
4) 단순함
HTML5에서 단순해진 것은 DOCTYPE 뿐만이 아닙니다. 마크업 문서의 문자 인코딩을 명시하고자 할 때, 이를 수행하는 가장 최선의 방법은 서버에서 올바른 Content-Type 헤더를 보내는 것입니다. 여기에 한 번 더 보호 장치를 하고자 한다면, <meta> 태그를 이용해 문자 조합(charater set)을 명시할 수 있습니다.
다음은 HTML 4.01로 작성된 웹 문서의 <meta> 태그 선언 예입니다.
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
이와 같은 역할의 HTM5 코드는 훨씬 단순하고 기억하기 쉽습니다.
|
<meta charset=utf-8" /> |
DOCTYPE과 마찬가지로 이렇게 단순화된 문자 인코딩 태그는 브라우저가 문서를 해석하는 데에 필요한 최소한의 문자만을 포함하고 있습니다. <script> 태그는 군더더기를 뺄 수 있는 또 다른 항목입니다.
다음은 <script> 태그의 type 속성에 흔히 쓰이는 ‘text/javascript’를 명시하는 예입니다.
|
<script type="text/javascript" src="file.js"></script> |
그런데 브라우저는 이런 속성이 필요하지 않습니다. 이렇게 명시하지 않아도 브라우저는 이 스크립트가 웹에서 가장 인기 있는 스크립트 언어인 자바스크립트로 작성되었을 것이라고 가정할 것입니다. 사실 자바스크립트가 웹에서 사용되는 거의 유일한 스크립트 언어입니다.
|
<script src="file.js"></script> |
마찬가지로 CSS 파일을 링크시킬 때에서 매번 ‘text/css’라는 type 값을 명시하지 않아도 됩니다.
|
<link rel="stylesheet" type="text/css" href="file.css"> |
단순히 이렇게만 써도 됩니다.
|
<link rel="stylesheet" href="file.css"> |
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
|---|---|
| HTML5의 시멘틱 태그 (0) | 2016.10.12 |
| 둥근 모서리 (0) | 2016.09.17 |
| 텍스트 에디터 (0) | 2016.09.16 |
| 하위 브라우저에서 HTML5 표현되게 하기 (0) | 2016.06.22 |
