Semantic Web
시멘틱 웹(Semantic Web) : 의미론적인 웹
시멘틱 웹은 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보를 기계(컴퓨터)가 처리할 수 있는 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
일반 웹 vs 시멘틱 웹
- 일반웹 : 정보의 의미를 컴퓨터가 알지 못함
- 시멘틱 웹 : 정보의 의미를 컴퓨터가 알 수 있게 함
사용 목적
시멘틱 웹을 사용하기 전과 사용하고 나서의 예시로써 조금 더 명확히 이해해보자.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>위 두 내용은 브라우저에서 Hello라는 같은 내용을 출력할 것이다. 하지만 첫번째줄의 요소는 개발자가 어떤 의도를 가지고 작성한 코드인지 명확히 표현이 되어있지 않다. 그에비해 두번째줄의 요소는 header 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자의 의도를 명확히 표현하고 있으며, 가독성을 높이며 유지보수 또한 효율적으로 할 수 있도록 한다.
Semantic Tag
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할
위의 예시를 그대로 들고와서 데이터를 크롤링 할 때, <h1> 태그를 보고 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 이렇듯 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시멘틱 웹이 실현될 수 있는 것이다.
non-semantic tag
div, span 등이 있으며, 이들 태그는 content에 대해 어떤 설명도 하지 않는다.
semantic tag
form, table, img 등이 있으며, 이들 태그는 content의 의미를 명확히 설명한다.
HTML5에 새롭게 추가된 시멘틱 태그이다. 이 외에도 많은 시멘틱 태그들이 존재한다.
시멘틱 태그 기본 구성
질문
사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에background-image속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
A) <img> 태그를 사용하는 것은 시맨틱 태그를 사용하는 것이다. 시맨틱 태그를 사용한다는 것은 content의 의미를 명확히 설명하고자 하는 의도가 담겨있는 것이다. 그렇기 때문에, 내가 해당 이미지를 사용하여 어떤 의미를 전달하고자 하는경우라면 시맨틱 태그인 <img>를 사용하는것이 좋으며, content의 의미를 설명할 필요가 없이 디자인적인 요소로만 이미지를 사용하는 경우라면 논시맨틱 태그인 <div> 태그에 background-image속성을 사용하는것이 바람직하다고 생각된다.
