HTML 문서에서 <html> 태그는 문서의 최상위 루트(root) 요소이자, 모든 HTML 요소를 포함하는 컨테이너 역할을 합니다. 브라우저는 이 태그를 기준으로 문서의 시작과 끝을 인식하며, 내부에는 <head>와 <body> 단 두 개의 직자식 요소만 올 수 있습니다.
기본 문법 및 구조 예제
올바른 HTML5 문서의 기본 골격은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>메인 제목</h1>
<p>문서 내용이 들어갑니다.</p>
</body>
</html>코드 상세 분석
1. DOCTYPE 선언
<!DOCTYPE html>문서가 HTML5 표준을 따름을 브라우저에 알립니다. 이 선언이 없으면 브라우저가 쿼크 모드(Quirks Mode)로 렌더링하여 레이아웃이 깨질 수 있으므로 반드시 첫 줄에 작성해야 합니다.
2. <html> 태그와 lang 속성
<html lang="ko">lang 속성은 문서의 주 언어를 지정합니다. ko(한국어), en(영어) 등을 명시하면 스크린 리더 접근성 향상, 검색 엔진 최적화(SEO), 자동 번역 기능 등에 긍정적인 영향을 줍니다.
3. <head> 영역 (메타데이터)
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head><meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정하여 한글 깨짐을 방지합니다.<title>: 브라우저 탭에 표시되며, 검색 결과의 제목으로 사용되어 SEO에 핵심적입니다.
4. <body> 영역 (실제 콘텐츠)
<body>
<h1>메인 제목</h1>
<p>문서 내용이 들어갑니다.</p>
</body>사용자가 화면에서 보는 모든 콘텐츠(텍스트, 이미지, 링크, 폌 등)는 <body> 내부에 작성합니다.
핵심 요약 및 모범 사례
- 단 하나만 존재: 문서당
<html>태그는 정확히 한 쌍만 있어야 합니다. - 직자식 제한:
<head>와<body>만 직자식으로 허용됩니다. - 언어 지정 필수:
<html lang="ko">처럼 주 언어를 항상 선언하세요. - 닫는 태그 필수: HTML5에서는 선택적이나, 가독성과 일관성을 위해
</html>을 명시적으로 닫는 것을 권장합니다.
이 구조를 준수하면 브라우저 호환성, 접근성, SEO 측면에서 탄탄한 기반을 갖춘 웹 문서를 만들 수 있습니다.