시맨틱 태그를 쓰는 이유?
네이버, 구글 등은 모두 고유한 검색엔진을 가지고 있는데
이 검색 엔진이 웹페이지들을 방문할 때 시맨틱 요소를 중요한 키워드로 고려하여
시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다.
뿐만 아니라 여러 개발자가 함께 작업할 때에 가독성이 좋다.
시맨틱 요소의 종류
-
article : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
-
aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
-
footer : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
-
header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
-
nav : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 ul을 넣어 목록 형태로 사용합니다.
-
form : 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 해줍니다.(ex. 로그인) 단, 페이지 전환이 되는 액션이 발생할 수 있으므로, 주의가 필요합니다.
-
section : HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다. 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다.
-
main : 문서의 주된 콘텐츠를 표시합니다.
🐾