Semantic HTML Foundations (시맨틱 HTML 기초)

📌 한 줄 통찰 (The Karpathy Summary)

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

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

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

Web-Accessibility, SEO-Foundations, AI-Answer-Engine-Optimization, Modern-Website-Architecture
Raw Source: 00_Raw/Semantic HTML.md