HTML5에서 두드러진 특징 중의 하나는 시맨틱 태그입니다.
HTML4에서는 웹 문서의 레이아웃을 구성할 때 <div>를 이용해 텍스트나 이미지를 담아놓고 CSS(Cascading
Style Sheet)를 사용해서 각 <div>를 원하는 형태로 배치하였습니다. 이때 div 요소를 서로 구분하기
위하여 id="header"나 id="nav"와 같이 식별자를 붙입니다. 페이지 상단의 내용 부분을 <div id="header">
라고 해도 되고 <div id="content1">이라고 해도 아무 문제가 없는 것이죠. <div>라는 태그는 아무
의미가 없고 그 안에 들어있는 내용들이 제작자가 붙이는 id에 따라 구분되는데, 웹 페이지 제작자가 임의로 붙이는
것이기 때문에 소스만 보아서는 문서 구조나 내용을 알기가 어렵습니다.
의미없는 <div> 태그로 구성된 문서의 구조를 개선하기 위해 HTML5에서는 태그만 보고도 문서를 쉽게 이해 할 수 있도록 의미를 가지는 새로운 태그들을 도입했는데, 이것을 '시맨틱 요소(Semantic Element)또는 시맨틱 태그 라고 합니다.'시맨틱(Semantic)'이란 '의미를 갖는다'는 뜻으로 각 태그가 스스로 의미를 지닌다는 뜻 입니다.
| header | 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨. |
|---|---|
| nav | 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함됨. |
| section | 실제 문서 내용이 들어갑니다. 대부분의 태그들이 여기에 사용되고 또 다른 section 요소를 포함할 수도 있음. |
| article | 문서 내용이 많을 경우 여러 개의 article 요소로 나눌 수 있음. |
| aside | 문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치 함. |
| footer | 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음. 주로 문서 하단에 배치. |
HTML5의 시맨틱 요소로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 어느 부분이 메뉴인지, 그리고 어느 부분이 실제 내용인지를 쉽게 알 수 있습니다. 이렇게 소스만으로도 문서 내용을 알 수 있게 되면 검색 엔진에서 웹 문서 내용을 검색할 때 필요한 부분만 쉽게 찾아서 검색할 수 있습니다. 또한 시각 장애인을 위한 화면 판독기 같은 웹 보조기구를 통해 웹 문서를 이용할 때도 웹 문서를 더욱 정확하게 알 수 있게 되고 그만큼 내용을 잘 전달할 수 있게 됩니다.
DOCTYPE은 이 웹 페이지가 어떤 유형으로 만들어졌는지, 즉 현재 문서의 유형을 정의하는 요소입니다. 브라우저마다
조금씩 호환성이 다르기 때문에 아무리 완벽한 웹 문서를 만들었다 하더라도 DOCTYPE을 선언해 놓지 않으면
브라우저별로 결과가 다르게 보일 수 있습니다.
DOCTYPE은 HTML 태그가 아닙니다. 따라서 웹 문서의 가장 첫번째 줄, 즉 웹 문서를 시작하는 <html> 태그보다
먼저 와야 합니다.
HTML5에서의 DOCTYPE은 아주 간단 합니다.
<!DOCTYPE html>
대소문자 구별도 하지 않고 단지 <!DOCTYPE html>만으로 문서 유형을 지정할 수 있게 된 것입니다. 특히
HTML5는 HTML 문법을 사용하는 문서를 표준 모드로 인식해 동작하기 때문에 DOCTYPE을 이리저리 바꿔 지정할 필요가
없습니다.단순히 <!DOCTYPE html>만 있으면 표준 모드로 동작합니다.
