이 글에서는 HTML(HyperText Markup Language) 에서 시맨틱 마크업(Semantic Markup)이 무엇이고 언제 사용하는지에 대해서 정리했습니다.

HTML: 시맨틱 마크업(Semantic Markup)

시맨틱 마크업은 웹 페이지를 "보이는 것"을 넘어 사람과 검색 엔진·스크린 리더 같은 프로그램이 모두 이해하기 쉽도록 콘텐츠의 의미에 맞는 HTML 태그를 골라 구조를 표현하는 방식으로 작성하는 것을 말합니다. 이렇게 하면 하나의 문서 안에서 인간과 기계가 동일한 구조와 의미를 공유할 수 있습니다.

시맨틱 마크업: 왜 중요할까?

시맨틱 HTML을 사용하면 사람뿐만 아니라 검색 엔진, 스크린 리더 같은 프로그램 또한 웹 페이지를 잘 이해할 수 있습니다. 예를 들어 단순히 div 를 사용하는 것이 아니라 상단(header)·본문(main)·하단(footer) 과 같이 사용하면 구조가 훨씬 명확해집니다.

크롤러가 시맨틱 태그를 활용하는 방식

"시맨틱 마크업이 SEO에 어떻게 도움이 되나요?"라는 질문이 나오면, 검색 엔진의 실제 동작을 설명할 수 있으면 좋습니다.

• Google 크롤러 는 <article> 태그를 만나면 "이 안의 콘텐츠가 독립적인 글이구나"라고 인식합니다. 블로그 글이나 뉴스 기사를 <article>로 감싸면, Google 뉴스나 Discover에 노출될 가능성이 높아집니다.
• <nav> 태그를 통해 크롤러는 사이트의 전체 구조와 페이지 간 관계 를 파악합니다. 사이트맵 없이도 네비게이션 링크를 따라가며 페이지를 발견할 수 있죠.
• <main> 태그는 크롤러에게 "여기가 핵심 콘텐츠"라는 신호를 줍니다. 광고나 사이드바가 아닌 본문에 가중치를 부여하는 데 활용됩니다.

스크린 리더의 실제 동작 차이

스크린 리더(NVDA, VoiceOver 등)는 시맨틱 태그를 만나면 사용자에게 영역의 역할을 안내합니다.

• <nav>: "네비게이션 영역"이라고 안내하고, 사용자가 단축키로 네비게이션 영역으로 바로 이동할 수 있습니다.
• <main>: "본문 영역"으로 안내하며, 대부분의 스크린 리더에서 본문으로 바로 점프하는 단축키를 지원합니다.
• <aside>: "보조 콘텐츠"로 안내하여, 사용자가 필요 없으면 건너뛸 수 있게 합니다.
• <div>: 아무런 안내가 없습니다. 시각 장애 사용자는 이 영역이 무엇인지 알 수 없습니다.

이런 차이를 알면 "시맨틱 마크업은 왜 쓰나요?"에 대해 단순히 "SEO에 좋습니다"가 아니라 구체적인 근거를 들어 답할 수 있습니다.

시맨틱 마크업: 여러가지 시맨틱 태그

• header: 페이지나 섹션의 머리글, 로고·메인 내비게이션 등을 담는다.
• nav: 주요 이동 경로를 모아둔 내비게이션 영역을 표현한다.
• main: 문서에서 가장 핵심이 되는 본문 콘텐츠를 감쌀 때 사용한다.
• section: 주제를 기준으로 문서 안을 여러 덩어리로 나눌 때 사용한다.
• article: 블로그 글, 뉴스 기사처럼 독립적으로 재사용 가능한 콘텐츠 블록에 사용한다.
• aside: 본문을 보조하는 사이드바, 관련 링크, 광고 영역 등에 사용한다.
• footer: 문서나 섹션의 맺음말, 저작권 정보, 연락처 등을 담는다.

위의 시맨틱 태그 등을 적절한 곳에 사용하면 "여기는 헤더, 여기는 내비게이션 또 이쪽은 본문" 과 같이 의미를 명확하게 드러낼 수 있습니다.

시맨틱 마크업: 언제, 어떻게 ?

시맨틱 태그는 레이아웃을 나누는 모든 곳에 쓰기보다는 의미와 역할이 분명한 곳에 사용해야합니다. 예를 들어 페이지 상단(header)·하단(footer), 메인 내비게이션(nav), 본문(main), 사이드바(aside)처럼 기능이 뚜렷한 영역에 사용해서 구조를 드러내는거죠. 만약 단순히 스타일을 위해서 구역을 나누거나 특정 부분에 색·여백 등을 주려는 목적이라면, 여전히 div, span 같은 비시맨틱 태그를 사용하는게 좋습니다.

• semantic tag: 의미와 역할이 분명하게 드러나는 영역에 사용하는 태그 (예: header, nav, main, section, article, aside, footer).
• div, span: 별도의 의미를 가지지 않는 일반 컨테이너로, 레이아웃을 나누거나 스타일·스크립트 적용을 위해 사용

주의할 점

1. div로 모든 것을 감싸면 SEO와 접근성이 모두 나빠진다

<div>는 의미가 없는 컨테이너다. <nav>, <article>, <aside> 등 시맨틱 태그를 사용해야 검색 엔진과 스크린 리더가 페이지 구조를 이해할 수 있다.

2. heading 레벨을 건너뛰면 문서 구조가 깨진다

<h1> 다음에 <h3>를 쓰면 <h2>가 빠진 것이므로 접근성 도구에서 경고가 발생한다.