HTML 기초 공부 - 7. 웹 페이지 구조를 설계하는 시맨틱 태그

웹이 점차 발전하고 웹이 가진 정보의 가치가 높아지면서,

사람이 아닌 기계도 쉽게 이해할 수 있도록 웹 페이지를 더욱 의미 있게 설계하는 일이 매우 중요해졌다.

이에 따라 새롭게 등장한 트렌드가 시맨틱 웹(sementic web)이다.

 

시맨틱은 사전적으로 '의미론적' 이라는 뜻으로, 시맨틱 웹은 '의미론적인 웹' 정도로 직역할 수 있다.

요컨대, 시맨틱 웹은 더 의미 있게 웹 페이지를 설계하는 트렌드이다.

그리고 이런 트렌드에 맞춰 시맨틱 태그를 사용하기 시작했다.

시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다.

 

지금까지 배운 태그도 알게 모르게 시맨틱 태그에 속하는 태그도 있고, 논 시맨틱(non-sementic) 태그에 속하는 태그도 있다.

대표적으로 table, form, a 태그 등은 시맨틱 태그에 속하고, div, span 태그 등은 논 시맨틱 태그에 속한다.

 

시맨틱 웹은 시맨틱 태그를 최대한 사용해 HTML 문서를 의미론적으로 설계하는 것이 중요하다.

하지만 아쉽게도 table, form, a 태그는 HTML 문서의 구성 요소로는 적합할지 몰라도 전체 구조를 설계할 만한 태그는 아니다.

그래서 웹 페이지의 구조를 설계하기 위한 목적으로 HTML5에서 시맨틱 태그가 새롭게 추가되었다.

 

시맨틱 태그의 종류

 

1. header 태그

 

header 태그는 웹 페이지에서 헤더 영역을 구분하는 데 사용한다.

 

<header>
    헤더 구성 요소
</header>  

 

헤더 영역은 웹 사이트의 최상단이나 좌측에 위치하고,

로고, 검색, 메뉴와 같은 요소들을 포함한다.

 

 

 

2. nav 태그 (navigation)

 

nav 태그는 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용한다.

 

<nav></nav>

 

보통 링크 영역에는 헤더 영역에서의 메뉴나 목적지 같은 요소가 많은데,

내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없으며

웹 사이트의 주요 탐색 링크 영역만 포함하면 된다.

 

 

3. section 태그

 

section 태그는 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용한다.

그래서 보통 section 태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함한다.

 

<section></section>

 

 

4. article 태그

 

article 태그는 웹 페이지에서 독립적인 영역을 구분할 때 사용한다.

 

<article></article>

 

article 태그를 section 태그와 혼동하기도 하는데,

section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고

article 태그는 어떤 웹 페이지에서든 독립적으로 사용할 수 있는 영역을 구분한다는 점에서 차이가 있다.

 

 

5. aside 태그

 

aside 태그는 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서

article 태그나 section 태그로 영역을 구분할 수 없을 때 사용한다.

 

<aside></aside>

 

 

6. footer 태그

 

footer 태그는 웹 페이지에서부터 푸터 영역을 구분할 때 사용한다.

푸터 영역은 일반적으로 웹 페이지의 최하단에 있고,

저작권 정보, 연락처, 사이트 맵 등의 요소들을 포함한다.

 

<aside></aside>

 

 

7. main 태그

 

main 태그는 웹 페이지의 주요 내용을 지정할 때 사용하는 태그이다.

 

main 태그에는 문서에서 반복해서 등장하는 요소를 포함해선 안 된다.

또한 main 태그는 article, aside, footer, header, nav 태그의 하위에 포함할 수 없다.