1. 시맨틱 웹과 시맨틱 태그
HTML로 코드를 작성하다 보면 코드 안에서 제목, 내용, 마무리 등으로 내용이 나누어져 있음에도 불구하고 모든 요소를 <div> 태그로 작성을 한다면 코드를 쓰는 사람부터 보는 개발자, 그리고 컴퓨터 입장에서는 웹 페이지의 구조와 의미가 정확하게 보이지 않을 뿐 아니라 고생하여 만든 웹 사이트가 검색 엔진에 최적화되지 않은 상태로 존재하게 될 수 있는 상황에 놓일 것이다.
예를들어
<div class="boky">
<div class="header">
<h1>제목</h1>
</div>
<div class="body">
<p>내용</p>
</div>
<div class="footer">
<p>관련 웹 사이트</p>
</div>
</div>
코드를 작성했으면 <div> 태그 안에 class값을 부여하여 이렇게 나타낼 수도 있지만, 의미없는 <div> 태그를 사용해줘야 한다.
이 경우 '개발자' 나 '컴퓨터 사용자' 의 경우는 <div>태그 안에 header를 알아 볼 수 있지만, '컴퓨터'는 <div> 태그만으로 이 자리가 header임을 알 수가 없다.
이러한 문제를 개선하고자, HTML5 에서는 시맨틱 웹과 개념과 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는, 웹의 구성을 의미론적으로 바꾸어 주는 시맨틱 태그가 등장했다.
각 요소에 대해 간단하게 정리해보면
-
<article> : 문서의 주 내용이 들어감 (보통 <section> 속에서 나뉨.) - <figcaption> : 부모태그인 <Figure> 태그를 설명하는 역할 또는 범례.
- <Figure> : 그림, 사진, 도표 등 독립적인 콘텐츠를 표현
<header> : 문서의 머릿말 <main> : 본문 <body> 의 주요 컨텐츠를 나타낸다. - <mark> : 본문 중 특정 부분을 강조 혹은 하이라이트 한 부분
-
<section> : 문서의 독립적인 구획
등이 있는것을 알 수가 있다.
시맨틱 태그의 이점
시맨틱 태그를 사용함에 따라 오는 이점에는 크게 세 가지가 존재한다.
이 세 가지는 모두 인터넷 전반에 걸쳐 웹 사이트 구성의 일관성을 향상시키는 것과 관련이 있으며, 개발자가 'Semantic' 즉, '의미론적'으로 코드를 작성할 때 컴퓨터 브라우저가 식별할 수 있는 요소에 대해 표준화된 이름을 사용함으로써 인터넷 상에서 HTML의 상호 운용성과 식별성이 향샹되는 것이다.
1. 유저의 관점 : 모두를 위한 웹사이트
시맨틱 태그를 사용하면 페이지의 접근성이 향상된다.
HTML 시맨틱 태그 요소는 사람들이 웹 페이지를 탐색하고 페이지와 상호 작용하는데 도움이 되는 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술에 대한 유용한 정보와 단서를 제공해준다. 이 과정에서 시맨틱 태그 요소들이 스크린 리더 사용자에게 큰 이점을 주기 때문인데 웹 접근성의 목표는 신체적, 인지적 장애가 있는 분들을 포함하여 "모든 유저"로 이루어져 있으므로 제한된 하드웨어만으로 웹에 접근해야 하는 환경에서도 비교적 쉽게 웹에 접근하게 마크업을 해 주어 큰 도움이 될 수 있기 때문이다.
2. 개발자의 관점 : 편해지는 협업
개발 측면에서 이루어지는 시맨틱 태그 준수의 이점도 존재한다.
시맨틱 마크업을 사용하여 코드를 작성하면 <div>태그만을 사용하는 것 보다 마크업만 보고 어떤 구조에 어떤 내용이 있는지 파악이 용이해진다. <header>, <main>, <footer>, <nav> 등의 요소들로 페이지의 레이아웃을 파악할 수 있고, 다른 개발자가 작성한 코드를 보았을 때 부가 설명없이 내용을 알 수 있으니 서로간에 더욱 빠른 커뮤니케이션이 가능하고 유지보수 차원에서도 이득이 많은 부분인 것이다.
3. 서비스 관점 : SEO, 검색엔진 노출과 콘텐츠 관리
웹페이지에는 두 종류의 독자가 존재한다. 하나는 웹 콘텐츠를 읽고 소비할 사람들이고, 다른 하나는 검색엔진이라고 할 수 있다. 웹페이지의 텍스트와 이미지 그리고 동영상 등을 직접 소비하는 유저들과 달리, 검색엔진은 이 콘텐츠를 표현하기 위해 사용하는 HTML을 인식한다. 시맨틱 태그를 사용하여 만든 웹사이트는 검색엔진에게 컨텐츠를 이해하는데 큰 도움을 주기 때문에 이를 통하여 웹사이트 노출 순위에 기여할 수도 있게 되는 것이고 더 많은 트래픽을 유도할 수도 있는 것이다. 더불어 키워드와 문구로 나누어진 구조들이 웹페이지 최적화에 도움을 주어 사용 유저들이게 성능과 속도를 향상시키는 도움이 될 수 있는 것이다.
