1. 왜 시맨틱 태그가 필요한가?
HTML은 단순히 화면에 무언가를 표시하는 언어가 아니다.
웹 문서의 구조와 의미를 정의하는 언어로,
웹 문서는 브라우저뿐만 아니라 검색 엔진, 스크린 리더, 다른 개발자에게도 읽힌다.
같은 구조라도 <div>만으로 작성한 HTML과
의미를 가진 태그로 작성한 HTML은 해석 방식이 달라진다.
즉, 시맨틱 태그는 디자인을 위한 태그가 아니라 문서의 의미를 표현하기 위한 도구이다.
2. 문서 외부에 대한 정보 - <head> 영역
HTML에서 의미는 크게 두 영역으로 나뉜다.
하나는 문서 외부를 설명하는 정보이고,
다른 하나는 문서 내부 구조를 정의하는 정보이다.
<meta> 태그는 화면에는 보이지 않지만,
브라우저와 검색 엔진이 페이지를 이해하는 데 사용된다.
핵심 요소만 정리하면:
charset→ 문자 인코딩viewport→ 반응형 설정description→ 검색 결과 요약robots→ 검색 노출 제어- Open Graph → 소셜 공유 정보
<head>는 페이지의 설명서 역할을 한다.
3. 시맨틱 태그의 구조적 분류
시맨틱 태그는 역할에 따라 크게 세 가지로 나눌 수 있다.
페이지의 큰 뼈대
<header><main><footer>
이 태그들은 문서의 전체 구조를 형성하는 영역이다.
<header>
페이지나 섹션의 도입부를 나타낸다.
로고, 제목, 검색창, 내비게이션 등이 포함될 수 있다.
반드시 페이지 최상단만 의미하지는 않으며,
section이나article내부에도 존재할 수 있다.
<main>
페이지의 핵심 콘텐츠 영역이다.
- 문서당 한 번만 사용한다.
- 반복되는 요소(
header,nav,footer)는 포함하지 않는다.
<footer>
페이지나 섹션의 마무리 영역이다.
- 저작권 정보
- 관련 링크
- 작성자 정보
- 부가적인 메타 정보
콘텐츠 단위 구분
<article><section><aside>
이 태그들은 콘텐츠의 의미와 독립성에 따라 구분된다.
<article> - 독립적인 콘텐츠
그 자체로 완결성을 가지는 콘텐츠이다.
- 블로그 글
- 뉴스 기사
- 포럼 게시글
- 댓글
RSS 피드에 포함될 수 있다면 <article>로 보는 것이 적절하다.
<section> - 주제별 구획
문서 내부의 논리적 구분 단위이다.
- 일반적으로 제목(
h2,h3)을 포함한다. - 단순 레이아웃 묶음이라면
<div>가 더 적절하다.
<aside> - 부가 정보
주요 콘텐츠와 간접적으로 연관된 정보를 담는다.
- 사이드바
- 관련 글
- 광고
- 참고 링크
탐색 영역
<nav>
사용자의 이동을 위한 주요 링크 집합이다.
- 모든 링크를
<nav>로 감쌀 필요는 없다. - 사이트의 핵심 탐색 메뉴에 사용한다.
4. <div>와 무엇이 다른가?
같은 화면 구조라도 태그 선택에 따라 의미는 달라진다.
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div><header></header>
<main></main>
<footer></footer>두 코드는 시각적으로 동일할 수 있다.
하지만 브라우저와 검색 엔진이 이해하는 방식은 다르다.
<div>는 의미 없는 컨테이너다.- 시맨틱 태그는 역할을 명확히 정의한다.
이 차이는 다음 영역에 영향을 준다:
- 접근성 (스크린 리더 구조 인식)
- SEO (검색 엔진의 문서 분석)
- 협업 및 유지보수
- 브라우저 Reader Mode 지원
5. 시맨틱 태그를 이해하면 달라지는 점
시맨틱 태그를 이해하면 HTML 작성 방식이 달라진다.
- CSS보다 먼저 문서의 의미 구조를 설계하게 된다.
<div>남용을 줄일 수 있다.- 검색 엔진과 접근성을 자연스럽게 고려하게 된다.
- 협업 시 구조 파악이 쉬워진다.
HTML은 단순한 마크업이 아니라
문서 구조를 정의하는 언어라는 점을 인식하게 된다.
6. 핵심 정리
<head>는 문서의 외부 정보(설명)을 담는다.- 시맨틱 태그는 문서의 내부 구조(의미)를 정의한다.
<article>은 독립 컨텐츠,<section>은 주제 구획이다.<main>은 문서당 하나만 사용한다.<div>는 의미가 필요 없을 때만 사용한다.
