Semantic Web & Tag, 시맨틱웹과 시맨틱 태그란?

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

위 질문에 대해 대답하기 위해서는 Semantic Web 과 Semantic Tag에 대해서 알고 있어야 한다.

1. Semantic Web이란?

“의미를 가지는 웹”

1. 등장배경

• 웹 기술이 발전하면서 수많은 정보들이 축적되었음
• 무분별한 정보의 축적은 다양한 문제상황들을 불러일으킴
• 컴퓨터가 스스로 정보를 해석, 가공할 수 없어 모든 정보를 사용자가 직접 개입해서 처리해야 되는 것
• 따라서, 기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.

2. ‘일반 Web’ vs ‘Semantic Web’

일반 web	Semantic Web
컴퓨터가 정보 모름	컴퓨터가 정보 앎

일반 웹에서 발전한 것이 시맨틱 웹

• 컴퓨터가 사람을 대신하여
  • 정보를 읽고, 이해하고 가공 ⇒ 새로운 정보 ⇒ 이해하기 쉬운 의미 생성
  • 차세대 지능형 웹
• 다른 의미로는 정보를 분석하여 그 정보의 관계 속에서 의미론적인 자료들을 추출하여 웹 상에 보여줄 수 있는 웹

3. 구성요소

• RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크
• XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적인 것이 HTML 이다.
• Ontology: 특정 지식과 관련된 용어 사이의 관계 정의
• Agent: 사용자의 역활을 대행하여 지능적, 자율적 임무수행.

[출처]Semantic Web 과 Semantic Tag 이해하기

2. Semantic Tag란?

[출처]Semantic Tag 와 헷갈리는 tag들 정리

과거 무분별한 태그의 사용으로 인해 정보를 찾기 위해 사람이 직접 개입해야 하는 비효율적인 시스템을 개선하고자, 의미있는 태그들을 개발하기 시작했다. ”의미가 있는 태그”

Semantic Tag는 HTML5에서 처음 등장하는 tag들이다.

HTML4 ⇒ <div> 에 class값을 붙여서 스타일링하면, 모든 작업이 가능하다.

HTML5 ⇒ <div>로 작성하는 것보다 직관적이고 쉽게 이해가능한 즉, 특정한 의미를 까지고 있는 tag들이 등장하게 됐다.

Semantic Tag의 장점

---

1. SEO (Searching Engine Optimization)
   • 검색 최적화, 특정 키워드를 쉽게 검색할 수 있다. 노출 또한 가능😉
2. 웹 접근성
   • “스크린리더" 사용의 용이성
   • 시각적인 웹페이지 뿐만이 아니라 음성으로 웹페이지를 읽을 수 있게 동작할 수 있다.
3. 유지보수성
   • 직관적인 코드로 쉽게 유지, 보수할 수 있다.

3. 정리

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

위 문제를 다시 봐보자.

이제는 대답할 수 있는가? YES!😉

<img> : Semantic Tag, HTML4

<div style="background-image> : non-Semantic Tag, HTML5

background-image는 css 파일에서 사용되는 스타일링으로 문서의 내용과는 별개로 스타일링 목적만을 위해서 존재한다면, background-image를 사용하는 게 좋다. 그래서 그 위해 폰트를 덮어씌우기도 쉽다.

다시 말해서, 해당 이미지가 없어도, 내용적으로 문서를 읽는데 전혀 지장이 없다면, CSS 파일 안에 이미지를 집어 넣는게 맞다.

[참고]태그 와 {background-image} 의 차이를 알고 싶어?

img 와 background-image의 차이점

---

	<img src="이미지 링크"/>	{ background-image: url("이미지 링크"); }
로딩실패 시	alt="대체 메시지" 출력가능	대체메시지 X
검색 시 노출	색인 생성 → 노출 O	색인화 X → 노출 X
언제 사용?	- 검색 시 노출되기 원하면

• 콘텐츠에 관련 있는 이미지일 때
• 웹페이지 성능 높이고 싶을 때 | - 디자인 요소로만 이미지 활용 시
• 콘텐츠와 관련 없어 이미지를 불러오지 못해도 상관 없을 때 |

추가 설명

근데 Img 태그는 왜 검색 시에 노출이 되고 background-image는 왜 검색 시에 노출이 되지 않을까?

• img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있으며, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출시키지만 background-image 는 태그가 아닌 스타일의 속성이기 때문에 '이미지'라는 의미를 가지지 못하고 검색엔진이 인식하지 못하는 것이다.
• img 태그처럼 태그 자체만으로도 의미를 알 수 있는 태그들을 시맨틱 태그라고 부르는데, 시맨틱 태그를 쉽게 표현하자면 "내용이 뭔지 태그명만으로 알 수 있도록 만든 것"이라고 할 수 있다.