[HTML] 시멘틱 마크업

 

 정보의 홍수 속에서  어떻게하면 의미있는 정보에 효율적으로 접근할 수 있을까? 

의미있는 태그를 통해 브라우저와 개발자 모두가 태그만으로 문서의 구조를 이해하게 함으로써 정보 검색의 효율을 높이는 시멘틱 웹에 대해 알아보자.

 

' 시멘틱 마크업 '

- 시멘틱(Semantic) :  의미론적인, 의미있는

- 마크업(Markup) : 표시하다

 

옛날 옛적의 신문사에서는 글을 쓰는 사람과 글을 인쇄하는 사람이 따로 있었다.

글을 쓰는 사람은 글자의 크기나 굵기와 같은 효과는 직접 수정할 수 없었고 글을 인쇄하는 사람이  제목 영역의 글자의 크기를 키우거나 강조해야 하는 글자의 굵기를 굵게 하는 등의 수정을 거쳐 인쇄를 하였다.

그래서 글을 쓰는 사람은 글을 그냥 주지 않고 제목이 되는 부분, 내용이 되는 부분, 강조해야 할 부분, 이탤릭체를 사용해야 할 부분 등 표시를 해서 인쇄하는 사람에게 넘겨주었다. 이것이 마크업이다.

이것은 시멘틱 웹에서 개발자인 우리들이 브라우저가 웹화면에 문서를 보여주는 방식을 결정해주는 마크업과 유사하다.

 

 웹 기술을 통해 정보의 표현과 전달에 간편한 방법이 제공되면서 인터넷에 방대한 정보가 축적되었다.

 

그러나 기존에 키워드에 의한 정보의 접근만 허용하는 방법으로는 정보 검색시에 무수히 많은 불필요한 정보들이 노출되었다.

 

그래서 HTML로 작성된 문서의 의미정보를 컴퓨터가 해석할 수 있도록 하기 위해 시멘틱 웹이 등장했다.

 

시멘틱 웹은  웹상에 존재하는 수많은 문서들에 담긴 정보의 의미를 기계가 해석할 수 있도록 의미있는 태그를 사용하는 것이다.

이를 통해 컴퓨터가 웹페이지를 이해하게 함으로써 데이터의 활용성을 높이고, 코드의 가독성을 높여준다.

 

 HTML의 시멘틱태그에는 대표적으로 h1~h6, form, table, img 등이 있고 이들 태그는 브라우저에 그 내용에 대한 설명을 전달해준다.

(시멘틱 요소가 아닌(아무 의미 없는)태그에는 div, span 등이 있다.)

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

  font 태그에 크기를 6으로 지정하고 볼드체로 변경한 글자와 h1태그를 이용해 작성한 글자는 브라우저에서 같은 글자로 출력된다.

 

하지만 컴퓨터는 h1 태그를 이용한 글자에 대해서는 그 의미를 해석할 수 있지만 font태그를 이용한 글자에 대해서는 요소에 대한 아무런 의미를 얻지 못한다.

 

h1태그는 제목(header)요소 중 가장 상위 레벨이라는 의미를 내포하고있기 때문에 개발자가 의도한 요소의 의미가 명확히 드러난다.(이를 통해 코드의 가독성이 높아지고 유지보수가 쉬워진다.)

 

즉, <h1>과 같은 시멘틱태그를 통해 브라우저, 검색엔진, 개발자 모두에게 코드의 의미를 명확히 설명할 수 있게 된다.