[HTML] 02. HTML 기본 구조 완전 이해
이번 글에서는 HTML 문서의 기본 구조를 단순히 외우는 것이 아니라, 왜 이런 구조를 가지는지까지 이해해보겠습니다.
HTML은 아무렇게나 작성하는 문서가 아닙니다.
브라우저가 해석할 수 있도록 정해진 문서 구조(Document Structure)를 따릅니다.
1. HTML 문서의 전체 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
화면에 보이는 내용
</body>
</html>
이 구조는 단순한 관습이 아니라, 브라우저가 HTML을 해석하는 표준 방식입니다.
2. 브라우저는 HTML을 어떻게 읽을까?
브라우저는 HTML을 위에서 아래로 한 줄씩 읽습니다. 이 과정을 파싱(Parsing)이라고 합니다.
파싱 과정에서 브라우저는 HTML을 트리 구조로 변환합니다. 이를 DOM(Document Object Model)이라고 합니다.
html
├── head
│ ├── meta
│ └── title
└── body
└── 텍스트 노드
즉, HTML은 단순 텍스트가 아니라 계층 구조를 가지는 문서입니다.
3. DOCTYPE의 진짜 의미
<!DOCTYPE html>은 단순한 선언문이 아닙니다.
브라우저에게 이렇게 말하는 것입니다.
만약 DOCTYPE이 없으면 브라우저는 Quirks Mode(호환 모드)로 동작할 수 있습니다.
호환 모드는 오래된 브라우저 방식으로 해석하기 때문에 레이아웃이 깨질 수 있습니다.
그래서 DOCTYPE은 반드시 문서 최상단에 작성합니다.
4. html 태그는 왜 필요한가?
<html> 태그는 HTML 문서의 루트(root) 노드입니다.
모든 HTML 요소는 반드시 이 안에 들어가야 합니다.
<html lang="ko">
여기서 lang 속성은 접근성과 SEO(검색엔진 최적화)에 영향을 줍니다.
- 스크린 리더가 언어를 인식
- 검색 엔진이 문서 언어 파악
실무에서는 반드시 작성하는 것이 좋습니다.
5. head 태그의 깊은 역할
<head>는 화면에 보이지 않지만 웹페이지의 성능과 동작에 매우 중요한 역할을 합니다.
① 문자 인코딩
<meta charset="UTF-8">
한글이 깨지는 현상을 방지합니다.
② 문서 제목
<title>내 웹페이지</title>
브라우저 탭에 표시되며, 검색 결과 제목에도 사용됩니다.
③ CSS 연결
<link rel="stylesheet" href="style.css">
④ JavaScript 연결
<script src="app.js"></script>
즉, head는 단순 설정 공간이 아니라 웹페이지의 두뇌 영역입니다.
6. body 태그의 본질
<body>는 사용자에게 실제로 보이는 모든 요소가 들어갑니다.
- 텍스트
- 이미지
- 폼
- 버튼
- 표
- 비디오
<body>
<h1>제목</h1>
<p>문단입니다.</p>
</body>
7. 실행 결과 (Output)
위 코드를 실행하면 화면에는 다음과 같이 표시됩니다.
제목
문단입니다.
브라우저 탭에는 다음과 같이 표시됩니다.
8. 핵심 개념 정리
- HTML은 계층 구조를 가진 문서이다
- 브라우저는 HTML을 DOM 트리로 변환한다
- DOCTYPE은 표준 모드 선언이다
- html은 루트 노드이다
- head는 설정과 연결 정보
- body는 사용자에게 보이는 영역
HTML 구조를 이해하면, CSS와 JavaScript를 배울 때 훨씬 수월해집니다.
'Computer Science > HTML' 카테고리의 다른 글
| [HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li) (0) | 2026.02.07 |
|---|---|
| [HTML] 05. 텍스트(글자) 관련 태그 완전 정리 (0) | 2026.02.07 |
| [HTML] 04. 블록 요소 vs 인라인 요소 완전 정리 (0) | 2026.02.07 |
| [HTML] 03. 태그(Tag)의 문법 구조 완전 이해 (0) | 2026.02.07 |
| [HTML]01. HTML이 뭐예요? (0) | 2026.02.07 |