semantic element 시멘틱 요소

의미 요소(semantic element)

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다.

의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다.

---

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

첫째, 검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다. 여러분이 키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여 줍니다. 그런데 검색 엔진이 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려합니다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다.

둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

---

HTML5에서 추가된 의미 요소

HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다.

• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
• <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
• <main> : 문서의 주된 콘텐츠를 표시합니다.
• <section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 <section>은 섹션(section)이란 제목을 가지고 있습니다.(항상 그런 것은 아닙니다.) <section> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 <div> 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택입니다.
• <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
• <figure, figcaption> : 책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션(caption)이 위치하게 됩니다. HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있습니다. figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용합니다. figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용합니다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.

다른 HTML 요소와 마찬가지로, 시맨틱 요소와 의미를 모두 암기하고 있을 필요는 없습니다. 필요할 때 검색해서 사용할 수 있을 정도면 충분합니다. 관련된 내용을 추가적으로 학습하고 싶다면 아래 레퍼런스를 참고하세요.

 

나무위키: HTML/태그, MDN:Semantics, w3School:HTML Semantic Elements, http://www.tcpschool.com/html/html5_element_semantic