Semantic Web과 Semantic Tag의 의해

박희주·2022년 5월 24일

html web

1. Semantic Web이란?

먼저 Semantic이라는 단어는 사전적으로 '의미론적인, 의미의'라는 뜻을 가진 단어이다. Semantic Web은 의미있는 웹이라고 이해할 수 있다.

1-1. Semantic Web의 목적

인터넷이 폭발적으로 보급되고 웹에 축적되는 데이터들이 방대해졌기에 정보를 검색 할 때 있어 불필요한 정보는 걸러내야할 필요성이 대두되었다.
단순히 사람만이 웹의 정보를 파악하는 것이 아닌 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 Semantic Web의 목적이라고 할 수 있다.
검색엔진에 노출되지 않는 정보는 존재 의미가 없으며 검색엔진은 매일 웹사이트 정보들을 수집해서 예상되는 검색 키워드에 대응하는 인덱스를 미리 만들어 놓는다.
이 인덱스를 수집하는 기준이 바로 HTML태그가 된다.
그 중 Semantic Tag의 사용 유무에 따라 인덱스 포함 여부가 결정된다.

1-2. Semantic Web의 구성요소

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

2. Semantic Tag

2-1. Semantic Tag 미사용의 예

<div>
  <div style="font-size: 2em; font-weight: bolder">
    Semantic Tag
  </div>
</div>

2-2. Semantic Tag 사용의 예

<header>
  <h1>
    Semantic Tag
  </h1>
</header>

2-3. 차이점

위 HTML코드를 웹문서에서 본다면 똑같은 글자와 똑같은 형태로 나온다. 하지만 첫번째 예시처럼 의미가 없는 <div>태그를 활용해 코드를 작성한다면 추후 타 개발자가 코드를 보았을 때 길어지는 형태로 가독성도 떨어짐과 동시에 무슨 내용을 표현하기 위해 코딩을 했는지 의미를 유추하기가 힘들어진다.
하지만 Semantic Tag인 <header>와 <h1>을 활용해 코딩을 한다면 각각의 명확한 의미를 지님과 동시에 가독성을 높이면서 문서의 핵심요소를 빠르게 파악할 수 있다는 장점을 지닌다.

2-4. non-semantic 요소 예시

<div>
<span>

2-5. semantic 요소 예시

<img>
<iframe>
<table>
<footer>
<main> 등등...

3. Semantic Tag를 사용하고와 안할 때의 예시

<img> VS <div> + background-image

두 방식 모두 이미지를 웹화면에 구현할 수 있는 방법이며 <img>는 의미가 내포되어 있는 Semantic Tag이며 반면 <div>는 아무런 의미가 없다.

<img>태그를 사용할 때
1) 회사 로고나 인물 프로필 사진 등 컨텐츠 정보와 연관이 있는 이미지를 쓸 때(alt 속성과 함께 사용)
2) 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때(마찬가지로 alt 속성과 함께 사용)
3) 페이지 프린트시 이미지가 함께 나오도록 할 때
<div> + background-image 속성을 쓸 때
1) 이미지가 컨텐츠의 일부가 아닐 때
2) 이미지 스프라이트를 사용할 때
3) 말그대로 웹문서의 배경을 채우기 위한 용도 일 때
4) 페이지 프린트시 이미지가 나오지 않게 할 때

<img>는 Semantic Tag로 alt속성이 있어 에러 발생 시 이미지가 깨져도 어떠한 이미지인지 알 수 있지만 <div>를 활용한 background-image는 에러 발생 시 어떠한 이미지인지 알 수가 없고 컴퓨터 또한 무엇을 의미하는 태그인지 알 수 없다.
사용자를 위해 에러 시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야 하고 조금 더 검색엔진에 의해 웹이 잘 노출되도록 하기 위해선 Semantic Tag인 <img>를 사용하고 그저 웹 디자인과 같은 미적요소 이미지를 보여주기 위해서라면 background-image를 사용하는 것이 좋다.

참고자료:
1. https://fierycoding.tistory.com/55
2. https://velog.io/@geonoo99/Semantic-Web-%EA%B3%BC-Semantic-Tag-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
3. https://chanho-yoon.github.io/web/web-semanticWeb-semanticTag/
4. Wikipedia / 시맨틱 웹