HTML - Semantic Web과 Semantic Tag

Semantic Web과 Semantic Tag

1-1. 정의

시맨틱 웹(Semantic Web): '의미론적인 웹'

• 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 컴퓨터가 처리할 수 있는 형태로 표현하고, 처리하는 프레임워크이자 기술.

시맨틱 태그(Semantic Tag): '의미론적인 태그'

기존 웹 태그	시맨틱 웹 태그
사람이 보기 용이함	컴퓨터와 사람 모두 의미정보 해석이 용이
예) <em>바나나</em>는 <em>노란색</em>이다.	예) <urn:바나나, urn:색, urn:노랑>
사람: 각 단어의 관계 해석 가능	사람: 각 단어의 관계 해석 가능
컴퓨터: 단순 문자열로 이해	컴퓨터: 각 단어의 관계 해석 가능

<!--기존 웹의 머리 부분 태그-->
<div id="header"> 내용 </div>

<!--시멘틱 웹의 header태그-->
<header> 내용 </header>

1-2. 등장 배경

1. 웹기술의 특징

• 간편한 정보표현과 전달 능력
• 인터넷의 실생활 확산: 웹상에 방대한 정보의 축적
• 키워드(keyword) 정보 접근만 허용

2. 기존 웹기술의 문제점

• 방대하고 불필요한 정보가 검색됨
• 컴퓨터가 필요한 정보를 추출, 해석, 가공하지 못해 사용자의 직접 개입 필요

3. 원인

• 컴퓨터가 정보자원의 의미를 이해하지 못함.

4. 해결: 시맨틱 웹의 특징

• 2001년 팀 버너스리 등 제시함
• 기존 웹을 확장
• 컴퓨터가 이해할 수 있는 의미적 상호운용성(semantic interoperability)
• 다양한 정보자원의 처리 자동화
• 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행
• 인간과 컴퓨터 모두 잘 이해할 수 있는 웹
• 인터넷의 분산 정보 자원을 의미적으로 통합한 거대한 지식 베이스의 구축

1-3. <img> vs 백그라운드이미지 속성의 <div>

면접 질문:
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

✅ 위의 질문에 대답할 수 있나요? 실제 면접에서 자주 다루는 질문입니다. 이를 설명하기 위해서는 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.

차이점

	img 태그	css 백그라운드 이미지 속성
이미지 검색 시	노출됨	노출 안 됨
콘텐츠와 관련성	있음	없음
웹페이지 성능	높음	낮음

활용

img 태그	CSS background-image 속성
검색 시 노출이 되도록	디자인적 요소로만 활용
콘텐츠에 관련이 있는 이미지	콘텐츠와 관련이 없는 이미지
웹페이지 성능 향상

---

참조, 출처:
위키피디아-시맨틱 웹
https://daco2020.tistory.com/m/54