html5 문서의 구조
html5 문서의 구조
가장 중요한 변화임에도 쉽게 놓치는 부분이 html5 의 시멘틱한 문서구조입니다.
여기에[서 html5 문서구조가 html4의 문서 구조와 어떻게 다른지를 먼저 살펴보도록 하자
1 html4 vs html5
html5 에서 두드러진 차이점은 시멘틱한 문서 구조입니다. 시멘틱 테그를 사용했을때와 사용하지 않았을대 어떻게 다른지 확인해보자
html4 에선 문서의 레이아웃을 구성할때 <div>를 이용해 텍스트나 이미지를 담아놓고 CSS 를 사용해서 각 <div> 를 원하는 형태로 배
치합니다. 이때 <div> 요소를 구분하기 위해 id="header" 등 식별자를 붙여서 표현하게 됩니다. 제작자가 임의로 붙이는 것이기 때문에
소스만 보아서는 문서 구조나 내용을 알기가 쉽지 않게 됩니다.
의미없는 <div> 태그로 작성된 문서의 구조를 개선하기 위해 html5 에서 태그만 보고도 문서를 쉽게 이해할 수 있도록 새로운 테그들이
도입이 되었는데 이를 시멘틱 태그라 불린다.
header |
사이트에 대한 소개 정보나 메인메뉴, 사이트 로고 등이 포함된다 |
nav |
사이트의 메뉴나 링크 같은 내비게이션 요소들 |
section |
실제 문서내용이 들어가며 대부분의 태그들이 여기에 사용되며 다른 요소들도 포함된다 |
article |
문서의 내용이 많을경우 여러개의 요소(article) 로 나눈다 |
aside |
문서의 중요 내용 이외에 내용들을 넣어 문서의 주영역 주변배치 |
footer |
작성자 정보등 보통 홈페이지 하단에 들어가는 내용을 표시 |
2 html5 의 DOCTYPE 정의
DOCTYPE 은 웹페이지가 어떤 유형으로 만들어 졌는지 현제 문서의 정의하는 부분으로 브라우저에게 어떤 형식으로 제작하였는지 선언
해주어 제대로 해석되도록 정의하는 것 입니다.
DOCTYPE은 html 이 아니기에 문서의 가장 상단에 정의하여야 합니다.
html5 의 DOCTYPE 은 아주 간단합니다 <!DOCTYPE html>