" Semantic WEB / TAG "
semantic 은 의미론적인 이란 뜻으로
쉽게 말해 의미를 부여하는 것을 말한다.
semantic 은
SEO(Search Engine Optimization, 검색 엔진 최적화) 와
밀접한 관련이 있다.
검색엔진은 로봇(Robot) 이라는 프로그램을 이용해
매일 전세계의 웹사이트 정보를 수집한다.
(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)
그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여
검색 키워드에 대응하는 인덱스(색인)를 만들어 둔다.
(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데
이 정보라는 것은 결국 웹사이트의 HTML 코드를 말한다.
즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데
의미를 부여하는 시맨틱 태그(Semantic tag)는
의미를 파악하는 검색엔진에 있어 중요한 정보일 수 밖에 없다.
기능은 없지만 태그에 content 관련 의미를 부여하는 semantic tag 와
content 관련 아무런 의미가 없는 non-semantic tag 의 종류는 다음과 같다.
- semantic tag
- <article></article> 본문
- <aside></aside> 광고와 같이 페이지의 내용과는 관계가 적은 내용들
- <details></details> 기본적으로 화면에 표시되지 않는 정보들을 정의
- <figure></figure> 삽화나 다이어그램과 같은 부가적인 요소를 정의
- <footer></footer> 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
- <header></header> 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
- <main></main> 문서에서 가장 중심이 되는 컨텐츠를 정의
- <mark></mark> 참조나 하이라이트 표시를 필요로 하는 문자를 정의
- <nav></nav> 문서의 네비게이션 항목을 정의
- <section></section> 문서의 구획들을 정의
- <time></time> 시간을 정의- non-semantic tag
- <div></div>
- <span></span>semantic tag 는 브라우저, 검색엔진, 개발자 모두에게
콘텐츠의 의미를 명확히 설명하는 역할을 한다.
semantic tag 에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고
그 데이터를 활용할 수 있는 semantic web 이 실현될 수 있다.
semantic web 이란
웹에 존재하는 수많은 웹 페이지들에 메타데이터(Metadata)를 부여하여,
기존의 잡다한 데이터 집합이었던 웹페이지를
‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
img 태그 vs background-image 속성
img 태그는 semantic tag로
alt 속성을 사용해서 이미지에 대한 의미를 넣을 수 있기에
이미지에 대한 설명이 필요한 경우에 사용하며,
검색엔진을 통한 노출이 필요한 경우에도 유용하다.
반면 background-image 는
non-semantic tag 에 사용되는 속성으로
이미지에 대한 설명 등의 정보가 필요하지 않거나
검색엔진을 통한 노출 순위가 중요하지 않은
디자인적인 역할만 필요할 때 적합하다.
