Semantic web, semantic tag

Semantic web

시맨틱 웹이란 웹페이지를 구성하고 있는 각각의 요소들의 의미, 관계 등을 파악하고 구축하여 데이터베이스화하고자 하는 움직임이다. 이를 통해 웹페이지의 구성 요소 및 컨텐츠가 가지는 의미와 다른 요소와의 관계도를 검색 엔진 또는 컴퓨터가 쉽게 파악할 수 있다.

 

이는 웹사이트의 수와 가지고 있는 정보가 폭발적으로 증가함에 따라, 컴퓨터가 정보 수집, 분석, 또는 검색 엔진이 정보 검색시 많은 불필요한 정보가 존재하기 때문에, 컴퓨터 (또는 검색엔진)이 정보를 체계적으로 수집, 가공하기 어렵다는 문제로 인해 추진되게 되었다.

 

Semantic tag

시맨틱 웹을 용이하게 하기 위해, 의미를 가지고 있는 다양한 semantic tag들이 새로 추가되어왔는데, 아래와 같은 요소들이다. 반면, 의미를 가지고 있지 않은 non-semantic tag에는 div, span 등이 있다.

• semantic tag : form, section, nav, aside, footer, table 등
• non-semantic tag : div, span

repl.it 질문

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

repl.it 답변

<img> 태그의 경우, 해당 컨텐츠가 이미지라는 것을 명확히 알려주는 semantic tag 중의 하나로, 검색 엔진에서 웹페이지를 검색할 시에 src 또는 alt(이미지 설명) 정보를 바탕으로 보다 명확한 검색을 가능하게 할 수 있고, 이는 사이트의 노출에 긍정적인 영향을 끼칠 수 있습니다. 반면, <background-image> 태그의 경우에는 non-sematic tag로, 사이트 컨텐츠에 대한 의미나 설명이 없습니다. background-image의 경우에는 반복적으로 사용되는 작은 아이콘이나, 단순히 사이트의 디자인적인 측면을 강화해주는 이미지들에 사용하는 것이 좋습니다.