[HTML 5] 시맨틱(Semantic) 태그

 

시멘틱 태그(Semantic Tag)

시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 표현해주어 

검색 엔진 최적화(SEO)를 비롯한 웹 접근성과 가독성을 향상시킨다.... 라고한다.

 

간단하게 이야기 하면 전체 body 영역 안에서 각각의 영역을 지칭하는 태그... 라고 하면 될지 모르겠다.

의미 태그라는 뜻인데,    ....의미 태그라는 의미 인데 ㅎㅎ

 

뭐 어렵게 생각할 건 없다. 각각 어디에 위치하고 속하게 되는지를 설명한다고 보면 될 것 같다. 

 

michalbemowski.pl

 

header 태그는 웹 페이지의 상단을, nav 태그는 메뉴를, article 태그는 본문을, section 태그는 구획을 의미한다.

이를 적절히 사용하면 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다. 

 

즉 구조를 설계 해두면, 시멘틱 태그를 활용해서 조금더 세분화 해서 영역을 구분하고, 적절하게 배치하기 좋다는 이야기 이다. 

 

---

시맨틱(Semantic) 태그  모음

Tag	설명
header	사이트의 머리부분에 사용
main	메인 콘텐츠를 나타내는데    한번만 사용한다.
section	제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소.
article	개별 콘텐츠를 나타내는 요소
aside	좌우측의 사이드 영역, 주로 간접 컨텐츠나 보조 컨텐츠를 나타낸다 (요즘은 광고가 겁내 많다. )
footer	사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
hgroup	제목과 부제목을 묶어서 나타내는 요소
nav	웹 페이지 메뉴를 만들 때 사용(사이트 내, 외부로 이동, 메뉴, 목차, 색인 등등 )

 

---

header 와 footer 

header 은 홈페이지의 상단 부분을 구성하는 태그이고, footer 은 하단 부분을 구성하는 태그이다.

둘 다 공통적으로 들어가는 요소로는 title 과 nav 가 있고, 각각 다른 속성값을 가지고 있다.

헤드부분은 주로 페이지의 제목 및 네비게이션바 등을 설정하기 위해 사용되며, 

푸터는 그밖의 편의 기능이나 아이콘 베치, 출처, 주소, 소유권 기타 등등을 표시하는데 주로 쓰인다....요즘은 광고

nav

네비게이션(navigation)이다. 말 그대로 메뉴를 만들어서 이동을 하기 위한

메뉴, 목차, 색인 같은걸 만들 때 사용한다. 

aside

직역과 의미가 같다. 뭐 옆에 붙어있다는 말인데, 이건 주요 섹션의 옆에 붙는 것을 의미한다.

주로 nav의 반대편에 붙는데 아무래도 nav와 좌우가 햇갈려서 쓰는거 아닌가싶다. 아닌가? 

보조컨텐츠나 설명을 덧붙이거나... 그런 용도다. 요즘은 그냥 구글 광고가 더럽게 많다. 

hgroup

제목과 부제목을 역어서 나탄낸거라고 하지만, 뭐... 제목라인을 묶어둔 것 정도로 생각하자. 

main

딱 느낌이 오듯이 메인디쉬. 즉 페이지의 가장 주요 내용을 표시하는 영역이다. 
문서에서 한번만 사용하게 되는데, header, footer, nav, article, section, aside의 하위로 작성할 수 없다고 한다. 
아직 사용해본적이 없다 -_-

section

섹션은 구역이라는 뜻인데 말 그대로 본문 컨텐츠의 각각 구분이다. 

여러 내용을 포함하게 되는데 각각의 섹션에서는 다시 header, footer를 포함 할 수 있다. 

article

본문의 내용을 담는다. 주 내용이 들어가는 문단(?) 정도가 될 것 같다. 

직역하자면 '물건, 기사, 조항, 품목' 정도가 되는데

본문의 각 내용을 의미한다. 

실제적으로는 하나의 섹션(section)에 여러 아티클(article)이 들어가는데 

 

과거의 산물인 신문을 보면 한 페이지 안에도

각 구역[섹션(section)] 이 있을 수 있고 

그 안에도 각각 여러 기사[아티클(article)]가 담길 수 있다. 

또는 논평을 양쪽입장 모두 담는경우 아래 같은 구도로 지면이 실리는데 

 

대략적인 이미지는 아래처럼 나타낼 수 있다. 

전체가 섹션, 각각의 해더, 

그리고 각 의견이 아티클이 될 수 있다. 

 

주변 이미지는... AI 가 그려준  이미지여서 그렇다. 

 

간략하게 시맨틱(Semantic) 태그를 알아보았다. 

오늘은 여기까지.

 

끝.