# [[Semantic HTML5]]

## 📌 Brief Summary
시맨틱 HTML5(Semantic HTML5)는 웹페이지의 시각적 형태뿐만 아니라 콘텐츠의 의미와 구조를 명확히 전달하기 위해 특정 HTML 태그를 사용하는 방법론입니다. 이는 검색 엔진의 색인 생성, AI 크롤러의 콘텐츠 추출 및 스크린 리더를 통한 웹 접근성을 향상시키는 현대 웹사이트 아키텍처의 핵심 요소입니다 [1-3].

## 📖 Core Content
- **명확한 구조적 태그 활용:** 시맨틱 HTML5는 모든 요소를 단순한 `<div>` 태그로 묶는 것을 지양하고, `<header>`, `<main>`, `<article>`, `<nav>`, `<aside>`와 같은 의미 있는 태그를 사용합니다 [1, 2]. 이를 통해 웹사이트의 코드를 마치 잘 정리된 목차(table of contents)처럼 구성할 수 있습니다 [1].
- **검색 엔진 및 AI 최적화 (SEO & AEO):** 시맨틱 HTML을 사용하면 구글 검색 봇이나 AI 크롤러가 콘텐츠의 계층 구조와 중요도를 정확히 이해할 수 있습니다 [2, 3]. 특히 AI 크롤러가 핵심 콘텐츠를 내비게이션과 같은 부가 요소와 구별하는 데 도움을 주어, 검색 엔진의 AI 오버뷰(AI Overviews)에 노출될 확률을 높이고 구조적 안정성을 강화합니다 [1, 3-5].
- **웹 접근성(Accessibility) 향상:** 시맨틱 HTML5를 사용한 논리적인 구조화는 스크린 리더 및 보조 기기가 웹페이지의 콘텐츠를 올바르게 해석하고 탐색할 수 있도록 지원하여, 모든 사용자에게 더 나은 웹 경험을 제공합니다 [1, 2, 5].

## 🔗 Knowledge Connections
- **Related Topics:** [[Search Engine Optimization (SEO)]], [[Accessibility Compliance (WCAG)]], [[AI Search Optimization]], [[Website Structure]]
- **Projects/Contexts:** [[Modern Website Architecture]]
- **Contradictions/Notes:** 소스 내에서 상충하는 내용은 없습니다. 

---
*Last updated: 2026-04-26*