Antigravity Agent
34 lines
2.6 KiB
Markdown
34 lines
2.6 KiB
Markdown
---
|
|
id: WEB-HTML-SEMANTIC-001
|
|
category: "10_Wiki/💡 Topics/AI"
|
|
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
|