html5 시맨틱 태그 종류

html5 버전에서는 시맨틱 태그(Semantic Tag) 즉, 의미론적인 태그를 지원합니다. 이것은 있으나 없으나 문서의 모습이나 형태가 변하지 않습니다. 하지만, 유지보수하거나 다른 사람이 이 코드를 봤을 때 한눈에 어디서부터 어디까지가 이 영역안에 있는 태그인지 확인할 수 있습니다. 여기서 영역안에 있는 태그의 이름이 시맨틱 태그의 역할입니다.

시맨틱 태그

시맨틱 태그는 보통 레이아웃을 설정할 때 사용합니다. 위 사진과 같이 html4까지는 <div>는 레이아웃을 설정할 때 뿐만 아니라 그 외에 class, id 값을 설정할 때 사용됩니다. 

그러면 코드에 <div> 태그가 업청 많아지겠죠? 그래서 html5 부터는 보다 편리하고 가독성도 높이는 시맨틱 태그가 탄생하게 되었습니다.

시맨틱 태그의 종류

<header> : 화면 상단에 위치하며 보통 로고, 로그인, 회원가입 등을 포함합니다.

<nav> : 보통 <header> 영역의 아래쪽에 위치하며 메뉴를 표현할 수 있습니다.

<section> : 하나의 주제를 그룹화할 때 사용합니다. (ex 뉴스 기사의 제목)

<article> : 하나의 주제에 대해서 그 내용에 대해 설명할 떄 사용합니다. (ex 뉴스 기사, 블로그 글)

<aside> : 흔히 사이드바라고 불리는 곳으로 보통 광고, 검색 기능, 카테고리 등을 표현합니다.

<footer> : 화면 하단에 위치하며 보통 이메일, 저작권 표시 등을 표현합니다.

<section>과 <article>의 차이점

※ 이 두 태그는 별다른 차이점을 발견할 수 없습니다. 대체로 <section>은 전체적인 내용을 말하고, <article>은 전체적인 내용과 별도로 독립적인 내용이 들어갈 때 사용합니다.

이 두 태그를 신문기사로 예를 들어보겠습니다.

타이틀 제목이 있는 하나의 기사거리를 <article>이고, 타이틀 제목에 대한 내용을 <section>으로 나눌수 있습니다.

혹인, 블로그로 예를 들어보면 본문 내용과 댓글의 영역이라고 할 수 있습니다.

<article>
   <section>본문 내용</seciton>
   <section>댓글 영역</section>
</article>