마크업을 할때 웹 표준 준수와 웹 접근성 향상 모두를 만족시키기 위해 노력해야 한다. 즉, 높은 접근성 요소 또는 기술을 적용함으로써 대다수는 물론 소수의 사용자에게 동일한 콘텐츠와 서비스를 적용할 수 있도록 해야 하며 이러한 웹 접근성을 높이는 방법의 일환으로 시맨틱 마크업(Semantic Markup)의 중요성 및 특징에 대해 간략히 알아보자.

태그의 세분화

HTML5 등장 이후 태그가 세분화 되었다. 즉, 이전에는 <div>로 거의 대부분의 태그를 통일하여 마크업을 했지만 현재는 각각의 용도에 따라 태그를 선택하여 작성한다. 즉 작성하는 컨텐츠에 맞게 어떤 역할인지, 어떤 부분인지 태그로 쉽게 표현할 수 있어 코드를 작성하는 사람도, 읽는 사람도 코드를 이해하기 용이하며 무엇보다 검색 엔진에 최적화 시킬 수 있다는 이점이 있다. 이는 곧 웹 표준에 맞게 작성한다는 의미와도 상통하는데, 결국은 컴퓨터가 이해할 수 있게 작성하여 검색 엔진 최적화 뿐 아니라 나아가 시각 장애인 이나 지체 장애인 등 소수의 사람들이 동일한 서비스를 받을 수 있도록 작성함을 의미한다.

Semantic Tag 예시

<header>, <main>, <footer>, <aside>, <article>, <section>

<aritcle>과 <section>

<article> 은 <section>의 모음이라 할 수 있다. 즉, <article> 은 독립적으로 보여질 수 있는 문서를 묶는 단위이며, <section>은 문서 내에서 관련된 주제로 묶은 본문1, 본문2 와 같은 영역이라고 생각하면 쉽다.

<ul> 과 <ol>

<ul>은 순서가 없는 list의 조합이며 <ol>은 순서가 있는 list의 조합이다. 하위태그로 모두 <li>를 사용한다.

<a> 과 <button>

<a> 태그는 페이지를 이동할 때 사용하며 <button>은 user의 행위(로그인, 회원가입 등)가 있을때 사용한다.

이외에도, <b>보다는 <strong>을 <i>태그보다는 <em>태그를 사용하는 것 등 모두 시맨틱한 마크업 이라고 할 수 있다. 이를 통해 높은 접근성 요소로 모든 사람이 편리하게 사용할 수 있는 웹을 제공할 수 있으며 시맨틱(Semantic) 태그를 사용하는 것만으로도 웹 표준 준수와 웹 접근성향상 모두를 만족시킬 수 있다.