HTML에는 비슷비슷하지만 다른 여러 태그들이 존재한다. 예를 들어 p 태그에서 크기 및 볼드만 조금 다른 head속성의 태그들이라든지, div태그만으로도 충분히 구현 가능한 table태그 등이 그것이다. 그렇다보니 html을 활용해 화면을 그리는 작업을 할 때도 table, h1등의 태그를 이용하는 것이 아닌, div나 p등의 기본 태그만을 사용해 css로 원하는 스타일을 입혀 사용하는 경우도 종종 있는 듯 하다.
사실 나도 처음 웹개발을 시작할 때 이런 방식으로 작업을 했다. 어차피 디자이너의 의도에 맞게 태그에 css옵션을 주어야 한다면, 애초에 div와 같은 순정(?) 태그들을 사용해 원하는 형태를 만들어 내는 것이 더 쉽고 간편하다고 느꼈기 때문이다. 그러나 이러한 방식의 개발은 html의 시멘틱한, 즉 의미론적 부분을 간과한 사용이라고 할 수 있다. 그렇다면 HTML의 시멘틱한 특징이란 무엇일까?
HTML의 Sementic한 속성이란 그 이름 그대로 HTML이 화면의 구성요소이자 곧 그 자체로 의미를 지닌 요소로서의 역할을 한다는 것을 의미한다. 예를 들어 HTML의 <head>, <nav>, <main>, <footer> 등의 태그는 현재 보여지는 페이지의 각각 영역을 구분짓는 기준이 될 수 있다.
HTML태그들의 이런 의미를 지닌 특성은 다음 두가지 의미에서 반드시 고려되어야하는 부분이다.
웹페이지에 일반적인 방법으로 접근하기 어려운 사람들의 경우 보조적인 수단이 있어야 웹페이지를 의도대로 사용할 수 있다. 특히, 시각장애인의 경우 아무래도 청력에 의지해서 웹을 사용해야 하는데, 이때 주로 스크린리더라는 브라우저 내장 기능을 활용하게 된다. 스크린리더는 화면에 표시된 요소들을 읽어 시각장애인들이 화면을 보지 않고도 웹페이지에 접근할 수 있도록 도와주는 도구이다.
이런 스크린리더는 화면에 표시된 HTML태그들의 의미론적 특성에 따라 컨텐트를 읽어 시각장애인에게 전달한다. 즉, h1태그를 어떤 컨텐츠의 제목이라고 간주하고 읽어주고, 또한 button태그를 버튼으로 인지하여 사용자에게 안내하는 것이다.
만약 헤더를 h1태그가 아닌 p 태그를 사용하여 구현하였다면 스크린리더는 해당 제목을 읽지 않을 것이고, 결국 시각장애인은 해당 컨텐츠를 인지하지 못하고 넘어갈 가능성이 커지는 것이다. 따라서 모두가 평등하게 웹사이트의 컨텐츠에 접근할 수 있도록 html을 사용할 때는 이러한 웹접근성의 부분을 고려하려 Sementic한 부분을 살려 작업하는 것이 좋다.