문서 구조 및 시맨틱
기본 문서 구조와 시맨틱 웹(Semantic Web)
HTML 문서는 단순히 화면에 보여주기 위한 그림 그리기가 아닙니다.
시맨틱 웹(Semantic Web)은 검색 엔진이나 시각 장애인용 스크린 리더기가 웹 페이지의 '의미'를 명확하게 파악할 수 있도록, 무의미한
시맨틱 웹(Semantic Web)은 검색 엔진이나 시각 장애인용 스크린 리더기가 웹 페이지의 '의미'를 명확하게 파악할 수 있도록, 무의미한
<div> 도배 대신 역할에 맞는 이름표(태그)를 사용하는 최신 웹 표준의 핵심입니다.
1. 과거의 방식 vs 시맨틱 레이아웃 비교
과거에는 모든 구역을 무의미한 <div> 박스로 쪼개는 이른바 Div Soup(디브 수프) 방식을 사용했습니다. 오른쪽의 현대적인 시맨틱 태그 구조와 비교해 보세요.
2. 기본 문서 구조 태그
HTML 문서를 구성하는 가장 기초적인 뼈대(전역) 태그들입니다.
| 태그명 | 역할 영역 | 설명 |
|---|---|---|
<!DOCTYPE html> |
문서 선언 | 이 문서가 HTML5 표준으로 작성되었음을 브라우저에게 알립니다. 문서 최상단에 필수로 위치해야 합니다. |
<html> |
최상위 요소 | HTML 문서의 전체 뿌리가 되며, 주로 lang="ko" 속성으로 주 언어를 설정하여 번역기나 스크린 리더기를 돕습니다. |
<head> |
메타데이터 | 화면에 직접 보이지 않는 문서 정보, 제목(title), CSS 링크, 문자 인코딩 설정 등을 담는 영역입니다. |
<body> |
콘텐츠 | 실제 브라우저 화면에 렌더링되어 방문자에게 보여지는 모든 텍스트, 이미지, UI 요소가 들어가는 영역입니다. |
3. 주요 시맨틱 레이아웃 태그 (의미론적 마크업)
검색 엔진 최적화(SEO)와 접근성 향상을 위해 body 내부에서 구역을 분할할 때 사용하는 태그들입니다.
| 태그명 | 설명 및 역할 |
|---|---|
<header> |
페이지나 특정 섹션의 최상단 머리글 영역. 웹사이트 로고, 제목, 검색창 등을 포함합니다. |
<nav> |
주요 페이지나 다른 섹션으로 이동하는 네비게이션(메뉴) 링크 모음. 스크린 리더는 이 태그를 통해 메인 메뉴를 건너뛸지 묻기도 합니다. |
<main> |
해당 문서의 핵심이 되는 가장 주된 콘텐츠 영역. 문서당 하나만 사용하는 것이 권장되며, 검색 엔진이 문서의 주제를 파악하는 핵심 영역입니다. |
<section> |
연관성 있는 콘텐츠들을 묶어주는 주제별 구역. 보통 내부에 자신만의 제목(h2~h6)을 가집니다. |
<article> |
뉴스 기사나 블로그 포스트처럼 그 자체로 독립되어 완결된 콘텐츠. 외부에서 이 부분만 떼어내서 배포해도 의미가 통할 때 사용합니다. |
<aside> |
본문 내용과 직접적인 연관성이 적은 부가적인 콘텐츠. 사이드바, 배너 광고, 부가 링크 모음 등에 사용됩니다. |
<footer> |
페이지나 섹션의 하단 바닥글 영역. 저작권 표시, 이용약관 링크, 회사 주소 및 연락처 등이 포함됩니다. |
💡 시맨틱 웹의 두 가지 절대적 장점
- SEO (검색 엔진 최적화): 구글봇과 같은 검색 로봇이 어떤 내용이 'main'이고 'article'인지 구조적으로 파악하여 검색 랭킹에 긍정적인 영향을 줍니다.
- 웹 접근성 향상: 시각 장애인이 사용하는 스크린 리더기는 <nav>를 만나면 "메뉴 항목입니다"라고 알려주고, 반복되는 헤더를 스킵하고 <main>부터 읽어주는 등 훨씬 나은 사용자 경험을 제공합니다.
4. 시맨틱 태그 구조 실습
아래 코드를 통해 실제 시맨틱 태그가 어떻게 배치되고, 검색 엔진 봇 모드일 때 어떻게 구분되는지 확인하세요.