1. 시맨틱 웹(Sementic Web)이란?
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.
인터넷이 활성화 됨에 따라 웹의 사용은 폭발적으로 늘어났고, 그에 따라 웹 상에 축적된 정보의 양이 지나치게 비대해져서 많은 문제가 생겼습니다.
웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다.
또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어 모든 정보를 사용자가 직접 개입해서 처리해야하는 문제가 발생했습니다.
위와 같은 문제로 팀 버너리스의 팀은 웹 기술의 비전으로 시맨틱 웹(Semantic Web)을 제시했습니다.
2. 시맨틱 웹의 장점
시맨틱 웹은 개발자가 의도한 요소의 의미가 명확히 드러나고 있어, 코드의 가독성을 높이고 유지보수를 쉽게 합니다.
대부분 인터넷 사용자는 원하는 정보를 얻기위해 검색을 하고, 따라서 웹사이트는 검색엔진의 노출이 매우 중요합니다.
시맨틱요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색 엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌습니다.
3. 시맨틱 태그(Semantic Tags)
시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠를 명확히 설명하는 역할을 하며, 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확하게 해석하고 그 데이터를 활용 할 수 있는 시맨틱 웹이 실현될 수 있습니다.
3-1. Semantic Tag와 Non-semantic Tag
-
Semantic Tag
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다. -
Non-semantic Tag
div, span 등이 있으며 이들 태그는 content에 대하여 어떠한 설명도 하지 않습니다.
3-2. HTML5 에서 새롭게 추가된 시맨틱 태그도 있습니다.
- header : 헤더
- nav : 내비게이션
- aside : 사이드에 위치하는 공간
- section : 본문의 여러 내용(article)을 포함하는 공간
- article : 본문의 주 내용이 들어가는 공간
- footer : 푸터
📌 Assignment
사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
🙋 두 방법 모두 이미지를 삽입할 수 있지만, <img> 태그를 사용하게 되면 컴퓨터가 콘텐츠가 image 라는 것을 해석하고 검색엔진에서 검색이 되도 <div>는 검색이 되지 않을 수 있습니다.
또, 이미지가 로딩에 실패한 경우에 <img> 태그에는 alt 속성을 통해서 이미지에 대한 정보를 파악할 수 있지만 <div>태그는 어떤 이미지에 대한 정보를 파악하기 어렵습니다.
<img>를 쓸 때 (alt속성을 함께 사용)
- 콘텐츠 정보와 연관이 있는 이미지를 쓸 때
- 중요한 의미가 내포된 이미지를 쓸 때
- 페이지 프린트 시 이미지가 함께 나오도록 할 때
<div> 태그에 background-image속성을 추가할 때
- 이미지가 콘텐츠의 일부가 아닐 때
- 이미지 스프라이트를 이용할 때
- 말 그대로 웹문서의 배경을 채우기 위한 용도일 때
- 페이지 프린트 시 이미지가 나오지 않게 할 때
💡 시맨틱 태그를 사용하게 되면 태그의 의미와 정보를 파악하기가 쉽고 그만큼 정보를 찾는 시간이 줄어들게 되면서 높은 효율을 낼 수 있습니다.
따라서, 웹 사이트를 구성할 때 적절하게 시맨틱 태그를 사용하는 것이 좋습니다.
