1. 시멘틱 태그란?
시멘트 태그는 기존의 HTML 태그들 중 자주 사용되던 div 태그의 역할을 분담하는 용도의 태그이며, 그 자체로 웹 페이지의 어느 한 영역을 의미하는 태그인데,
이러한 시멘트 태그들은 기능적으로 div와 별반 차이가 없으나 웹 페이지 각각의 영역을 명확하게 표시함으로서 가독성과 영역의 구분을 높여줄 수 있는 태그입니다.
이는 협업을 하는 개발자들 간에 해당 태그 영역을 좀 더 확실히 볼 수 있도록 해주는데 그 의미가 있다고 볼 수 있습니다.
2. 시멘틱 태그들의 종류
header : 웹 페이지의 최상단 영역을 의미합니다. 이는 곧 각각의 웹페이지의 홈에서 윗쪽 메뉴바를 담당 하는데 사용 됩니다.
nav : 웹 페이지의 특정 구역을 이동하거나 다른 외부 사이트로 이동을 할때 사용합니다. 즉 navigator의 역할을 수행하며 그 안에는 ul, ol, li 태그들이 메뉴로서 웹페이지를 구성하게 됩니다. 그래서 header 부분에 메뉴가 있다면 header 태그 안에 nav를 작성 해주고, aside 부분에 메뉴가 있다면 aside 태그 안에 nav를 작성 하거나, 혹은 nav만 독립적으로 사용 할 수 있습니다.footer : 웹페이지 홈의 최하단 영역을 의미합니다. 만약 웹페이지가 기업에 대한 홈페이지라고 하면 해당 기업의 간략한 정보가, 특정 단체라면 그 단체에 대한 간략한 정보가 드러나는 영역을 의미하며 기본적으로 주소, 전화, 이메일 등의 컨텐츠가 작성 됩니다.
main : 주요 내용 및 컨텐츠가 들어가는 영역을 의미하며 페이지 마다 하나의 main 태그만을 사용 하는것을 권장합니다.
article : 주로 반복적으로 생성 될 만큼 반복적으로 사용 할 수 있는 영역이거나, 혹은 독립적으로 다른 페이지에서 사용 될 수 있는 컨텐츠 영역을 설정할때 사용됩니다. 기사, 블로그 포스트, 댓글 영역이 이에 해당합니다.
section : main 안의 각 주제별로 모은 영역들을 구분 할때 사용합니다. 예를 들어 정치 섹션, 사회 섹션, 문화 섹션과 같이 해당 주제로 모인 콘텐츠 내용들을 구분 할때 사용하는 태그입니다.
aside : 화면의 측면 사이드 영역을 의미하며 마찬가지로 메뉴가 메인으로 들어가는 영역입니다.
footer : 화면 하단 사이드 영역을 의미하며 주로 저작권 정보, 연락처 정보 등이 들어갑니다.
결론을 말하자면 이러한 시멘트 태그들에 CSS 요소를 혼합하여 화면 페이지의 각 구역을 보다 명확하게 표시할 수 있을 뿐만 아니라 개발 과정에서 코드를 작성하는 부분에 대한 가시성을 확보해주고, 협업 간의 소통을 보다 원활하게 진행시킬 수 있도록 도와주는 역할이 바로 이 시멘트 태그라고 할 수 있겠습니다.
