시맨틱 웹과 시맨틱 태그에 대한 기본 지식
웹사이트 사용자가 점점 증가하면서 검색엔진에 노출이 매우 중요해졌다. 검색엔진에 노출되어야 접속하는 사람이 많아지기때문에 강력한 권력 중의 하나이다.
웹사이트 정보를 검색엔진이 어떻게 수집할까?
검색엔진은 로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집(크롤링)한다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어준다.(인덱싱)
이로 인해 인덱서가 인덱싱을 생성하는데 사용되는 정보들은 검색로봇이 모은 정보들은데 그 정보들은 결국 웹사이트의 HTML코드인 것이다. 즉, 시맨틱 요소를 해석하게 되는 것이다.
<h1>ssooyeon</h1>
<div>ssooyeon</div>이와 같은 HTML 코드를 입력했다고 했을 때, div에 css로 수식하여 h1과 동일한 외형을 갖는다 해도 2행 요소는 non-semantic요소이기 때문에 아무 의미를 갖고 있지 않는다. 1행 요소는 header(제목) 중 가장 상위레벨이라는 의미를 담고있어 개발자가 의도한 요소의 의미가 명확하게 들어나고 있다.
따라서 시맨틱 태그를 상황에 맞게 작성해야 효과적인 크롤링과 인덱싱이 가능하며 코드의 가독성을 높일 수 있고 쉽게 유지보수 할 수 있다.
시맨틱 태그로 인해 컴퓨터가 HTML 요소의 의미를 명확하게 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
- 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할이라고 정의한다.
- 시맨틱 웹(Semantic Web)이란 시맨틱 웹이란 웹에 존재하는 수많은 웹 페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
**HTML5 추가된 시맨틱 태그
| Tag | Description |
| header | 헤더를 의미 ex) 제목 |
| nav | 내비게이션을 의미 ex) 목록 |
| aside | 사이드에 위치하느 공간을 의미 ex) 광고 등 위치 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미 |
| article | 본문의 주내용이 들어가는 공간을 의미 |
| footer | 푸터를 의미 ex) 사이트 정보 및 회사 연락처 |
