시맨틱 요소(Semantic Element) 란?
HTML의 최신 버전인 HTML5에서는 시맨팁 웹(Semantic Web) 이 중시되면서 여러 시맨트 요소가 새롭게 만들어졌다. 시맨틱 (Semantic) 이란 ‘의미가 있는, 의미론적인’ 이라고 해석할 수 있다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다.
시맨틱 요소 중 하나인 <h1> 요소를 예를 들면, 최상위 제목을 표현할 때 사용하는 요소로 <h1> 을 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라 위아래로 간격을 주어 제목처럼 보이도록 한다.
이와 같은 효과는 <div> 와 <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있다. 그러나 <h1> 요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있다.
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용하였는데, 그러다보니 웹 페이제 하나에 <div> 요소가 수십 개씩 중첩되어 이론바 <div> 지옥이 되는 경우가 많았다.
시맨틱 요소를 사용해야 하는 이유
의미 있는 요소를 사용하는 것보다 <div> 요소를 사용하되 용도에 맞게 스타일을 부여하면 되는데 시맨틱 사용하는 이유는 뭘까?
1. 검색 엔진이 시맨틱 요소를 더 좋아한다.
- 네이버와 구글 등은 모두 고유한 검색엔진을 보유하고 있다. 사용자가 원하는 키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여준다. 이때, 검색 엔진이 웹 페이지를 방문할 때, 시맨틱 요소를 중요한 키워드로 고려한다. => 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다.
2. 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문이다.
- 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽다.
따라서 HTML 요소를 작성할 때, 항상 작성할 테이터를 가장 잘 설명할 수 있는 요소는 무엇일지 고려해야 한다.
시맨틱 요소의 종류
시맨틱 요소의 종류는 굉장히 많지만 주로 쓰이는 것은 다음과 같다.
<article>: 독립적이고 자체 포함된 콘텐츠를 지정한다.<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.<footer>: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.<header>: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.<nav>: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에<ul>을 넣어 목록 형태로 사용한다.<main>: 문서의 주된 콘텐츠를 표시한다.
Reference