SEO·GEO·AEO·A11y의
4축에서 본 65개 태그
식물도감의 카드처럼 — 각 HTML 태그의 올바른 사용법, 흔한 안티패턴, 그리고 검색·AI 인용·접근성 4축에서의 의미를 한 장에 담았습니다. 깊이 있는 산문은 A11y 코드 리뷰 시리즈에서 다룹니다.
읽는 법 — 4축
- SEO
- 검색엔진 최적화Google·Bing 등 검색엔진에서의 노출·랭킹에 영향을 주는 정도
- GEO
- 생성형 AI 최적화ChatGPT·Perplexity·Gemini 등이 답변 출처로 이 태그의 콘텐츠를 활용하는 정도
- AEO
- 답변엔진 최적화Featured Snippet·People Also Ask 등 검색 결과 안의 답변 블록에 인용되는 정도
- A11y
- 웹 접근성스크린리더·키보드·보조기술 사용자의 사용성에 영향을 주는 정도
메타
8개페이지의 정체성과 검색·SNS 노출을 결정하는 head 안 태그
- 메타
<title>페이지의 제목을 정의하는 메타 태그. 모든 페이지에 반드시 하나가 있어야 한다.
- SEO
- ●●●●●
- GEO
- ●●●●●
- AEO
- ●●●●○
- A11y
- ●●●○○
- 메타
<meta name="description">페이지 내용을 한 단락으로 요약하는 메타 태그. 검색 결과의 본문 미리보기로 사용된다.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●○○○
- 메타
<meta name="viewport">모바일 브라우저의 화면 크기와 확대·축소 동작을 정의. 모바일 친화 페이지의 전제조건.
- SEO
- ●●●●●
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●○
- 메타
<meta charset> + lang페이지 인코딩과 언어 선언. 한글 깨짐 방지 + 스크린리더 발음 엔진 + 검색엔진 언어 인식.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●●
- 메타
<link rel="canonical">동일하거나 유사한 콘텐츠를 가진 여러 URL 중 "정본"을 검색엔진에 알리는 메타 태그.
- SEO
- ●●●●●
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●○○○
- 메타
<link rel="alternate" hreflang>다국어·다지역 페이지를 검색엔진에 명시. 언어별 검색 결과 분리의 핵심.
- SEO
- ●●●●●
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●○○○
- 메타
<link rel="...">페이지와 외부 리소스의 관계를 정의하는 head 태그. canonical, alternate, preload, icon 등 다양한 rel 값.
- SEO
- ●●●●○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●○○
- 메타
meta (security)보안 관련 meta 태그 묶음. CSP, referrer policy, Permissions-Policy 등.
- SEO
- ●●●●○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●○○○
문서 골격
3개html·head·body — 모든 페이지의 최상위 골격 3요소
페이지 영역
8개main·article·section·nav·aside·header·footer·search — 페이지의 시맨틱 영역
- 페이지 영역
<main>페이지의 주요 콘텐츠 영역을 표시하는 landmark. 본문이 어디인지를 보조 기술과 AI에 알리는 핵심 신호.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●●○
- 페이지 영역
<article>페이지에서 독립적으로 배포 가능한 콘텐츠 단위. 블로그 글·뉴스 기사·카드뉴스 한 장.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●○○
- 페이지 영역
<section>페이지나 article 안에서 주제별로 그룹된 콘텐츠 영역. accessible name이 있을 때만 landmark.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●○○
- 페이지 영역
<nav>사이트나 페이지 내 내비게이션 링크 그룹. 주 내비, 푸터 링크, 사이드 목차 등.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●●
- 페이지 영역
<header>페이지나 article의 도입부 영역. 로고·내비·검색 등. 위치에 따라 banner 또는 일반 그룹.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●○
- 페이지 영역
<footer>페이지나 article의 끝맺음 영역. 저작권·정책 링크·연락처 등. 위치에 따라 contentinfo 또는 일반 그룹.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●○
- 페이지 영역
<aside>본문과 분리 가능한 보조 콘텐츠. 사이드바·관련 글·광고·인용 박스.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●○○
- 페이지 영역
<search>검색 인터페이스 영역의 시맨틱. 2023년 HTML 명세 추가. ARIA search landmark 자동 부여.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●○
범용 컨테이너
1개div·span — 의미 없는 wrapper. 시맨틱이 부족할 때의 last resort
헤딩
4개h1-h6 — 페이지의 목차이자 AI 인용의 단위
텍스트 시맨틱
10개p·blockquote·time·mark — 인라인 의미를 입히는 태그
- 텍스트 시맨틱
<p>단락. 텍스트 콘텐츠의 가장 기본 블록 요소.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●○○
- 텍스트 시맨틱
<strong>중요성·심각성·긴급성 강조. 절대 놓치면 안 되는 부분. 기본 bold.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●●○○
- A11y
- ●●○○○
- 텍스트 시맨틱
<em>의미상의 강조. 목소리 톤이 바뀌는 느낌의 부분. 기본 italic.
- SEO
- ●●○○○
- GEO
- ●●○○○
- AEO
- ●●○○○
- A11y
- ●●●○○
- 텍스트 시맨틱
<code>인라인 또는 블록 코드 마크업. 본문 안 변수명·함수명·파일명·코드 스니펫.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●○○
- 텍스트 시맨틱
<blockquote>다른 출처에서 인용한 긴 텍스트 블록. cite 속성과 결합해 출처 명시.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●○○
- 텍스트 시맨틱
<time>날짜, 시각, 기간을 기계 판독 가능한 형식으로 마크업.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●○○○
- 텍스트 시맨틱
<mark>본문 안에서 현재 컨텍스트에서 강조할 부분을 하이라이트. 검색 결과의 키워드 강조 같은 용도.
- SEO
- ●●○○○
- GEO
- ●●○○○
- AEO
- ●●○○○
- A11y
- ●●○○○
- 텍스트 시맨틱
<abbr>약어 또는 두문자어를 마크업. title 속성으로 전체 형태를 제공.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●○○
- 텍스트 시맨틱
<cite>저작물(책, 글, 영화, 노래 등)의 제목을 시맨틱하게 마크업.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●○○○
- 텍스트 시맨틱
<q>문장 안의 짧은 인라인 인용. 자동으로 따옴표가 붙는다.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●○○○
리스트
5개ul·ol·dl — 항목의 관계를 시맨틱하게 표현
- 리스트
<ul>순서 없는 항목 목록. 항목의 순서가 의미를 갖지 않을 때.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●●○
- 리스트
<ol>순서 있는 항목 목록. 항목의 순서가 의미를 갖는다.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●●●
- A11y
- ●●●●○
- 리스트
<li>ul·ol·menu 안의 한 항목. 직속 부모가 리스트여야 의미.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●●○
- 리스트
<dl>정의 목록 (description list). 용어-정의·이름-값 쌍의 시맨틱.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●○○
- 리스트
<dt> + <dd>정의 목록의 용어(dt)와 정의(dd) 쌍. dl 안에서만 의미.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●○○
폼
10개form·label·input·button — 입력과 액션의 단위
- 폼
<form>사용자 입력을 묶는 컨테이너. 데이터 전송·검증의 시맨틱 단위.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●○○○
- A11y
- ●●●●○
- 폼
<label>폼 컨트롤의 사람 친화 라벨. input과 명시적으로 연결되어야 의미.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●○○○
- A11y
- ●●●●●
- 폼
<input>사용자 입력의 표준 단일 줄 컨트롤. type 속성이 의미를 결정.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●○○○
- A11y
- ●●●●○
- 폼
<button>클릭으로 동작을 트리거하는 인터랙티브 컨트롤. URL 이동은 a, 동작은 button.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●○○○
- A11y
- ●●●●●
- 폼
<select>옵션 목록에서 선택하는 드롭다운. 모바일 친화 + a11y 자동.
- SEO
- ●●○○○
- GEO
- ●●●●○
- AEO
- ●●○○○
- A11y
- ●●●●●
- 폼
<textarea>여러 줄 텍스트 입력. 댓글·메시지·긴 답변 등.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●○
- 폼
<fieldset>관련된 폼 컨트롤을 시맨틱하게 그룹화. 라디오 그룹·체크박스 그룹의 표준.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●●
- 폼
<legend>fieldset의 그룹 라벨. fieldset의 첫 자식이어야 한다.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●●
- 폼
<option>select·datalist·optgroup의 자식. 선택지 한 개를 표현.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●○
- 폼
<output>계산 결과 표시. live region 자동. 폼 계산기·환율 변환기 등.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●●○
미디어
6개img·picture·video·audio — 시각·청각 콘텐츠
- 미디어
<img>이미지 표시의 표준. alt 속성으로 대체 텍스트, src로 경로.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●●
- 미디어
<picture>여러 이미지 소스를 조건부 선택. 반응형·포맷별·다크모드 이미지에.
- SEO
- ●●●○○
- GEO
- ●●●○○
- AEO
- ●●○○○
- A11y
- ●●●○○
- 미디어
<source>picture·video·audio의 자식. 조건부 미디어 소스 정의.
- SEO
- ●●●○○
- GEO
- ●●○○○
- AEO
- ●●○○○
- A11y
- ●●○○○
- 미디어
<video>비디오 콘텐츠 표시. 자막·캡션·오디오 설명으로 a11y.
- SEO
- ●●●●○
- GEO
- ●●●○○
- AEO
- ●●●○○
- A11y
- ●●●●●
- 미디어
<audio>오디오 콘텐츠 표시. 팟캐스트·음성 메모·배경 음악 등.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●●
- 미디어
<track>video·audio의 자막·캡션·자막 자동 번역. WebVTT 포맷.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●●
표
6개table·caption·th·td — 데이터의 행-열 관계
- 표
<table>다차원 데이터를 행-열로 표현. 가격표·비교표·통계 등 진짜 데이터에만.
- SEO
- ●●●●○
- GEO
- ●●●●●
- AEO
- ●●●●●
- A11y
- ●●●●○
- 표
<caption>table의 제목·설명. table의 첫 자식이어야 한다.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●○
- 표
<thead>표의 헤더 행 그룹. tbody와 구분되는 시맨틱.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●●○
- 표
<tbody>표의 본문 행 그룹. 데이터 셀들의 컨테이너.
- SEO
- ●●○○○
- GEO
- ●●●○○
- AEO
- ●●●○○
- A11y
- ●●●○○
- 표
<th>헤더 셀. scope 속성으로 행/열 헤더 명시.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●●●
- 표
<td>표의 데이터 셀. tr 안에서 행 헤더(th) 외 모든 데이터.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●○
- A11y
- ●●●○○
인터랙티브
4개a·dialog·details — 사용자 액션의 시맨틱
- 인터랙티브
<a>하이퍼링크. URL로 이동하는 인터랙티브 요소. SEO의 핵심.
- SEO
- ●●●●●
- GEO
- ●●●●●
- AEO
- ●●●●○
- A11y
- ●●●●●
- 인터랙티브
<dialog>모달·비모달 다이얼로그. 2022년부터 모던 브라우저 지원. 직접 모달 만들기의 대체.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●○○
- A11y
- ●●●●●
- 인터랙티브
<details>JavaScript 0줄로 펼침/접힘 가능한 disclosure 위젯. FAQ·아코디언의 정답.
- SEO
- ●●●●○
- GEO
- ●●●●○
- AEO
- ●●●●●
- A11y
- ●●●●○
- 인터랙티브
<summary>details의 토글 트리거. details의 첫 자식이어야 한다.
- SEO
- ●●●○○
- GEO
- ●●●●○
- AEO
- ●●●●●
- A11y
- ●●●●○
도감 + 시리즈로 통합 진단
태그 도감의 60개 카드와 A11y 코드 리뷰 16편을 기반으로 사이트의 SEO·GEO·AEO·A11y를 4축으로 진단해 드립니다.
문의하기