- 시맨틱 태그란?
시맨틱(semantic), 단어 그대로 의미를 담고 있는 태그를 일컫는다. HTML5에서 새롭게 도입된 요소다. 시맨틱 태그를 통해 웹 페이지 내의 콘텐츠들에 의미 단위의 중요성을 부과하여 보다 의미론적인 페이지 구성이 가능하다.
- 시맨틱 태그 종류
우리가 일반적으로 잘 알고 있고 사용하고 있는 div, span 태그는 이에 포함되지 않으며 다음과 같은 것들이 있다.
*header : 헤더를 나타냄
*nav : 내비게이션을 나타냄
*aside : 사이드에 위치하는 공간을 나타냄
*section : 본문의 내용들을 포함하는 공간을 나타냄
*article : 본문의 내용을 나타냄
*footer : 푸터를 나타냄
- 시맨틱 태그의 필요성
웹 사이트는 사람들이 찾고 이용할 때에만 그 존재 의의를 갖는다. 사람들이 웹 사이트를 이용하는 방식은 검색을 통해서이다. 일반적인 검색 포털 사이트에서는 보다 정확한 검색 결과를 위해 검색 엔진을 사용하는데, 검색 엔진은 전세계의 웹사이트 정보를 수집하여 이들을 가지고 사람들이 검색할 만한 키워드에 대응하는 인덱스를 만든다.
이 인덱스는 웹 사이트 내의 html 코드로 만들어진다. 그래서 웹 사이트가 가능한 한 검색 엔진에 의해 잘 노출될 수 있도록 html 코드를 잘 작성하는 것이 중요한 것이다.
html 코드를 잘 작성한다 함은, 결국 시맨틱 태그를 사용하여 웹 페이지 내의 정보를 의미 단위로 잘 구분해두는 것이다. 예를 들어, 외관상으로 나타나는 모습은 같더라도 이를 일반 코드가 아닌 시맨틱 태그를 사용하여 구현하면 개발자의 의도를 담은 코드 작성이 가능해지는 것이다.
따라서 시맨틱 태그를 사용하여 다음과 같은 장점을 얻을 수 있다. 시맨틱 태그를 사용하여 콘텐츠에 의미를 명확히 부여할 수 있게 됨과 동시에 검색 엔진 측면에서도, 코드를 읽는 개발자에게도 코드의 의미를 보다 파악하기 쉬워지므로 코드의 가독성이 높아지며 유지 보수가 쉬워진다.
참고 : poiemaweb 웹사이트
'TIL' 카테고리의 다른 글
| <자바스크립트 Javascript> this의 사용 (0) | 2021.12.29 |
|---|---|
| <자바스크립트 Javascript> 전역 객체 (0) | 2021.12.28 |
| <자바스크립트 Javascript> 스코프(Scope) (2) (0) | 2021.12.26 |
| <자바스크립트 Javascript> 스코프(Scope) (1) (0) | 2021.12.25 |
| <자바스크립트 Javascript> 객체 사용 시 주의점 (0) | 2021.12.24 |