시맨틱 태그는 이름에서 의미(semantics) 를 알 수 있는 HTML 태그로, 내용의 구조와 의미를 명확하게 전달하는 태그입니다.
| 태그 | 의미 |
|---|---|
<header> |
문서나 섹션의 머리말 |
<nav> |
내비게이션(메뉴) |
<main> |
문서의 주요 콘텐츠 |
<section> |
문서의 독립적인 영역 |
<article> |
독립적으로 배포 가능한 콘텐츠 |
<aside> |
보조 콘텐츠(광고, 링크 등) |
<footer> |
문서나 섹션의 맺음말 |
| 장점 | 설명 |
|---|---|
| ✅ 접근성 향상 | 스크린 리더가 구조를 더 잘 이해하여 사용자에게 정확히 전달함 |
| ✅ SEO 최적화 | 검색 엔진이 웹페이지의 의미를 파악하기 쉬워져 노출에 유리함 |
| ✅ 코드 가독성 향상 | 개발자들이 구조와 의미를 직관적으로 이해할 수 있음 |
| ✅ 유지보수 용이 | 명확한 구조 덕분에 나중에 수정하거나 확장하기 쉬움 |