시맨틱 HTML(Semantic HTML)은 요소의 모양이 아니라 콘텐츠의 의미에 따라 <header>, <nav>, <main>, <article> 같은 의미 있는 HTML 요소를 골라 쓰는 마크업 방식이다. 이 목적으로 만들어진 요소를 시맨틱 태그라고 부른다.
구글 web.dev는 “의미론적 HTML을 작성한다는 것은 각 요소의 모양이 아닌 의미에 따라 콘텐츠를 구조화하기 위해 HTML 요소를 사용하는 것”이라고 정의한다 (web.dev, 시맨틱 HTML). 반대말은 의미 없는 <div>와 <span>에 class 이름만 붙여 레이아웃을 짜는 방식이다.
같은 화면이라도 <div class="nav">와 <nav>는 브라우저, 스크린 리더, 검색엔진 크롤러에게 전혀 다른 정보를 준다. 어떤 태그가 있는지부터 본다.
페이지 구조를 나누는 레이아웃용 태그 7종이 핵심이고, 그 밖에 텍스트의 의미를 표시하는 태그가 따로 있다. MDN은 <h1>부터 <time>까지 “약 100개의 의미론적 요소”가 있다고 설명한다 (MDN, Semantics).
| 태그 | 의미 | 쓰는 자리 | 주의 |
|---|---|---|---|
<header> | 머리글 | 페이지 상단의 로고, 사이트명, 검색창. 섹션 안의 머리글에도 쓴다 | 페이지당 여러 개 가능 |
<nav> | 내비게이션 | 주 메뉴, 목차, 이전과 다음 글 링크 묶음 | 모든 링크 묶음이 아니라 “이동용” 링크 묶음에만 |
<main> | 주 콘텐츠 | 그 페이지만의 본문 전체 | 페이지당 하나, 다른 레이아웃 태그 안에 넣지 않는다 |
<article> | 독립 콘텐츠 | 블로그 글, 뉴스 기사, 상품 카드처럼 떼어내도 말이 되는 단위 | 안에 <header>, <footer>를 다시 둘 수 있다 |
<section> | 주제 묶음 | 제목이 있는 본문의 한 덩어리 | 제목(h2 등)이 없으면 <div>가 맞다 |
<aside> | 곁가지 | 사이드바, 관련 글, 광고 | 본문과 간접적으로만 관련된 것 |
<footer> | 바닥글 | 저작권, 연락처, 작성자 정보 | 섹션 바닥글에도 쓴다 |
텍스트용 시맨틱 태그로는 제목 <h1>부터 <h6>, 문단 <p>, 강조 <em>과 <strong>, 인용 <blockquote>, 날짜 <time>, 그림과 설명 <figure>와 <figcaption>, 접기 <details>와 <summary>가 있다. <b>로 굵게 만드는 것과 <strong>으로 “중요하다”고 표시하는 것은 보기엔 같아도 의미가 다르다.
가장 직접적인 수혜자는 보조 기기 사용자다. 브라우저는 페이지를 읽어 DOM을 만든 뒤 “접근성 트리”를 따로 만들고, 스크린 리더는 이 트리로 콘텐츠를 해석하는데, web.dev는 이 접근성 객체 모델이 “DOM의 시맨틱 버전과 같다”고 설명한다 (web.dev, 시맨틱 HTML). <nav>와 <main>이 있으면 스크린 리더 사용자가 메뉴를 건너뛰고 본문으로 바로 갈 수 있고, <div>뿐이면 그 길이 없다.
현실의 홈페이지는 그 길을 잘 내지 않는다. WebAIM이 2026년 2월 상위 100만 개 홈페이지를 분석한 결과 95.9%에서 WCAG 2 위반이 검출됐고, <main> 요소나 main 랜드마크가 있는 페이지는 46.1%뿐이었다 (WebAIM, The WebAIM Million 2026).
제목 구조도 흔들린다. 같은 조사에서 <h1>이 둘 이상인 페이지가 18.1%, 제목 단계를 건너뛴 페이지가 41.8%였다.
개발자에게도 이득이다.
MDN은 “의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다”고 적는다. 브라우저의 읽기 모드, 요약 도구, AI 에이전트처럼 사람 대신 페이지를 읽는 프로그램이 늘수록 이 이점은 커진다.
한국어 상위 문서 대부분이 “검색엔진이 시맨틱 태그를 순위 신호로 본다”고 쓰지만, 구글의 공식 입장은 그보다 훨씬 보수적이다. 구글 SEO 기본 가이드는 “제목을 의미론적 순서로 지정하는 것이 스크린 리더에는 적합하지만 Google 검색 관점에서 볼 때는 순서를 바꾸어도 상관없다”며, “일반적으로 웹은 유효한 HTML이 아니므로 Google 검색이 HTML 사양에 숨겨진 의미론적 의미에 의존하는 경우는 거의 없다”고 밝힌다 (Google Search Central, SEO 기본 가이드).
그렇다고 무관하지는 않다. 구글은 검색결과의 제목 링크를 만들 때 <title>과 함께 “heading 요소(예: <h1> 요소)“를 소스로 쓴다고 명시한다 (Google Search Central, 제목 링크).
제목 태그는 의미론이 아니라 “페이지의 주요 시각적 제목”을 찾는 단서로 쓰이는 셈이다. MDN이 적은 “검색 엔진은 의미론적 마크업을 페이지의 검색 순위에 영향을 줄 수 있는 중요한 키워드로 간주한다”는 문장은 제목 태그 안의 텍스트가 중요하다는 뜻으로 읽는 편이 구글의 설명과 맞는다 (MDN, Semantics).
정리하면 셋이다.
<div>를 <section>으로 바꾼다고 순위가 오르지 않는다.<main>과 <article>은 그 경계를 알려주는 가장 값싼 표식이다. 이 효과는 구글 순위와 별개로 테크니컬 SEO의 기본에 들어간다.구분 기준은 “떼어내도 말이 되는가”와 “제목이 있는가” 둘이다.
<article>이다. 블로그 글 하나, 댓글 하나, 상품 카드 하나가 여기 해당한다.<section>이다. 한 기사 안의 “배경”, “쟁점”, “전망” 같은 묶음이다.<div>다. 그리드 래퍼, 여백 조절용 컨테이너가 그렇다.<article> 안에 <section>이 여러 개 들어갈 수 있고, 뉴스 목록처럼 <section> 안에 <article>이 여럿 들어갈 수도 있다.
자주 하는 실수는 <section>을 <div> 대용으로 남발하는 것과, <main>을 두 개 두는 것, <nav>를 모든 링크 묶음에 붙이는 것이다. 시맨틱 요소에는 각각 암시적 ARIA 역할이 있어서 <nav>에 role="navigation"을 또 붙일 필요는 없다.
적게 쓴다. HTTP Archive의 2024년 Web Almanac에서 모바일 페이지의 전체 요소 가운데 <div>가 28.7%로 1위였고, 보고서는 “divitis는 여전히 존재한다”고 썼다 (HTTP Archive, Web Almanac 2024 Markup). WebAIM 조사의 <main> 보유율 46.1%와 합치면, 홈페이지 둘 중 하나는 본문 경계가 없는 셈이다.
국내 사이트를 서치폴라리스가 2026년 10월 5일 Playwright로 직접 열어 요소를 세어 보니 차이가 더 컸다.
| 페이지 | 전체 요소 중 div 비율 | main | article | nav | header | h1 개수 |
|---|---|---|---|---|---|---|
| 네이버 메인 | 27.1% | 없음 (role=main으로 대체) | 없음 | 없음 (role=navigation) | 없음 | 1 |
| 다음 메인 | 29.3% | 1 | 없음 | 1 | 1 | 1 |
| 쿠팡 메인 | 17.7% | 없음 | 1 | 없음 | 없음 | 0 |
| 조선일보 메인 | 62.4% | 없음 | 7 | 1 | 1 | 0 |
| 나무위키 HTML 문서 | 54.1% | 없음 | 없음 | 없음 | 없음 | 1 |
같은 날 구글 “시맨틱 HTML” 1페이지에 오른 한국어 문서 8편은 7편이 <main>을 썼다.
시맨틱 HTML을 설명하는 글은 시맨틱하게 짜여 있고, 트래픽이 큰 포털과 커머스는 <div>와 ARIA role로 대신하는 경향이 보인다. 서치폴라리스 위키 페이지도 이 조사에서 <main>과 <article>이 빠져 있어 템플릿 수정 대상에 올렸다.
“의미의, 의미론적인”이라는 뜻의 형용사다. MDN은 프로그래밍에서 시맨틱을 “코드 조각의 의미”, 즉 “이 HTML 엘리먼트가 가진 목적이나 역할은 무엇일까”를 가리키는 말로 설명한다 (MDN, Semantics). 검색 분야의 시맨틱 검색(의미 기반 검색)과는 단어만 같다.
사이트 주 메뉴, 문서 목차, 페이지네이션처럼 “다른 곳으로 이동하기 위한 링크 묶음”에 쓴다. 바닥글의 약관 링크 몇 개나 본문 안의 참고 링크까지 전부 <nav>로 감싸면 스크린 리더 사용자가 내비게이션 랜드마크를 골라 이동할 때 오히려 방해가 된다.
구글 공식 문서 기준으로 아니다. 구글은 HTML 사양의 의미론에 “거의 의존하지 않는다”고 밝혔다 (Google Search Central, SEO 기본 가이드). 다만 제목 태그는 제목 링크 생성에 쓰이고, 본문 경계가 분명한 페이지가 AI 검색의 추출에 유리하므로 쓰지 않을 이유도 없다.
서치폴라리스가 AI 검색 가시성을 진단하고 GEO 실행까지 대행합니다.