시맨틱 웹 (Semantic Web)
시맨틱 웹의 목적
인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라
정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었습니다.
따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아니라,
자동화된 기계가 그 의미를 해석하고
정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다.
검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없습니다.
검색엔진은 매일 웹사이트 정보들을 수집한 뒤
예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다.
이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데,
그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.
시멘틱 태그(Semantic Tags)
<!-- 시맨틱 태그 미사용 예 -->
<div>
<div style="font-size: 2em; font-weight: bolder">
귀여운 강아지
</div>
</div><!-- 시맨틱 태그 사용 예 -->
<header>
<h1>
귀여운 강아지
</h1>
</header>두 가지의 형식은 보이는 결과는 같지만 가독성에 차이가 있다.
첫번째는 태그만 봐서는 어떤 내용인지 알아보기가 어려우나
두번째 태그는 header와 h1이 사용됨으로써 문서의 핵심요소를
빠르게 파악 할 수 있다.
__시멘틱 요소(ex
<header>
<footer>
<main>
<img>
<table>
등의 태그들이 있으며
__non 시멘틱 요소로는
<div>
<span>등이 있다.
웹페이지 이미지 삽입 방법 두가지
<img scr="이미지 링크">{background-image: url("이미지 링크");}첫번째는 html 태그를 이용한 방법,
두번째는 css 속성을 활용한 방법이다.
둘의 차이점으로는
- 첫번째 방법은 이미지 로딩 실패시 alt속성의 값이 대체 메세지로 출력
- alt 속성 값이 검색 시 노출되지만 두번째 방법은 노출되지 않는다.
어떨때 어떤 방법을 사용하면 좋을까?
img 태그 사용
- 검색 시 노출이 되도록 만들어야 할때
- 콘텐츠에 관련이 있는 이미지 일때
CSS background-image 속성 사용
- 디자인적인 요소로만 활용할때
- 컨텐츠랑 관련이 없어서 이미지 로딩 실패시에도 상관 없을때
