시맨틱 웹 (Semantic Web)
Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다.
그렇다면 시맨틱 웹은 '의미있는 웹'정도로 이해할 수 있는데
의미 있는 웹이란 어떤 웹을 가리키는 걸까요?
시맨틱 웹의 목적
인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라
정보 검색시 불필요하거나 덜 연관성있는 정보를 필터링할 수 있는것이 필요해졌습니다.
단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 사람이 아닌 객체가 자동으로 그 의미를 해석하고
정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다.
검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없습니다. 죽은거나 다름없어 존재하지 않다고 보는것이죠.
검색엔진은 매일 웹사이트 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다.
이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데, 그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.
시맨틱 태그 (Semantic Tags)
<!-- 시맨틱 태그 미사용 예 -->
<div>
<div style="font-size: 30px;">
지금은 코드를 확인중 입니다.
</div>
</div><!-- 시맨틱 태그 사용 예 -->
<header>
<h1>
지금은 코드를 확인중 입니다.
</h1>
</header>상단부분 HTML과 하단부분의 HTML을 웹으로 나타낼 때에 보이는것은 같은 모습을 띕니다.
하지만 첫번째 예시는 태그만 봐서는 어떤 내용인지 유추하기 어렵습니다.
반대로 두번째 예시는 "header"와 "h1"이라는 명확한 의미가 있는 태그를 사용함으로써
코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있습니다.
non-시맨틱 요소 예시
<div>
<span>div, span과 같은 태그들은 HTML에서 태그를 삽입했을때는 의미적인 부분이없기 때문에 non-시맨틱 요소로 봅니다.
시맨틱 요소 예시
<img>
<iframe>
<table>
<header>
<footer>
<main>
등등....하지만 시맨틱 요소들의 태그들은 HTML에 태그를 삽입할때 태그에 해당하는 기능들에 대해서 시각적으로 기능을 제공하기 때문에
의미적으로 기능을 한다고 볼 수 있습니다.
출처: https://www.w3schools.com/html
<img> VS <div> + background-image두 방식 모두 이미지를 웹화면으로 구현할 수 있는 같은 역할을 수행하는 태그지만,<img>는 의미가 내포되어 있는 시맨틱 태그임에 반해<div>는 non-시맨틱 태그이기 때문에 사용 용도가 다릅니다.
<img> 태그를 쓸 때
- 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 (alt 속성 함께 사용)
- 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 (마찬가지로 alt 속성 함께 사용)
- 페이지 프린트시 이미지가 함께 나오도록 할 때
<div> 태그 + background-image 속성을 쓸 때
- 이미지가 콘텐츠의 일부가 아닐 때
- 이미지 스프라이트를 이용할 때
- 말그대로 웹문서의 배경을 채우기 위한 용도일 때
- 페이지 프린트시 이미지가 나오지 않게 할 때
