시맨틱 요소

HTML5는에서는 시맨틱 웹(semantic web)이 중시되면서 여러가지 시맨틱 요소들이 만들어졌고, 기존이 테그로는 코드 내용을 알기위해서 확인이 필요했던 반면 의미가 부여된 시맨틱 코드를 사용하면서 요소 내부의 정보를 예측가능하게 되었습니다.

시맨틱 요소의 장점

• 네이버, 구글 등에서 검색엔진이 시맨틱 요소를 중요한 키워드로 참고하여 효율적인 검색이 가능하게 합니다.
• 시맨틱 요소에 담긴 의미만으로 내부에 어떤 코드가 들어가 있을지 예측이 가능하다

시맨틱 요소

많은 시맨틱 요소가 있지만 그 중에서 많이 쓰이는 시맨틱 요소는 다음과 같습니다.

<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 배치 가능
  
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용
  
<main> : 문서의 주된 콘텐츠를 표시
  
<section> : 문제 전체적인 내용과 관련되어 있는 콘텐츠들의 집합으로, html에서 특정한 구역을 의미
  
<article> : 독립적이고 자체 포함된 콘텐츠를 지정
  
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용
  
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
     

시맨틱 요소 사용 예시

html로 웹 페이지 구조를 만들 때 다음 그림과 같이 시멘틱 요소를 활용 할 수 있습니다.

기존의 html 코드를 사용한 것보다 대략적인 웹페이지 구조를 이해하기 편리하며, 시멘틱 요소를 사용하는 것이 반드시 지켜야 할 의무는 아니지만 프로젝트에서 다른 개발자와 함께 작업하거나 향후 완성된 코드의 유지보수를 고려한다면, 시맨틱 요소를 사용한 웹페이지 구조화하는 것은 매우 효율적인 방향이라 생각합니다.

참 고 : 나무위키: HTML/태그, MDN:Semantics, w3School:HTML Semantic Elements