Semantic Web/ Semantic Tag

대부분의 인터넷 사용자들은 원하는 정보를 취득하기 위해 Google/ Naver 와 같은 검색사이트를 이용한다. 웹사이트는 검색엔진에서의 노출은 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. (마치 나의 블로그 처럼.....)

 

SEO(검색엔진 최적화: Search Engine Optimization) 같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하여 알 맞은 구조로 웹사이트를 조정하기도 하는데,  이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

 

검색엔진은 Robot이라는 프로그램을 이요해 매일 전세계의 웹사이트 정보를 수집한다. 이것을 클롤링이라하며 검색엔진의 크롤러가 이를 수행한다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(index)를 만들어 둔다. 이것을 인덱싱(indexing)이라 하며 검색엔진의 인덱서가 이를 수행한다.

 

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코듭만으로 그 의미를 인지하여야 하는데 이때 Semantic Element를 해석하게 된다.

 

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

 

위 코드에서 1행은 의도가 명확하지 않다.

단순히 폰트 크기, 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.

 

반면 2행에서는 header중 가장 상위 레벨이라는 의미를 내포하는 <h1>을 통하여 개발자가 의도한 요소의 의미가 명확히 드러나고 있다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

 

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용햐여 보다 효과적인 크롤링과 인덱싱 가능해졌다. 

 

즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

 

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

 

요약

Semantic Web

의미론적인 웹

말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것

 

시멘틱 웹의 취지는 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다

 

쉽게 생각하면, Semantic Tag로 작성되어 기계가 이해 할 수 있는 웹을 Semantic Web이라고 한다

 

Semantic Tag

HTML 5 이후 나온 개념

 

header/nav/section/article/footer 등

 

빈껍데기인것은 변함 없다

 

/*시멘틱 태그 사용법(추천)*/ 

header/section/article/footer
가장 상위의 컨테이너 .container
주제별 콘텐츠 영역 section
헤더 영역(로고,메뉴,로그,검색) header
저작권 footer
콘텐츠 내용 넣기 article
문서를 링크하는 탐색 영역 nav

 

from: bitdegree.org

 

Question

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

첫번째는 html에서 <img> 태그를 활용하는 방법, 두번째는 css background-image를 사용하는 방법

 

img태그가 SEO,성능 등 많은 면에서 더 효율적이다. 이 구역은 img 구역이라는 것을 명확하게 명시해주고 있다.

img 태그의 경우 이미지 로드가 실패할 경우를 대비하여

broken image와 alt 텍스트를 설정할 수 있다.

 

혹은 그러한 경우를 원치 않으면 broken image도 hide 처리하면 된다

<img src="Error.src" alt="사진" onerror="this.style.display='none'">


/*대체 이미지 넣기*/
<img src="Error.src" alt="사진" onerror="this.src='error-img.jpg'">

 

 

반대로 background-image에 넣은 이미지가 에러가 나면 어떠한 것(broken image, 텍스트)도 노출되지 않는다.

즉, 아무 일도 일어나지 않는다.

 

즉, 사실 백그라운드 이미지는 에러가 나든 말든 상관이 없다. 순수하게 디자인적인 이유로 사용한 것이다. 사용자에게 보다 나은 컨텐츠의 이해를 돕기 위한 용도가 아니다.

 

이러한 방식으로 생각하면 편하다. 그런데 정답은 아니다

 

이미지가 사용자에게 컨텐츠의 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image를 써라