Semantic 태그


HTML4 는 화면 구성을 대부분 <div> 로 하였고, 이 태그들을 구분하기위해 id 속성을 이용했다.
그러다보니 홈페이지 구조를 분석하고 이해하기가 어려웠고, HTML5 에서는 이러한 문제를 해결하기 위해 표준화된 시맨틱 태그 를 사용해 태그만 보고도 웹 문서의 구조를 분석하기 용이하게 만들었다.
레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해두어 태그만 보고도 헤더가 어디인지, 콘텐츠 영역, 네비게이션 영역은 어디인지 알기 쉽다.

<header> 태그 - 머리말

사이트 전체, 혹은 본문의 제목 부분이 될 수 있다.
주로 페이지 맨 위쪽이나 왼쪽에 삽입되며, <form> 을 사용해 검색 창을 넣거나, <nav> 를 사용해 사이트 메뉴를 넣는다.

<nav> 태그 - 네비게이션 링크

같은 사이트, 혹은 다른 사이트의 문서로 연결하는 링크를 나타낸다.
네비게이션 메뉴 뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에서도 사용된다.

<section> 태그 - 주제별 콘텐츠 영역

문서에서 콘텐츠를 주제별로 묶을 때 사용된다.
섹션 제목을 나타내기 위해 <h>태그가 함께 사용된다.

<article> 태그 - 콘텐츠 내용

웹 상의 실제 내용을 나타낸다.
이 부분만 뗴어내어 독립적으로 사용해도 완전히 하나의 콘텐츠가 될 수 있는 영역이다.

<aside> 태그 - 본문 이외의 내용

본문 내용 외에 주변에 표시되는 기타 내용들이다.
필수 요소가 아니기 때문에 광고, 링크 모음 등 문서의 주요 내용에 영향을 끼치지 않는 내용들을 넣기위해 사용한다.

<footer> 태그 - 제작 정보와 저작권 정보

사이트 제작자의 연락처, 저작권 정보를 표시한다.
사이트 링크 모음 등을 표시하기도 한다.

<address> 태그 - 제작자 정보와 연락처 정보

사이트 제작자의 이름, 웹페이지, 또는 피드백을 위한 연락처 정보와, 웹 사이트와 관련된 우편 주소 등을 표시한다.

<div> 태그

콘텐츠에 CSS 를 적용하여 시각적 효과를 주려고 할 때 콘텐츠를 묶기 위해서 사용한다.

ETC

<section>, <article>, <div> 의 구분:
서로 관계되는 내용들이라면 <section>
내용이 독립적이라면 <article>
의미적으로 관계가 없다면 <div>