시맨틱 HTML이란 무엇인가: 접근성과 SEO를 위한 의미 있는 태그

TL;DR#

• 더 많은 사용자가 사이트를 찾게 하려면 웹 접근성을 끌어올려야 하고, 이는 SEO와 직결됩니다.
• 브라우저가 콘텐츠의 의미와 중요도를 이해하려면 의미 없는 div, span 대신 시맨틱 태그를 써야 합니다.
• article, section, header, main, nav, aside, footer 등이 대표적인 시맨틱 태그입니다.
• 시맨틱 태그는 내부적으로 role 속성을 가지며, 브라우저는 이 role로 요소의 역할을 파악합니다.

왜 시맨틱 태그가 중요한가#

웹서비스에서 중요한 일 중 하나는 많은 사람이 사이트에 방문하도록 만드는 것입니다. 방문자가 늘면 회사 매출에도 기여하기 때문에, 이는 프론트엔드 개발자의 핵심 역량 중 하나라고 생각합니다.

이를 위해서는 웹 접근성을 최대한 끌어올려야 합니다. 웹 접근성은 SEO와 관계가 있고, 구글이나 네이버 같은 검색 엔진에서 검색했을 때 서비스가 잘 노출되도록 돕습니다.

즉, 브라우저에게 이 웹서비스가 무엇에 대한 것이고 어떤 내용을 담고 있으며 무엇이 중요한지를 이해시켜야 합니다. 그래야 스크린 리더(Screen Reader)를 사용할 때도 눈이 불편한 사용자에게 큰 도움을 줄 수 있습니다.

이때 가장 일반적으로 쓸 수 있는 방법 중 하나가 시맨틱 태그(Semantic Tags)를 사용하는 것입니다. 말 그대로 의미 있는 요소를 사용하자는 것입니다.

흔히 쓰는 div는 의미가 전혀 없는 요소(element)입니다. 그래서 중요한 콘텐츠에 div를 사용하면, 브라우저는 그 콘텐츠가 중요한지 알 수 없습니다. SEO를 개선하려면 div와 span 같은 의미 없는 태그를 과하게 사용해서는 안 됩니다.

대표적인 시맨틱 태그#

• article - 독립적으로 사용될 수 있는, 즉 자족적인 요소입니다. 블로그 포스트, 뉴스 기사 같은 아이템에 사용할 수 있습니다.
• section - 콘텐츠를 테마별로 그룹화할 때, 즉 콘텐츠의 구역을 나눌 때 사용합니다. 예를 들어 "오늘의 인기 상품!" 같은 테마성 구역에 사용할 수 있습니다.
• header - 서두 및 소개용 콘텐츠를 만들 때 사용합니다. 홈페이지에서 로고가 들어 있는 부분이나, 게시글 페이지의 제목 부분에 사용합니다.
• main - 웹서비스에서 메인이 될 만한 콘텐츠에 사용합니다. 한 페이지에 하나로 제한됩니다.
• nav - 링크 역할을 하는 요소들의 구역입니다. 주로 페이지별 주요 내비게이션 요소가 모인 구역에 사용합니다.
• aside - 메인 콘텐츠와 간접적으로 관련 있으며, 필수적이지는 않은 콘텐츠를 넣습니다.
• footer - 주로 하단에 저작권 같은 추가 정보를 넣는 요소입니다.

정리#

• 시맨틱 태그는 내부적으로 role이라는 속성을 가지며, 브라우저는 이 role로 해당 요소가 어떤 역할을 하는지 이해합니다.
• 각 요소의 role을 잘 파악해, 브라우저가 잘 이해할 수 있는 웹서비스를 만드는 것이 핵심입니다.