HTML5 시맨틱 태그에 대한 설명

HTML5 첫걸음

다음 코드는 HTML4를 사용해 의미상 중립적인 div 엘리먼트로 보통 블로그 페이지를 만든 예입니다.

위 코드와 같은 마트업에는 아무런 문제가 없고 HTML5 세상이 오더라도 브라우저에서 아무 문제없이 처리할 것입니다. 하지만 의미상 중립적인 div 만을 사용해 모든 중요한 영역을 구성했으므로 브라우저 관점에서는 전체적인 구조를 파악할 수 없게 됩니다. (HTML4에서는 div를 문서에 구조를 추가할 때 일반적으로 사용하는 방법이라고 정의하고 있습니다).

브라우저가 점차 똑똑해져서 단축키를 누르면 바로 페이지의 내비게이션으로 갈 수 있는 기능이 생겼다고 상상해봅시다. 이런 기능을 만든다고 할 때 브라우저에서 어디로 이동해야 하는지 어떻게 알아낼 수 있을지가 해결 과제입니다. 사이트를 만든 사람에 따라 <div class="menu" >로 쓴 사람도 있을 것이고, class="nav"나 class="navigation", class="links" 같이 쓴 사람도 있을 것이고 때에 따라서는 영어가 아닌 다른 언어로 표현했을 수 도 있습니다. 이런 관점에서 앞서 오페라 MAMA의 표에 있는 menu, nav, sidebar, navigation은 모두 같은 의미라고 생각할 수 있습니다.



왜 <content> 엘리먼트는 없을까?

앞서 이야기한 '내비게이션으로 바로 이동하는' 단축키 기능이 어떻게 작동할지는 쉽게 상상해볼 수 있습니다. 이런 기능은 좋지만 바로 메인 콘텐츠 영역으로 이동할 수 있게 하는 기능이 더 많이 사용될 것입니다. 접근성을 중요하게 생각하는 사람 중에는 페이지의 가장 상단에 '링크 건너뛰기' 같은 링크를 추가해 스트린 리더 사용자들이 내비게이션을 건너 뛸 수 있게 만드는 경우가 많으니까요. 하지만 HTML5에는 <content> 엘리먼트 같은 것이 없기 때문에 지징할 만한 대상이 없습니다. 그럼 스크린 리더(또는 검색 엔진)가 페이지의 메인 콘텐츠 영역을 어떻게 알아내야 하는 걸까요?

이 영역을 찾아내는 방법은 매우 단순합니다. 반대로 생각해서 메인 콘텐츠 영역이 될 수 없는 것을 제외하면 되니까요. 코드로 설명을 하자면 <header>, <nav>, <aside>, <footer>가 아닌 가장 첫 번째 내용 부분이 메인 콘텐츠 영역의 시작이라고 생각하면 됩니다. 그 내용이 <article>로 묶여있건 <div>로 묶여있건 관계 없고 중간에 다른 엘리먼트없이 <body> 엘리먼트에 바로 이어서 나와도 마찬가지입니다. 이런 식으로 메인 콘텐츠 영역을 찾아낼 수 있습니다. 더 명확히 메인 콘텐츠라고 표현하고 싶다면 WAI-ARIA를 사용해 메인 콘텐츠 영역을 감싸는 엘리먼트 role="main"이라고 넣어주면 됩니다.

페이지에서 메인 콘텐츠 영역이 제일 중요한데, 그것만 빼고 나머지 요소들만 자신의 이름을 갖는 엘리먼트가 추가됐다는 개념이 직관적이지 않다고 생각할 수도 있습니다. 어차피 엘리먼트를 추가하는 김에 하나 더 추가해도 괜찮지 않을까하고 생각할 수도 있습니다. 하지만 브라우저를 만드는 측면에서 생각해보면 엘리먼트가 추가될수록 만들기도 복잡하고 버그가 발생할 위험도 커지므로 간단한 문제는 아닙니다. 그렇기 때문에 엘리먼트를 추가하지 않는 것이 더 좋습니다.