시맨틱 요소

1. 시멘틱 요소란?

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라는 뜻을 가지고 있으며, 말 그대로 의미를 가진 요소를 말한다.

시멘틱 요소는 웹페이지의 레이아웃만을 위한 요소로 즉, 스스로 브라우저와 개발자에게 사용된 의미를 명확히 전달해주는 요소를 의미하는데, div, span 요소 등은 해당 요소가 어떤 내용인지 알기 위해서 내부 코드를 봐야알 수 있지만, 시맨틱 요소인 form, table, img, header등의 요소는 코드를 보지 않아도 해당 알 수 있다.

2. 시맨틱 요소 사용의 장점

1. 검색 엔진은 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려하기때문에 시맨틱 요소에 담긴 의미에 따라 검색 결과의 상위 노출이 결정된다.

2. 여러명의 개발자가 동업 시, div 요소를 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 편리하며, 요소 안에 채워질 데이터 유형을 예측하기 쉽다.

3. 시맨틱 요소의 종류

header: 일반적으로 페이지나 해당 섹션(section)의 가장 윗부분에 위치한다.
ex) 사이트의 제목,상단바,검색창

nav: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 ul을 넣어 목록 형태로 사용.

section: HTML문서에서 section부분을 정의, 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합

article: 문서의 전체적인 내용과는 별도의 독립적이고 자체 포함된 컨텐츠를 지정할때 사용

aside: 본문의 주요 부분 이외의 컨텐츠를 나타낼 때 사용. ex)사이드바,광고창

footer: 일반적으로 페이지나 해당 섹션의 가장 아랫부분에 위치한다.
ex)사이트의 라이선스, 주소, 연락처

main: 문서의 주된 콘텐츠를 표시한다.

출처: https://velog.io/@ko9612/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%EC%9A%94%EC%86%8C