✍정보처리기사를 공부하면서 자주 보였던 용어 시맨틱 웹!
실제로 HTML을 작성할때도 시맨틱 태그를 사용하는 것이 좋다고 배웠는데
구체적으로 시맨틱 웹과 시맨틱 태그가 무엇인지, 왜 생겨났는지,
그리고 왜 좋은지에 대해 되짚을 겸 정리해보고자 합니다.
이 포스팅은 드림코딩 엘리님의 콘텐츠를 참고하였습니다 :)
시맨틱 웹(Semantic Web)이란?
시맨틱 웹은 '의미론적인 웹' 이라는 뜻이다.
웹기술이 발전됨에 따라 웹상에 축적된 데이터는 방대해졌지만, 웹 기술은 키워드(Keyword)에 의한 정보 접근만을 허용하여 정보 검색 시 불필요한 정보들까지 돌출되는 문제가 발생한다. 그리고 이러한 문제의 원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데서 출발한다. 시맨틱 웹은 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 인간과 컴퓨터 모두가 잘 이해할 수 있는 웹을 만들기 위해 제시되었다.
시맨틱 태그(Semantic Tag)란?
HTML5에서는 '의미론적인 웹'을 쉽게 구성할 수 있도록 하는 요소들이 추가되었는데, 그것이 바로 시맨틱 태그이다!
💡 시맨틱 태그의 예
<header> <nav> <aside> <main> <footer>
<section> <article> ...
💡 시맨틱 태그의 사용
예를 들어 기존에 div 태그를 사용하여 나타내었던 네비게이션은
<div id="nav"> 네비게이션 내용 </div>
컴퓨터가 div 안의 내용물이 어떠한 정보인지 어떤 의미를 가지는지 알 수 없지만,
<nav> 네비게이션 내용 </nav>nav 태그를 사용한다면 컴퓨터는 nav 태그 안의 내용물이 네비게이션이라는 것을 이해할 수 있게 된다. 즉, 컴퓨터가 이해할 수 있는 의미를 가진 정보로 나타낼 수 있게 된 것이다!
예를 하나 더 들어보겠다. 어떠한 문단에서 제목의 의미를 주기 위해 div태그를 넣고 스타일을 주어 글자의 크기를 키운 경우이다.
<div style="font-size: 50px;"> 이것은 제목! </div>인간은 이것이 어떠한 중요한 문장이거나 제목의 역할을 한다고 이해하는 것이 가능하지만 컴퓨터는 그렇지 못하다.
컴퓨터에게 이 태그 속 내용물이 제목이라는 것을 이해시키려면
h태그를 사용하여 강조하면 되는 것이다!
<h1> 이것은 제목! </h1>시맨틱 태그를 사용하면 좋은점
인간과 컴퓨터 모두가 이해할 수 있게 웹을 구성하게 되면 좋은 점에는 어떤 것들이 있을까?
-
사용자가 어떤 정보를 얻기 위해 검색을 하였을 때 원하는 정보가 나오게끔 만들어준다. 즉, 검색의 최적화를 도와준다.
-
웹 접근성을 높여준다. 웹사이트를 이용할 때 시각적인 정보가 아니라 Screen reader를 사용하여 청각적 정보만을 가지고 이용하거나, 키보드만을 사용할 때에도 웹 동작에 문제가 없게 만들어준다.
-
유지보수가 용이하다. 개발자들이 HTML의 구조를 파악하기 쉬워진다.
