Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유

HTML 요소는 Semantic 요소와 Non Semantic 요소로 구분할 수 있다.

여거서 Semantic 요소란 의미가 부여된 요소를 의미한다.

 

웹 개발자가 웹 사이트를 구축할 때 각 요소가 가지는 '의미'를 HTML 태그에 직접 부여하여 코드를 작성하는 것이 중요하다. 하나의 예시를 통해 그 이유를 간단히 짚어보자.

 

 

웹페이지에 이미지를 불러오는 2가지 방법으로 '<img> 태그를 사용하는 방법'과 '<div> 태그에 background-image 속성을 추가하는 방법'이 있다. (다른 방법도 있겠지만 여기선 이 두 가지만을 고려하기로 한다.)

 

여기서 <img> 태그는 그 이름에 '이미지'라는 의미가 담겨 있는 Semantic Tag이다.

이런 Semantic Tag를 이용하여 코드를 작성하면 태그 이름만으로 이 요소가 어떤 역할을 하는지 쉽게 유추할 수 있다. 즉 코드의 가독성이 좋아지는 것이다.

 

뿐만 아니라 Semaintic 태그는 검색 엔진애서의 노출과도 깊은 연관이 있다.

검색 엔진은 '로봇(Robot)' 이라는 프로그램을 통해 매일 전 세계 웹사이트의 정보를 수집하는데, 이 때 Semantic 태그애 담긴 의미를 통해 색인을 생성한다. 이는 검색 시 Semantic 태그를 통해 개발된 사이트가 검색 화면에 노출될 확률이 높아진다는 의미이고, 검색엔진의 노출은 곧 사이트 방문자 수가 늘어나게 된다는 의미이며, 사이트 방문자 수의 증가는 경제적 및 사회적 이득과도 직결된다.

 

그렇기 때문에 시멘틱 요소를 사용하여 웹 사이트를 개발하는 것은 매우 중요하다.

그리고 이렇게 작성된 웹 페이지를 우리는 Semantic Web (시멘틱 웹) 이라 부른다.

 

 

• Semantic Tag 예시

<form> <table> <img>
<header> <nav> <aside> <section> <article> <footer>