[HTML5] 2.새로운 구조

in Web on HTML5


새로운 구조



HTML5에서는 기존의 XHTML보다 더 의미론적인 구조를 가진 웹 문서를 만들 수 있도록

새로운 요소들이 추가되었습니다.

예를 들면 웹 문서의 일반적인 구조가 header(머리말), content(내용), footer(꼬리말)의 형식으로 되어 있지만

XHTML에서는 이러한 의미를 가진 요소들이 없었기 때문에

header 영역인 경우 그룹화 요소인 <div>에 id 속성을 이용하여 <div id=”header”>와 같이

그 의미를 대신했습니다.

HTML5에서는 이러한 부분을 해결할 수 있는 <header> 요소, <nav> 요소,

<section> 요소, <footer> 요소 등 문서 구조에 대한 요소들이 새롭게 추가되어

더욱 의미 있는 마크업이 가능해 졌습니다.

하지만 문법 규칙에 있어서는 XHTML에 비해 많이 유연해졌습니다. 


1. XHTML에서는 소문자만 써야함 -> HTML5 대소문자 구분 안함


2. <br />, <img />, <input /> 등 빈 요소를 

<br>, <img>, <input>로 처리하여도 문법적으로 문제 발생 안함



다음은 HTML5 의 기본 문서 구조입니다.



<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML5</title>
</head>
<body>
	
</body>
</html>



기존의 XHTML 기본 문서 구조와 비교하면 매우 간단해졌죠?

그런데 현재까지 모든 브라우저에서 HTML5를 지원하고 있는 것은 아닙니다.

특히, IE9.0 이하 버전에서는 HTML5가 지원되지 않습니다.

본인이 사용하는 브라우저가 HTML5를 얼마나 지원해 주는지 알고 싶다면

HTML5TEST에서 확인하시길 바랍니다!