HTML 기본 구조 이대로 외우세요 – head, body, html 딱 정리했습니다

콘텐츠 목차

HTML 문서 구조란?

HTML 태그는 아는데, 어디에 써야 할지 막막하다면

처음 HTML을 배우면 태그 하나하나는 익히기 쉬운데, 막상 페이지를 만들려 하면 뭐부터 써야 할지 막막해진다. 이럴 땐 문서 구조가 머릿속에 없기 때문이다. 건축으로 치면 설계도 없이 벽돌부터 쌓으려는 것과 비슷하다.

이 글에서는 HTML 문서의 기본 구조를 실제 웹사이트처럼 구성해보며, 태그들이 어디에 어떻게 들어가는지를 입체적으로 다뤄본다. 코딩은 결국 구조와 맥락이다. 이 틀을 알면 어느 태그를 어디에 넣을지도 자연스럽게 정리된다.

선글라스를 낀 HTML 비버가 키보드를 두드리며 코딩하는 모습 — HTML 코드를 입력 중인 쿨한 비버 프로그래머

문서는 선언으로 시작된다

<!DOCTYPE html>

모든 HTML 문서는 이 한 줄로 시작한다. 브라우저에게 “이 문서는 HTML5입니다”라고 알려주는 선언이다. 마치 선생님에게 오늘 수업이 어떤 주제인지 말해주는 것처럼, 이 줄이 있어야 브라우저가 제대로 문서를 읽는다. 과거에는 HTML 4.01이나 XHTML 1.0 같은 다른 버전도 있었지만, 오늘날 대부분은 HTML5를 기준으로 한다.

html 태그는 모든 콘텐츠의 뿌리

<html lang="ko"> ... </html>

HTML 문서 전체를 감싸는 태그로, 그 안에 head와 body가 들어간다. lang 속성으로 문서의 언어를 지정할 수 있고, 이는 검색엔진 최적화나 접근성에도 긍정적인 영향을 준다. 마치 집을 지을 때 외벽이 전체 구조를 잡아주는 것처럼, html 태그는 웹문서의 외곽선 역할을 한다.

head 태그: 설정과 정보

<head>
    <meta charset="UTF-8">   <!-- 문자 인코딩 설정 -->
    <title>문서 제목</title>    <!-- 브라우저 탭 제목 -->
</head>

head는 사용자가 보지 못하는 정보들이 들어가는 공간이다. 인코딩 설정, 문서 제목, 검색 엔진용 설명, 외부 CSS 연결 등 페이지의 ‘설정 파일’ 같은 역할을 한다. 즉, 보이지는 않지만 웹페이지의 성격을 정하는 설계도라고 보면 된다. 구글 검색 결과에 노출될 제목과 설명도 이 영역에서 정리된다.

body 태그: 사용자에게 보이는 영역

<body>
    <h1>안녕하세요!</h1>
    <p>본문 내용입니다.</p>
</body>

화면에 나타나는 모든 콘텐츠는 이 body 안에 들어간다. 텍스트, 이미지, 버튼, 표 등 시각적으로 보이는 모든 요소는 여기서 만들어진다. 말 그대로 페이지의 ‘몸통’이다. 블로그 글, 뉴스 기사, 유튜브 영상 플레이어까지 — 사용자가 실제로 마주하는 모든 것은 body 영역에서 나타난다.

전체 구조 예시와 비교 실습

head와 body의 시각적 차이

<head>
    <title>브라우저 탭 제목</title>
</head>
<body>
    <h1>본문 제목</h1>
</body>

브라우저 탭에 뜨는 제목은 head에, 화면 안에 보이는 제목은 body에 들어간다. 이 두 영역의 역할을 헷갈리지 않게 실습으로 익히는 게 중요하다. head는 보이지 않는 백스테이지, body는 무대 위의 배우와 같다.

전체 HTML 구조 예시 (주석 포함)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">     <!-- 문자 깨짐 방지 -->
    <title>마루의 첫 HTML 문서</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>       <!-- 본문 제목 -->
    <p>이 문서는 HTML의 구조를 배우기 위한 예제입니다.</p>
  </body>
</html>

직접 실습해보기

위 코드를 복사해서 메모장에 붙여넣고 index.html로 저장한 뒤, 브라우저로 열어보자. 탭과 화면에 어떤 내용이 어떻게 나타나는지 직접 눈으로 확인해보면 구조가 더 선명해진다. 코드에 손을 대보는 순간 이해가 기억으로 바뀐다.

정리하며

HTML 문서는 선언으로 시작해서 html, head, body로 이어지는 하나의 구조다. 머리(head)에는 문서의 정보와 설정, 몸(body)에는 사용자에게 보여줄 실제 콘텐츠가 들어간다. 이 흐름을 이해하면 HTML의 절반은 익힌 셈이다. 결국 좋은 구조는 명확한 표현의 시작이고, 그 시작은 지금 익힌 이 틀에서 출발한다.

📌 한 줄 요약
“head는 설계도, body는 무대 위 배우”
구조를 알면 표현이 쉬워진다.