시맨틱웹(Semantic Web)은 말그대로 웹사이트가 단순한 코드들의 구성이 아닌, 웹사이트 자체가 의미를 가진다는 뜻이다.
예를 들어 우리가 신문이나 인터넷기사들을 접할때, 우리는 어떤부분이 기사의 제목인지 굳이 누군가 설명해주지 않아도 한눈에 알아볼 수 있다. 또 기사에 실린 이미지나 전체적인 내용이 어떤부분인지도 쉽게 알 수있다.
그 이유는 우리는 뉴스기사가 어떠한 구조로 작성되고, 또 우리한테 어떻게 전달되는지 학습되어 있기 때문이다.
이처럼 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고, 이것을 컴퓨터가 사용할 수 있게 만든 웹을 시맨틱웹(Semantic Web)이라고 한다.
시맨틱 웹의 이상향은, 인터넷에 방대한양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확하게 얻을 수 있는것이다.
이전에 설명한 시맨틱웹(Semantic Web)의 구현을위해 HTML5 태그에 의미를 부여한 태그를 시맨틱 태그(Semantic tag)라고 한다.
시맨틱태그를 사용하면 개발자는 물론, 개발지식이 없는 사람도 어느정도 태그가 웹의 어디에 위치해있는지 쉽게 알 수 있다. 또한 각 태그가 어떠한 의미를 가지고 있는지도 쉽게 알 수 있다.
<header> # 페이지 상단이나 섹션의 머리말
<nav> # 문서의 네비게이션, 메뉴 항목을 정의
<section> # 문서의 구획들을 정의
<main> # 문서의 주가 되는 컨텐츠 정의
<img> # 이미지
등이 있다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
우리는 시맨틱 태그(Semantic tag)가 의미를 가지고 있는 태그란 것을 알고 있다. 또한 시맨틱 태그를 활용하여 만들어진 시맨틱 웹은 인터넷상에서 컴퓨터가 데이터를 자동으로 해석해 사용자에게 정확한 결과를 전달해줄 수 있도록 해준다.
그러므로 정보가 담긴 이미지를 사용하여 웹이 검색엔진에 잘 노출될 수 있게하거나, <img>
태그의 alt 속성을 사용하여 이미지가 깨져도 이미지에 대한 정보가 남아있게하려면 <img>
태그를 사용하는게 좋을 것이다. 그게 아닌 단순한 외관이나 미적용도로 이미지를 사용하려면 background-image를 사용하는게 좋을 것이다.