시멘틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터를 지정하여 기존의 잡다한 데이터들의 집합이던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상
간단히 얘기하자면, 검색엔진은 HTML 코드로 의미를 인지하게끔 되는데 이 때, 시맨틱 요소(Semantic element)를 해석하게 되는 것이다.
아래의 예를 한번 살펴보자.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>
1행과 2행은 크기도 문장도 같은 값을 보여준다. 그러나 1행의 요소에서는 개발자의 의도가 명확하게 보이지 않는다. 폰트 사이즈와 볼드체를 넣은 메타데이터들만 보여지고 있다. 그에 반해 2행은 간략하지만 헤더(header) 중 가장 첫째 되는 의미를 부여한다는 개발자의 의도가 명확히 드러난다. 이러한 요소의 사용은 코드의 가독성을 높여주고, 차후에 있을 유지보수를 용이하게 만든다.
Semantic Tag
Non-semantic 요소 | Semantic 요소 |
---|---|
div, span 등 | img, table, form 등 |
content에 대한 설명 부족 | content의 의미를 명확하게 설명 |
다른 예로, 사이트에 이미지를 넣는 방법 2가지를 비교해보자. 첫번째는 img src 태그를 사용하는 것. 그리고 두번째는 태그에 background-image 속성을 추가하는 것이다. 첫번째의 img src 코드를 넣어 이미지를 추가하는 것은 본문에 이미지를 넣는 '삽입'하고자 하는 경우에 사용되고, background-image 속성을 이용하는 것은 말 그대로 웹페이지의 '배경'으로 이미지를 넣고자 하는 경우에 사용되는 것이다.