티스토리 뷰
시맨틱 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. 예)h1
시맨틱 요소의 사용이유:
1.검색 엔진이 시맨틱 요소를 중요한 키워드로 고려하여 검색한다.
2.여러 사람이 개발할 때 div요소를 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문. 요소 안에 채워질 데이터 유형도 예측이 쉬워짐
시맨틱 요소의 종류:
article:독립적이고 자체 포함된 콤텐츠를 지정
section: 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용
aside:본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. 주로 사이드바나 광고창에 사용
footer:일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용.
header:일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창등이 안에 들어 갈 수 있음.
nav:내비게이션의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다
main:문서의 주요 콘텐츠를 표시
<예시>
댓글