우리가 거의 매일 하루도 빠짐 없이 하는 검색,
이 검색을 할 때 검색엔진은 로봇이라는 프로그램을 통해 크롤링(웹사이트 정보를 수집하는 일)을 한다.
또한 검색 사이트 이용자가 검색할 만한 키워드를 인덱싱(키워드를 예상하고 대응하는 인덱스를 생성하는 것)한다.
즉, 인덱싱에 사용되는 정보는 크롤링된 정보인데 이는 웹사이트의 HTML 코드와 같다.
<인덱싱 정보= 크롤링 정보= HTML 코드>
검색 엔진은 HTML 코드 만으로 그 의미를 파악하고 이를 위해 시맨틱 요소(Semantic element)를 해석하게 된다.
HTML 문서는 사람이 사용하는 언어 + 컴퓨터가 사용하는 언어(메타데이터) 의 합으로 이루어져있는데
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하면 효과적인 크롤링과 인덱싱이 가능하다.
시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
HTML5에서 쓰이는 일부 시맨틱 태그는 아래와 같다.
<header, nav, aside, section, article, footer>
시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하는데 결국 시맨틱 태그가 모여 시맨틱 웹이 되는 것이다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
<div> 태그가 대표적 Non-Semantic Tag다. div 태그는 단순히 구역을 나누는 역할 그 자체만 수행하기 때문에 어떤 용도와 역할이 있는지 정보를 제공하지 못한다.
그러므로 <img> 태그를 사용한 경우 시맨틱 태그를 사용하여 이미지라는 의미가 담긴 사진을 담는 것이고 <div> 태그의 속성으로 사진을 삽입하는 경우는 사진의 의미를 전달하기 어렵게 된다.
