HTML 문서 구조란?
웹페이지는 모두 일정한 틀을 가지고 만들어집니다.
이 틀을 HTML 문서 구조라고 합니다.
브라우저가 HTML 문서를 올바르게 해석하고 화면에 표시하려면 반드시 이 구조를 따라야 합니다.
기본 구조를 잘 이해하면 HTML을 작성할 때 훨씬 쉽게 페이지를 만들 수 있습니다.
처음에는 복잡하게 느껴질 수 있지만 한 번 익히면 어떤 웹사이트를 만들 때든 똑같이 활용됩니다.
간단한 예시
아래는 가장 기본적인 HTML 문서 구조입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
여기에 화면에 보여질 내용이 들어갑니다.
</body>
</html>
위 코드를 직접 작성해보면 브라우저에서 간단한 웹페이지가 열립니다.
중요한 점은 "항상 이 틀을 기본으로 시작한다"는 것입니다.
각 태그의 역할과 추가 정보
① <!DOCTYPE html>
- 이 문서가 HTML5 문법을 사용한다는 것을 선언합니다.
- 브라우저가 문서를 올바르게 해석할 수 있도록 도와줍니다.
- 예전 버전의 HTML에서는 doctype이 매우 길었지만 HTML5부터는 단 한 줄로 간단해졌습니다.
② <html> ... </html>
- HTML 문서 전체를 감싸는 최상위 태그입니다.
- lang 속성으로 문서의 언어를 지정할 수 있습니다. (예: ko, en)
- 언어를 지정해 두면 검색엔진 최적화(SEO)와 스크린리더(시각장애인용 프로그램)에서도 도움이 됩니다.
③ <head> ... </head>
- 웹페이지의 정보(메타데이터)를 담는 부분입니다.
- 사용자에게 직접 보이지 않지만 매우 중요한 정보가 들어갑니다.
- 예시:
- <meta charset="UTF-8"> : 한글이 깨지지 않도록 설정
- <title>문서 제목</title> : 브라우저 탭에 표시되는 제목
- <link> : CSS 파일이나 파비콘(아이콘)을 연결할 때 사용
- <head>는 앞으로 배우게 될 SEO(검색 최적화)나 외부 리소스 연결과도 관련이 많습니다.
④ <body> ... </body>
- 사용자가 실제로 보는 내용이 들어갑니다.
- 텍스트, 이미지, 버튼, 동영상 등 화면에 나타나는 모든 요소를 작성합니다.
- <body> 안에 작성하는 순서가 실제 화면에 나타나는 순서와 동일합니다.
간단한 실습
아래 코드를 작성하고 브라우저에서 열어보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 HTML 문서 구조를 연습하는 예제입니다.</p>
<img src="https://via.placeholder.com/300" alt="예시 이미지">
<button onclick="alert('환영합니다')">클릭</button>
</body>
</html>
결과:
- 제목: "안녕하세요"라는 글자가 크게 표시됩니다.
- 문단: 설명 문장이 제목 아래 표시됩니다.
- 이미지: 간단한 예시 이미지가 표시됩니다.
- 버튼: 클릭하면 알림(alert)이 뜹니다.
주의할 점
- <!DOCTYPE html>은 반드시 문서 맨 위에 작성합니다. 그렇지 않으면 브라우저가 오래된 방식(Quirks Mode)으로 페이지를 해석할 수 있습니다.
- <meta charset="UTF-8">을 빼면 한글이 깨질 수 있습니다.
- <head>와 <body> 태그의 역할을 헷갈리지 않도록 주의하세요. head는 정보, body는 실제 화면입니다.
추가 정보
- HTML 구조를 미리 잡아주는 "HTML 템플릿"을 만들어 두면 프로젝트 시작할 때 매번 편리하게 쓸 수 있습니다.
- VSCode 같은 코드 에디터에서는 ! + Enter를 입력하면 자동으로 기본 HTML 구조가 생성됩니다. (Emmet 기능)
- HTML 구조는 변하지 않기 때문에 확실히 익혀두면 이후 CSS나 JavaScript를 배울 때 훨씬 수월합니다.
정리
- HTML 문서는
<html>,<head>,<body>로 구성됩니다. - <head>는 페이지의 정보를 담는 곳, <body>는 사용자가 보는 화면을 구성하는 곳입니다.
- 다음 글에서는 HTML의 기본 태그(제목, 문단, 줄바꿈)를 하나씩 배우고 실습합니다.
'웹프로그래밍 - 기초' 카테고리의 다른 글
| 4편 | HTML 텍스트 꾸미기 태그 배우기 (0) | 2025.09.13 |
|---|---|
| 3편 | HTML 기본 태그 배우기: 제목, 문단, 줄바꿈 태그 (3) | 2025.07.31 |
| 1편 | 웹프로그래밍이란? (1) | 2025.07.29 |