Sementic : 1. 의미의 2. 의미론적인
Semantic Web
말 그대로 '의미론적인 웹'이다. 곧 컴퓨터가 이해할 수 있는 형태의 웹이다.
<div>
헤더
</div>
<div>
메인 페이지
</div>예를 들어 위와 같은 코드는 기능상 아래와 같지만 위의 코드는 의미를 담고 있지 않다.(어떤 의도로 작성한 것인지, 어떤 역할을 하는지 알 수 없다.)
<header>
헤더
</header>
<main>
메인 페이지
</main>위와 같은 코드는 컴퓨터가 해당 부분이 어떤 역할을 하는지 알 수 있다. 그뿐만 아니라 사람이 읽기에도 좀 더 직관적으로 어떤 역할을 하는지 알기 쉽다.
- 메타 데이터 : 시간이 지남에 따라 많은 양의 데이터를 수집, 저장 및 분석할 수 있도록 일관된 방식으로 구조화된, 다른 데이터를 설명하는 데이터.(정보에 대한 정보, 데이터에 대한 데이터)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="semantic web">위의 메타태그가 웹페이지에 대한 메타데이터라고 할 수 있겠다. 페이지의 인코딩 지정 방법, 뷰포트, 키워드들. 이외에도 페이지의 제목, 설명 등을 추가함으로써 검색 엔진에 최적화할 수 있다. 즉 검색 엔진이 판단할 수 있도록 알아볼 수 있는 정보를 주는 것이다.
Semantic Tags
semantic tags는 위의 semantic web을 구현하기 위한 태그를 말한다.
위의 예시에서 볼 수 있다시피, 그 자체에 아무런 의미를 담고 있지 않은 div가 아닌 main, header, footer 등의 태그를 말한다.
html5에서 새롭게 추가된 semantic tags
header : 헤더를 의미
nav : 네비게이션을 의미
aside : 사이드에 위치하는 공간을 의미
section : 본문의 여러 내용 (article)을 포함하는 공간을 의미
article : 본문의 주 내용이 들어가는 공간을 의미
footer : 푸터를 의미
이외에도 기존의 form, table, img 등이 있다.
img를 사용하는 것과 css를 이용한 이미지 삽입 방법의 차이
브라우저 상에서 보이는 모습은 동일하다. 그러나 img라는 태그에 의미가 담겨 있기 때문에, 브라우저는 해당 태그가 이미지라는 것을 알 수 있게 된다.
즉 이미지를 페이지상에 넣고자 할 때 단순히 그림이 표시되기를 원한다면 css를 이용해서, 이미지가 이미지라는 것을 나타내기 위해서는(검색엔진에 노출시키기 위해서는) img태그를 사용하면 된다.
