[HTML, CSS] 시맨틱(Sementic) 태그

시맨틱 태그

html5 이전에는 주로 div 또는 span 태그로 헤더와 바디영역의 태그들을 묶어 css 작업을 함

따라서 div 와 span 태그의 양이 과도하게 많아지는 현상이 발생되고, 

이 코드들이 각각 어떤 의미로 사용되는지 이해하기 어렵게 됨

이런 부분을 해결하고자 나온 것이 시맨틱(sementic: 의미론적) 태그.

 

시맨틱 태그의 레이아웃과 구성

header

홈페이지 상단부

보통 로고나 메인메뉴가 들어감

h1~h6 사이의 태그를 가지고 있어야함

내부에 또다른 header 나 footer, adderess 를 담을 수 없음

 

nav (=navigation)

탐색링크(메인메뉴)의 집합

 

main 

문서의 body 요소의 주 컨텐츠를 정의할 때 주로 사용

 

section

제목이 있는 주제별 컨텐츠

내부에는 반드시 타이틀이 들어가야함 (h2~h6 사이의 태그가 들어가는 것을 권장)

 

article 

컨텐츠나 내용이 웹 사이트에서 독립적인 경우 → 예) 포럼 게시물, 신문기사 등..

내부에는 반드시 타이틀이 들어가야함 (h2~h6 사이의 태그가 들어가는 것을 권장)

 

figure 

그림, 도표, 사진 삽입

 

figcaption 

figure 태그에 삽입된 이미지에 대한 주석,설명(caption) 등을 삽입

 

footer 

홈페이지 하단부

저작권 정보, 연락정보 등이 담기는 부분

한 페이지에 여러번 작성을 할 수는 있지만, 권장하지는 않음

 

aside 

내부 컨텐츠를 제외한 외곽 컨텐츠 작성 → 예) 최근 본 상품, 스크롤 탑 버튼 등..