HTML 문서를 구성하는 가장 중요한 태그
HTML에는 콘텐츠 서식 지정, 제목 작성, 정렬 설정, 섹션 추가 등 웹사이트를 구성하기 위한 다양한 태그가 존재합니다. 그중에서도 HTML 문서를 성립시키는 데 반드시 필요한 핵심 태그는 다음 네 가지입니다.
- <!DOCTYPE> — 문서 유형 선언
- <html> — 문서의 최상위 루트 요소
- <head> — 문서 정보 영역
- <body> — 화면에 표시되는 본문 영역
1. doctype (문서 유형 선언)
doctype은 문서 유형 선언(Document Type Declaration)으로, 해당 문서가 어떤 버전의 HTML을 사용하는지 브라우저에 알려주는 역할을 합니다. 이 선언은 HTML5 기준으로 다음과 같이 작성하며, 반드시 문서의 맨 첫 줄에 위치해야 합니다.
<!DOCTYPE html>
doctype 선언이 올바르게 작성되면 브라우저가 표준 모드(Standards Mode)로 페이지를 렌더링하여 일관된 화면 출력을 보장할 수 있습니다.
2. <html> 태그
<html> 태그는 <!DOCTYPE html> 선언을 제외한 모든 HTML 요소를 감싸는 최상위 컨테이너입니다. 즉, 문서의 시작과 끝을 나타내며, 그 외 모든 요소는 <html>과 </html> 태그 사이에 중첩되어 작성됩니다.
<!DOCTYPE html> <html lang="ko"> ... </html>
3. <head> 태그
<head> 태그는 HTML 문서의 머리(헤드) 영역을 나타냅니다. 이 안에 포함되는 태그들은 브라우저 화면에는 직접 표시되지 않으며, 문서의 메타 정보를 담는 역할을 합니다.
대표적으로 페이지 제목을 정의하는 <title>...</title> 태그가 <head> 내부에 위치하며, 문자 인코딩(<meta charset>)이나 스타일시트 연결(<link>) 같은 요소들도 함께 들어갑니다.
<head> <title>HTML Document</title> </head>
4. <body> 태그
<body> 태그는 HTML 문서의 본문 영역, 즉 사용자에게 실제로 보여지는 모든 콘텐츠를 담는 부분입니다. 텍스트, 이미지, 링크, 표, 폼 등 화면에 출력되는 요소들이 모두 이 태그 안에 작성됩니다.
기본 문서 구조 예시
네 가지 핵심 태그를 조합하면 다음과 같은 기본적인 HTML 문서 구조가 완성됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML Document</title> </head> <body> <p>화면에 표시되는 본문 내용입니다.</p> </body> </html>
이처럼 doctype, <html>, <head>, <body>는 HTML 문서의 뼈대를 이루는 필수 태그이므로, 웹 개발을 시작할 때 가장 먼저 정확히 이해하고 익혀야 합니다.