Semantic Web과 Semantic Tags를 알아보자.

웹기술이 발전하면서 수많은 정보들이 웹상에 쌓이게 되었는데요. 컴퓨터가 정보들을 보다 쉽게 해석할수있도록 하기위해서 Semantic Web과 Semantic Tags라는 개념이 등장했습니다.

먼저 헤더 자리를 잡아주기 위해서

<div> 헤더자리 </div> 

라고 적었다면 태그안에 헤더자리 라는 내용을 넣어주기때문에 컴퓨터를 사용하는자는 이 자리가 헤더자리라고 알수있지만 컴퓨터는 태그만으로 이 자리가 헤더 자리라는것을 알수 없습니다. 그래서 태그를 무조건 사용을 해줘야하는데요.

HTML5에서는 Semantic Web과 Semantic Tags를 쉽게 생각할수 있도록 만들어주는 Semantic Tags가 등장했습니다.

Semantic Tags에는 ("header, nav, article, section, aside, footer, main") 등 과 같은 태그들이 존재합니다.

Semantic Tags에서 컴퓨터에게 헤더자리임을 알려주기 위해서 "header" 를 사용해서

<header>헤더자리</header>라고 적어주면 됩니다.

img 시맨틱 태그를 사용하는 경우를 알아보겠습니다.

<img class = "클래스명" alt = "이미지 속성" src = "이미지 주소">

위와 같이 배경이미지를 넣어 줄수 있습니다. alt속성에 해당 이미지에 대한 속성값을 넣을 수 있고 이는 검색엔진에서 인식됩니다. 따라서, 이미지가 검색엔진에 노출되기 원하면 img시맨틱 태그를 사용해 주면 된다.