Web Front/HTML
[HTML 시작하기] #03 HTML 문서의 구조
TOASTDEV
2025. 7. 4. 10:00
반응형
안녕하세요, 토스트 데브입니다!
지난 시간에는 HTML 요소의 속성(Attribute)에 대해 알아보았는데요,이번 시간에는 웹 문서의 시작이 되는 HTML 문서의 구조에 대해 배워보겠습니다.
웹 페이지는 눈에 보이는 부분만큼이나, 눈에 보이지 않는 구조와 규칙이 굉장히 중요하답니다.
그럼 하나씩 함께 살펴볼까요?
HTML5 선언 방식
예전 HTML4나 XHTML 시대에는 아래와 같이 복잡한 선언이 필요했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//KR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">하지만 HTML5부터는 훨씬 간단해졌습니다!
<!DOCTYPE html>이 한 줄만으로도 “이 문서는 HTML5 문서입니다”라고 선언할 수 있게 되었죠.
HTML 문서의 기본 골격
HTML 문서는 기본적으로 html 요소 안에 head와 body 요소가 포함되는 구조입니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>비유로 이해해볼까요?
- <html> 태그는 사람의 전체 몸
- <head>는 머리 (정보/설정)
- <body>는 몸통 (실제 화면에 보이는 콘텐츠)
실제 구성 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 문서 구조 배우기</title>
</head>
<body>
<p>이 문서는 HTML 문서의 작성 방법을 배우기 위해 작성된 문서입니다.</p>
</body>
</html>주요 요소 설명
| 태그 | 역할 |
| <!DOCTYPE html> | HTML5 문서임을 선언 |
| <html> | 전체 HTML 문서의 루트 요소 |
| <head> | 문서 정보(meta), 제목(title), 스타일 등 |
| <body> | 실제 사용자에게 보이는 콘텐츠 |
HTML 주석(Comment) 작성법
HTML에서는 코드를 설명하거나 메모를 남길 수 있도록 주석을 작성할 수 있습니다.
<!-- 이 부분은 주석입니다 -->주석은 화면에 표시되지 않으며, 코드의 의미나 용도를 문서화할 때 유용합니다.
<body>
<p>이 문서는 HTML 문서의 작성 방법을 배우기 위해 작성된 문서입니다.</p>
<!-- 이부분은 주석 부분입니다. -->
</body>실제 웹 브라우저에서는 주석이 표시되지 않습니다.
정리하면?
| 구성요소 | 설명 |
| <!DOCTYPE html> | HTML5 문서임을 선언 |
| <html> | HTML의 루트 요소 |
| <head> | 문서 정보 설정 영역 (노출되지 않음) |
| <body> | 실제 콘텐츠가 들어가는 영역 |
| <!-- --> | 코드 설명용 주석 (화면에 노출되지 않음) |
마무리
HTML 문서의 기본 구조는 웹 페이지의 뼈대이자 시작점입니다.
이 구조를 정확히 이해하고 있어야 이후에 CSS나 JavaScript를 적용할 때도 문제가 생기지 않죠.
반응형