TIL 1 | 내가 보려고 올리는 "Semantic Web과 Semantic Tag"

이형준·2022년 3월 28일
0

#Semantic Web

시맨틱 웹이란 무엇일까요?
Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다.

그렇다면 시맨틱 웹은 '의미있는 웹'정도로 이해할 수 있는데
의미 있는 웹이란 어떤 웹을 가리키는 걸까요?

기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
또 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고 이것을 컴퓨터가 사용할 수 있게 만다는 것을 말합니다.

결론적으로 Semantic Web은 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여, 잡다한 데이터 집합이 아닌 ‘의미’ 와 ‘관련성’을 가지는 거대한 데이터베이스를 구축하고자 하는 발상입니다.

#Semantic Tag
시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag 입니다.

조금 더 쉽게 말하자면 HTML5 언어에 익숙하지 않는 사람이 보고도 저 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그를 Semantic Tag라고 합니다.

#why?
정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었습니다.
(효과적인 검색 필요)

따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아니라,
자동화된 기계가 그 의미를 해석하고
정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다.
(의미있는 Tag 들의 등장)

검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없습니다.
검색엔진은 매일 웹사이트 정보들을 수집한 뒤
예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다.
이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데,
그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.
(Tag의 의미를 통해 더욱 정확하게 정보 제공 가능)

#non-semantic Tag vs semantic Tag
div, span 등 이들 태그는 content에 대한 어떤 설명도 없습니다.
form, table, img 등 content의 의미를 명확하게 설명하고 있는것을 볼 수 있습니다.

#example : img vs div backgroung-image
먼저 두 태그를 간단하게 비교하자면 img태그를 사용시 alt속성에 문자열을 넣을 수 있습니다.
alt속성에 작성된 문자열은 meta정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 된다.
div background-image의 경우 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않습니다.

사용자는 검색을 통해 정보를 가져간다.
->내 이미지가 사용자의 검색에 노출되어야 한다면,
->img 태그를 사용하는 것이 좋다.

사이트를 꾸미기 위한 장식
->이미지의 활용이 순수 사이트의 장식을 위해서라면
->background-image를 사용하는 것이 좋다.

profile
프론트엔드 개발자 이형준입니다.

0개의 댓글