시맨틱 HTML: 어떤 태그를 써야 하고, 왜 접근성과 Google, AI에 중요한가

브라우저는 <div>와 <nav>를 똑같이 표시합니다. 차이는 의미에 있습니다. 시맨틱 HTML은 페이지를 읽는 모든 프로그램에 각 블록이 어떤 역할을 하는지 알려 줍니다. MDN은 이를 요소를 기본 모양이 아니라 의미에 맞게 사용하는 것으로 정의합니다. 검색엔진, 보조 기술, 그리고 AI 모델에 데이터를 공급하는 크롤러 모두 이 의미의 혜택을 받습니다.

주요 시맨틱 HTML 태그는 무엇일까?

HTML 표준에는 수십 개의 요소가 정의되어 있습니다. 거의 모든 콘텐츠 페이지의 뼈대를 이루는 요소는 다음과 같습니다.

텍스트 수준의 태그에도 의미가 있습니다. <strong>은 중요성, <em>은 강조, <blockquote>와 <cite>는 인용, <ul>과 <ol>은 목록, <a>는 링크, <button>은 동작을 나타냅니다.

시맨틱 HTML은 왜 접근성에 중요할까?

스크린 리더는 태그를 바탕으로 페이지 지도를 만듭니다. <header>, <nav>, <main>, <aside>, <footer> 랜드마크 덕분에 사용자는 메뉴나 본문으로 바로 이동할 수 있고, 제목 목록은 목차 역할을 합니다. W3C의 페이지 구조 접근성 튜토리얼이 이런 영역과 논리적인 제목 순서를 권장하는 이유입니다.

클릭할 수 있는 <div>는 기본 <button>이 무료로 제공하는 기능을 직접 다시 만들지 않는 한, 키보드로는 보이지 않고 스크린 리더에서는 읽히지 않습니다. 기본 요소에는 역할, 키보드 포커스, 기대되는 동작이 함께 들어 있습니다. 또한 많은 나라에서 공공 및 상업용 웹사이트의 접근성은 법적 의무이기도 해서, 깔끔한 마크업은 규정 준수의 문제이기도 합니다.

시맨틱 HTML은 SEO에 도움이 될까?

Google은 시맨틱 태그를 직접적인 순위 요소로 제시한 적이 없으며, <div>만으로 만든 페이지도 순위에 오를 수 있습니다. 효과는 간접적이지만 분명합니다.

• 메인 콘텐츠 식별: <main>과 <article>은 중요한 본문을 모든 페이지에 반복되는 메뉴, 사이드바, 푸터와 구분하도록 돕습니다.
• 주제 구조: 순서가 맞는 제목 계층은 페이지가 무엇을 다루고 각 부분이 어떻게 연결되는지 보여 주며, 롱테일 검색어에서의 관련성을 뒷받침합니다.
• 요소의 정확한 이해: 진짜 표, 목록, 날짜는 스타일을 입힌 블록으로 겉모습만 흉내 낸 것보다 읽기 쉽습니다.
• 구조화 데이터와의 일관성: 시맨틱 마크업과 JSON-LD는 같은 페이지를 두 가지 관점에서 설명합니다. 용어집의 구조화된 콘텐츠 항목에서 둘의 조합을 설명합니다.

시맨틱 HTML은 깔끔한 URL이나 빠른 페이지처럼 테크니컬 SEO의 일부입니다. 콘텐츠가 올바르게 읽히도록 하는 기반입니다.

AI 어시스턴트는 페이지 구조를 어떻게 활용할까?

ChatGPT, Gemini, Perplexity, Google AI Overviews는 페이지 전체가 아니라 구절을 골라 인용합니다. 페이지를 가져가는 크롤러는 보통 내비게이션과 반복 요소를 제거한 뒤 텍스트를 블록으로 나눕니다. 명확한 <h2>로 시작하고, 첫 문단에서 질문에 답하며, 하나의 <section> 안에 머무는 섹션은 깔끔한 블록이 됩니다. 같은 내용이라도 중첩된 <div>에 흩어져 있고 굵은 글씨로 제목을 흉내 내면, 메뉴 항목이 섞인 조각이 됩니다. 용어집의 콘텐츠 청킹 항목에서 이런 분할을 견디는 섹션 작성법을 설명합니다.

잘 구조화된 글 페이지는 어떤 모습일까?

블로그 글의 뼈대를 태그별로 설명하면 다음과 같습니다.

1. <header>에는 로고와 메인 메뉴가 담긴 <nav>가 들어갑니다. 이 블록은 모든 페이지에 반복되므로 크롤러는 이를 무시하도록 학습합니다.

2. 바로 뒤에 <main>이 시작됩니다. 그 안에는 <article> 하나만 있으며, 색인되고 인용되기를 원하는 콘텐츠가 여기에 들어갑니다.

3. <article> 안에서는 <header>가 <h1>(페이지 주제), 작성자 이름, 그리고 기계가 읽을 수 있는 형식으로 게시일을 담은 <time datetime="2026-10-18"> 요소를 묶습니다.

4. 글의 각 부분은 <section>이며, 답하는 질문 형태로 쓴 <h2>로 시작하고 <p> 문단, <ul> 목록, 또는 <th> 머리글이 있는 <table>이 이어집니다.

5. 차트는 <figure>에 넣고, 설명적인 대체 텍스트가 있는 <img>와 차트 내용을 밝히는 <figcaption>을 함께 둡니다.

6. 관련 링크는 글의 본문 흐름 밖, <aside>에 넣습니다.

7. <footer>가 법적 고지와 연락처 링크로 페이지를 마무리합니다.

이 뼈대라면 스크린 리더 사용자는 키 하나로 본문에 도달하고, Google은 구조가 명확한 메인 글 하나를 인식하며, AI 크롤러는 어느 <section>이든 독립된 답변으로 가져갈 수 있습니다.

시맨틱 HTML에서 가장 흔한 실수는?

• 어디에나 div: 페이지 빌더는 랜드마크 없이 <div> 층만 출력하는 경우가 많습니다. 최소한 본문을 감싸는 <main>이 있는지 확인하세요.
• 제목 건너뛰기나 잘못된 사용: <h2>에서 <h4>로 건너뛰기, 글자를 키우려고 제목 태그 쓰기, 굵은 문단을 가짜 제목으로 쓰기. 수준은 구조에 따라 정하고, 모양은 CSS로 꾸미세요.
• 경쟁하는 여러 개의 <h1>: HTML은 허용하지만, 페이지 주제를 설명하는 <h1> 하나가 사용자와 검색엔진에 가장 명확한 신호입니다.
• 클릭 가능한 <div>와 <span>: 이동에는 <a>, 동작에는 <button>을 쓰세요.
• 레이아웃용 표와 가짜 표: 표는 데이터를 위한 것입니다. 스타일 블록으로 보여 준 데이터는 행과 열의 관계를 잃습니다.
• 이미지 속 텍스트: 이미지 안의 제목이나 가격은 크롤러도 스크린 리더도 읽을 수 없습니다.
• 텍스트로만 쓴 날짜: datetime 속성이 있는 <time>을 추가해 날짜를 명확히 하세요.

페이지의 시맨틱 구조는 어떻게 점검할까?

간단한 세 가지 점검으로 대부분의 문제를 잡을 수 있습니다. 첫째, 페이지의 제목 개요를 표시해 그것만 읽어 보세요. 내용의 흐름이 전달되어야 합니다. 둘째, 소스 코드에서 <main>, <nav>, <article>을 찾아보세요. 셋째, 키보드만으로 페이지를 탐색하며 모든 링크와 버튼에 도달할 수 있는지 확인하세요. Sorank의 온페이지 SEO 감사는 어떤 URL이든 제목과 마크업 문제를 목록으로 보여 주고, Sorank 무료 Chrome 확장 프로그램은 보고 있는 페이지의 제목 구조를 표시합니다.

각 태그는 그 의미대로 쓰세요. <main> 하나, <h1> 하나, 순서가 맞는 섹션, 진짜 표가 있으면 사람과 Google, AI 모두에게 같은 명확한 페이지 지도가 전달됩니다. 구조가 정리되면 남은 일은 콘텐츠를 꾸준히 쓰고 게시하는 것입니다. Sorank는 Google과 AI에 최적화된 글을 autopilot으로 작성하고 게시합니다.