HTML - Sementic Element

시맨틱 요소(Sementic Element)란?

시맨틱이란 '의미가 있는, 의미론적인'이라고 해석할 수 있다. 

 

 

 

시맨틱 요소를 사용해야 하는 이유

• 검색 엔진이 시맨틱 요소를 더 좋아하기 때문이다. 네이버, 구글 등의 검색 포털은 모두 고유한 검색 엔진을 보유하고 있다. 이러한 검색 엔진은 입력된 키워드를 각 웹페이지에서 포함하고 있는지 확인하여 결과를 보여준다. 이러한 검색 엔진들은 시맨틱 요소를 중요한 키워드로 고려한다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과 상위 노출이 결정될 수 있다는 것이다.
• 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는것이 훨씬 편리하기 때문이다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉬워진다는 장점이 있다.

 

 

시맨틱 요소의 종류

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정한다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다. 특별한 경우가 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
• <nav> : Navigation의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
• <main> : 문서의 주된 콘텐츠를 표시한다.