시맨틱 웹 (Semantic Web)
인터넷 사용자는 원하는 정보를 얻기위해 검색엔진을 이용한다.
검색엔진은 봇을 이용해 웹사이트의 정보를 수집한다.
그리고 이용자가 검색할 만한 키워드를 예상하여 키워드에 대응되는 인덱스를 만들어 둔다.
인덱스 생성 시 사용되는 정보는 결국 HTML코드이다.
즉, 검색엔진은 HTML코드로 의미를 파악해야하는데 이때 시맨틱 요소를 해석한다.
검색엔진은 <h1>요소 내의 콘텐츠를 웹 문서의 주요 제목으로 인식하고 인덱스에 포함할 확률이 높다.
즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠를 명확히 설명하는 역할을 한다.
시맨틱 웹이란 웹페이지들에 메타데이터를 부여하여 의미와 관련성을 가지는 데이터베이스로 구축하려는 것을 의미한다.
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.
| non-semantic | div, span 등이 존재. 콘텐츠와 상관이 없음. |
| semantic | form, table, img 등이 있으며, 콘텐츠의 의미를 담고있다. |
HTML5에서 추가된 시맨틱 태그
| 태그 | 의미 |
| header | 헤더를 의미한다. |
| nav | 내비게이션을 의미한다. |
| aside | 사이드에 위치한 공간을 의미한다. |
| section | 본문의 여러 내용을 포함하는 공간을 의미한다. |
| article | 본문의 주 내용이 들어가는 공간을 의미한다. |
| footer | 푸터를 의미한다. |
출처
https://poiemaweb.com/html5-semantic-web
Semantic Web | PoiemaWeb
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
poiemaweb.com
'개발 > 웹' 카테고리의 다른 글
| [HTML] 4. HTML 기본 태그 (0) | 2019.12.24 |
|---|---|
| [HTML] 2. HTML5 기본 문법 (0) | 2019.12.18 |
| [HTML] 1. 프런트엔드 개발자 학습 방향 (0) | 2019.12.17 |