지금까지 HTML의 여러 태그를 배웠지만,
사실 모든 HTML 문서는 하나의 큰 틀로 시작합니다.
그 틀은 바로 이 구조예요
이 구조를 이해하지 못하면, HTML 코드를 아무리 많이 써도
브라우저가 “이게 무슨 역할을 하는지” 완벽히 이해하지 못합니다.
오늘은 이 기본 틀의 논리적인 의미와 역할을 확실히 익혀봅시다.
2025.10.18 - [CODING] - [HTML 시리즈 5] 링크()와 이미지() 삽입하기
2025.10.18 - [CODING] - [HTML 시리즈 4]
2025.10.18 - [CODING] - [HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기
[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기
이전 시간에 우리는 VS Code로 첫 웹페이지를 만들어봤죠.이제 본격적으로 HTML의 핵심 개념인 “태그(Tag)”를 배워봅시다.태그는 HTML의 모든 것을 이루는 기본 단위이자,“웹페이지의 언어”라고
ilsandaddy.tistory.com
1. HTML 문서의 기본 구성
| <!DOCTYPE html> | HTML5 문서임을 선언 |
| <html> | 전체 문서의 루트(root) |
| <head> | 웹페이지의 설정 정보 (보이지 않음) |
| <body> | 사용자가 실제로 보는 콘텐츠 (보임) |
즉,
<head>는 웹페이지의 머리,
<body>는 웹페이지의 몸통이라고 생각하면 됩니다.
2. <head>란 무엇인가?
<head> 영역은 사용자가 직접 보는 부분은 아니지만,
웹페이지의 정보, 제목, 스타일, 메타데이터를 담는 곳이에요.
즉, **“이 페이지가 어떤 페이지인지 브라우저에게 설명하는 구역”**입니다.
예시:
주요 태그 설명
| <meta charset="UTF-8"> | 한글, 영어 등 모든 문자가 깨지지 않게 인코딩 설정 |
| <title> | 브라우저 탭에 표시되는 제목 |
| <meta name="description"> | 검색엔진(SEO)에 표시될 요약문 |
| <link> | CSS 파일 연결 |
| <script> | JavaScript 파일 연결 |
즉, <head>는 웹페이지가 작동하기 위한 설정·정보·연결을 모두 담당합니다.
3. <body>란 무엇인가?
<body>는 사용자가 실제로 보는 화면 부분이에요.
브라우저가 화면에 표시하는 텍스트, 이미지, 링크, 표 등
모든 시각적 콘텐츠가 여기 들어갑니다.
💡 <body> 안에는 그동안 배웠던
<h1>, <p>, <table>, <form>, <div> 등
모든 콘텐츠 태그들이 들어갑니다.
4. <head> vs <body> 비교표
| 역할 | 문서의 정보와 설정 | 실제 화면에 표시되는 콘텐츠 |
| 사용자에게 보임 | ❌ 보이지 않음 | ✅ 보임 |
| 주요 내용 | 제목, 메타정보, 스타일, 스크립트 | 텍스트, 이미지, 표, 입력창 등 |
| CSS/JS 연결 위치 | <link>, <script> 삽입 | HTML 요소와 직접 연결 |
| SEO(검색엔진) 영향 | 매우 큼 | 콘텐츠 내용으로 영향 있음 |
정리하자면,
<head>는 보이지 않지만 브라우저와 검색엔진이 읽는 영역,
<body>는 눈에 보이고 사용자가 상호작용하는 영역이에요.
5. 브라우저는 HTML을 이렇게 읽는다
브라우저는 HTML 문서를 위에서부터 순서대로 읽습니다.
1.<!DOCTYPE html> → “HTML5 문서구나!”
2. <html> 시작
3. <head> 읽으면서 페이지 설정, 폰트, 스타일, 스크립트 로드
4. <body>를 읽고 실제 화면에 표시
즉, <head>에서 미리 준비하고
<body>에서 그 정보를 실제로 표현하는 구조입니다.
6. 실전 예제 — 완전한 HTML 문서 구조
지금까지 배운 개념을 하나로 합쳐볼까요?
💡 결과 설명
- 탭 제목은 “HTML 기본 구조”로 표시됩니다. (<title>)
- 본문에는 제목, 설명, 이미지, 링크가 나타납니다.
- <head>와 <body>의 역할이 명확히 분리되어 있죠.
7. HTML 구조가 중요한 이유
1.검색엔진 최적화(SEO)
→ <head>의 meta 정보는 구글, 네이버 등 검색엔진이 페이지를 이해할 때 사용됩니다.
2.웹 접근성(Accessibility)
→ 시각장애인용 리더기나 번역기 등은 HTML 구조를 기반으로 작동합니다.
3.유지보수성
→ <head>에 설정을 모아두면, 디자인(CSS)이나 동작(JS)을 손쉽게 수정할 수 있습니다.
4.성능 향상
→ 브라우저는 <head>에서 필요한 리소스를 미리 불러와 로딩 속도를 최적화합니다.
8. 마무리 — 웹의 “두 얼굴”을 이해하자
이제 여러분은 HTML의 기본 구조를 완벽히 이해했습니다.
<head> → 보이지 않지만 브라우저와 검색엔진이 읽는 설정 영역
<body> → 실제로 화면에 보여지는 콘텐츠 영역
둘 다 반드시 존재해야 “하나의 완전한 웹페이지”가 됩니다.
이 구분을 명확히 알고 나면,
이제 CSS를 배울 때 “왜 head에 넣는지”,
JS를 다룰 때 “왜 body 맨 아래에 script를 넣는지”
모두 자연스럽게 이해될 거예요.
다음 시간에는
[HTML 시리즈 11] CSS와 HTML의 만남 — 디자인 입히기 시작
을 통해 지금까지 만든 웹페이지에 색상, 글꼴, 여백, 배경을 입혀보겠습니다
[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기
이전 시간에는 HTML이 무엇인지, 그리고 웹페이지가 어떻게 만들어지는지 배웠습니다.이번에는 실제로 코드를 작성할 수 있는 환경을 준비하고,나만의 첫 웹페이지를 완성해 보겠습니다.컴퓨터
ilsandaddy.tistory.com
[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어
혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니
ilsandaddy.tistory.com
'CODING' 카테고리의 다른 글
| [HTML 시리즈 11-2 ] CSS와 HTML의 만남 — 디자인 입히기 시작 (0) | 2025.11.04 |
|---|---|
| [HTML 시리즈 11-1] CSS와 HTML의 만남 — 디자인 입히기 시작 (0) | 2025.10.31 |
| [HTML 시리즈 9] <div>와 <span>의 차이 완벽 이해 (0) | 2025.10.22 |
| [HTML 시리즈 8] 입력창(<input>, <form>)으로 사용자 입력 받기 (1) | 2025.10.21 |
| [HTML 시리즈 7] 표(<table>) 만들기 완전정복 (0) | 2025.10.18 |
