semantic web과 semantic tag

정인호·2022년 8월 16일
0

위코드

목록 보기
4/5

semantic web과 semantic tag

semantic web이란?
기계가 읽고 처리할 수 있는 웹을 개발하기 위해 탄생한 의미론적인 웹.

구성요소
1.RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크
2.XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적으로 HTML이 있다.

semantic tag란?
데이터가 방대해짐에 따라 semantic web에서 사람과 기계가 이해할 수 있는 형태로 웹을 발전시키기 위해 등장함.

semantic tag의 종류

등등.. 위의 예시처럼 뭔가 의미를 가지고 쉽게 알아볼 수 있는 태그들을 semantic tag라고 한다. 그중 img태그에 대해 알아보자면, img태그는 이미지를 삽입하는 태그로 background-image속성과 같은 역할을 하는데 이 둘의 차이를 알아보자. 밑을 읽어보면 img태그가 왜 semantic tag인지 알수 있을 것이다.

웹페이지에 이미지를 넣는 방식은 두가지가 있는데,

첫번째는

<img alt="대체 텍스트" src="이미지링크" >

두번째는

{background-image: url("이미지 링크");}

이 두가지의 차이점은,

1.첫번째 방식은 alt를 이용해서 이미지가 로딩되지 않을때 대체 텍스트가 출력되지만, 두번째 방식은 그렇지 못하다.
2.첫번째는 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 두번째는 자동으로 색인화하지 않기 때문에 검색해도 노출이 되지 않는다는 단점이 있다.

img태그만 검색시 노출되는 이유

img태그는 태그 자체가 이미지라는 의미를 갖고 있고, alt property에 넣은 문자열을 검색엔진이 이해해서 웹상에 노출시키기 때문에 검색시 노출이 된다.
하지만 background-image property는 태그가 아니라 css의 스타일 속성이기 때문에 이미지라는 의미를 갖지 못해서 검색엔진이 이해하지 못하기에 웹상에 노출되지 못하는 것이다.

위의 두가지 방법의 적절한 활용 방법

첫번째 방식인 img태그
1.검색시 노출이 되도록 만들고 싶을 때 활용한다.
2.콘텐츠에 관련이 높은 이미지일 때 활용한다.
3.웹페이지의 성능을 높이고 싶을 때 활용한다.

두번째 background-image property
1.디자인적인 요소로만 이미지를 활용하고 싶을 때 활용한다.
2.콘텐츠와 관련이 없어서 이미지를 불러오지 못해도 상관이 없는 이미지 일때 활용한다.

profile
프론트엔드 개발자

0개의 댓글