---
id: WEB-HTML-SEMANTIC-001
category: Dev
confidence_score: 1.0
tags: [html5, semantic-web, [[Accessibility|Accessibility]], seo, web-standards, [[Documentation-Strategy|Documentation-Strategy]]]
last_reinforced: 2026-04-26
---

# Semantic HTML Foundations (시맨틱 HTML 기초)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "단순히 '보이는 것'을 넘어 브라우저와 검색 엔진, 그리고 AI 크롤러가 웹사이트의 '의미(Context)'를 단번에 파악할 수 있도록 코드에 논리적 이름표를 붙여라" — 데이터의 구조적 명확성을 통해 접근성과 발견 가능성을 극대화하는 웹 표준의 핵심.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Meaning-oriented Structuring" — 디자인 요소를 위한 `div`, `span` 남발을 지양하고, 콘텐츠의 역할에 맞는 `<header>`, `<main>`, `<article>`, `<footer>` 등의 전용 태그를 사용하여 문서의 아키텍처를 정의하는 패턴.
- **주요 시맨틱 태그와 역할:**
    - **`<header>` / `<footer>`:** 페이지나 섹션의 도입부와 결론부 정의.
    - **`<nav>`:** 주요 내비게이션 링크 그룹.
    - **`<main>`:** 문서의 핵심 주제와 유일한 콘텐츠 영역.
    - **`<article>` / `<section>`:** 독립적으로 배포 가능한 콘텐츠와 논리적으로 구분된 주제별 그룹.
    - **`<aside>`:** 주요 내용과 간접적으로 관련된 부가 정보.
- **의의:**
    - **Accessibility:** 스크린 리더가 문서 구조를 이해하고 사용자에게 효율적으로 전달 가능.
    - **SEO:** 검색 엔진이 콘텐츠의 중요도를 정확히 파악하여 랭킹에 반영.
    - **AEO:** AI 모델이 핵심 정보를 더 정확하게 추출하여 답변 출처로 인용.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 테이블 레이아웃이나 무분별한 `div` 중첩이 일반적이었으나, 현대 정책은 '시맨틱 태그 우선 정책'을 통해 기계 가독성(Machine Readability)을 최우선으로 함.
- **정책 변화:** Antigravity 프로젝트는 모든 UI 개발 시 `div` 사용을 최소화하고, 모든 페이지에 최소 하나 이상의 `<main>`과 적절한 헤딩 계층(H1-H6)을 포함하는 것을 필수 정책으로 시행함.

## 🔗 지식 연결 (Graph)
- Web-Accessibility, SEO-Foundations, [[AI-Answer-Engine-Optimization|AI-Answer-Engine-Optimization]], [[Modern-Website-Architecture|Modern-Website-Architecture]]
- **Raw Source:** 00_Raw/Semantic HTML.md