Semantic Web

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

이게 왜 중요할까?🧐

• 전 세계 몇 십억명이 인터넷을 사용한다.

• 우리가 주로 사용하는 네이버, 구글의 검색엔진은 하루에도 수백, 수천만의 웹사이트들을 검색한다.

• semantic web이란 이렇게 존재하는 수 많은 웹 페이지들에게 메타데이터를 부여하고자 하는 것이다. ( 내가 이런 놈이야!! -> 검색엔진에게 어필하기!)

• 기존에 잡다한 데이터의 집합이였던 웹 페이지들은, 메타데이터들을 부여받음으로써 '의미'와 '관련성'을 가지는 데이터 집합체로서 거듭날 수 있다!

Semantic Tag

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

HTML은 non-semantic요소와 semantic 요소로 나눌 수 있다.

non-semantic 요소

• div , span 등등

• 막상 태그만 보면 뭔지 당최 알 수가 없다. (content를 예상 할 수 없음)

semantic 요소

• form,img, table 등등

• 태그만 봐도 대충 어떠한 값들이 들어가겠구나~ 예상할 수 있다.

이러한 semantic 요소들은 Web을 더 의미있게 만들어 준다! (Semantic Web)

Semantic Web과 web accessibility(웹 접근성)

웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다.

• 일반 사람들은 대체텍스트(alt)가 없는 이미지를 별 어려움 없이 보고, 이해할 수 있을 것이다.

• 하지만 시각적 장애를 가진 사람이 청각에 의존해 이 img 태그를 이해한다고 가정한다면 상당한 어려움이 있을 것이다.

• Semantic Web을 준수한다는 것은 이러한 상황까지 모두 고려해 웹 서비스를 제공함을 말한다고 볼 수 있다!!

SEO ( 검색엔진 최적화 )

Search Engine Optimization

• 우리가 자주 사용하는 구글의 검색엔진!

• 이 검색엔진은 웹사이트를 방문하면 문서에 포함된 링크를 따라가며 관련 페이지를 모두 방문하고 수집한다.

• 수집된 문서는 구글 시스템에서 분석 과정을 거쳐 주요 키워드를 추출하게 된다.

• 이 때, div span 과 같은 의미없는 태그들이 사용된다면, 이 과정에서 누락될 가능성이 클 것이다!

• title nav main 등 과 같은 semantic tag를 사용해 주는 것이 검색엔진으로 하여금 키워드를 더 잘 추출할 수 있도록 도와준다! 검색결과 상위 노출은 덤!

QUIZ

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

1 ) '의미'를 가지나 가지지 못하나의 차이가 존재한다! semantic 요소인 img태그는 '의미'를 가지지만, background-image 속성을 추가하는 것은 아무런 의미를 가지지 못한다!

2 ) 때문에 그저 심미적인 이유로 이미지를 추가하는 것이라면 background-image 속성을 추가하고, 중요한 이미지(썸네일과 같은!?)를 추가하는 경우라면 img태그를 사용하는 것이 semantic web에 더 가깝다고 할 수 있다!

참고] 시멘틱 요소와 검색엔진 , [HTML 바로 알기] Semantic Web을 위한 Semantic Elements