HTML 기본 구조 한 번에 이해하기

HTML 문서를 처음 보면 여러 태그가 한꺼번에 나와서 복잡해 보일 수 있습니다.

하지만 기본 구조는 생각보다 단순합니다.

HTML 문서는 크게 문서 정보 영역과 화면에 보이는 영역으로 나눌 수 있습니다.

이번 글에서는 HTML 문서의 기본 구조를 초보자 기준으로 정리해보겠습니다.

이 글에서 다루는 내용

<!DOCTYPE html>의 역할
<html> 태그의 역할
<head> 태그의 역할
<body> 태그의 역할
<title> 태그의 역할

HTML 기본 구조

HTML 문서의 기본 형태는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>HTML 기본 구조</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>HTML 기본 구조를 배우는 중입니다.</p>
  </body>
</html>

처음에는 이 구조를 통째로 외우기보다, 각 영역이 어떤 역할을 하는지 이해하는 것이 중요합니다.

크게 보면 다음과 같습니다.

<!DOCTYPE html>  → HTML 문서 선언
<html>           → HTML 문서 전체
<head>           → 문서 정보
<body>           → 화면에 보이는 내용
</html>          → HTML 문서 끝

`<!DOCTYPE html>`

<!DOCTYPE html>

<!DOCTYPE html>은 이 문서가 HTML 문서라는 것을 브라우저에게 알려주는 코드입니다.

정확히 말하면 현재 문서가 HTML5 방식으로 작성되었다는 의미입니다.

HTML 문서의 가장 위에 작성합니다.

화면에 직접 보이는 내용은 아닙니다.

브라우저가 문서를 올바른 방식으로 해석하도록 도와주는 선언문입니다.

`<html>`

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

html 태그는 HTML 문서 전체를 감싸는 가장 큰 태그입니다.

쉽게 말하면 HTML 문서의 시작과 끝을 나타냅니다.

보통 다음처럼 lang 속성을 함께 작성합니다.

<html lang="ko">

lang="ko"는 이 문서의 기본 언어가 한국어라는 뜻입니다.

이 설정은 검색 엔진이나 화면 읽기 프로그램이 문서의 언어를 이해하는 데 도움이 됩니다.

`<head>`

<head>
  <meta charset="UTF-8" />
  <title>HTML 기본 구조</title>
</head>

head 태그 안에는 문서에 대한 정보가 들어갑니다.

여기서 중요한 점은 head 안의 내용은 대부분 브라우저 화면에 직접 보이지 않는다는 것입니다.

예를 들어 다음과 같은 정보들이 head 안에 들어갈 수 있습니다.

문자 인코딩 설정
브라우저 탭 제목
CSS 파일 연결
검색 엔진을 위한 설명
반응형 화면 설정

처음에는 head를 이렇게 이해하면 됩니다.

head = 웹페이지의 설정 정보가 들어가는 곳

`<title>`

<title>HTML 기본 구조</title>

title 태그는 브라우저 탭에 표시되는 제목을 정합니다.

예를 들어 위 코드처럼 작성하면 브라우저 탭에 다음과 같은 제목이 표시됩니다.

HTML 기본 구조

주의할 점은 title은 본문에 보이는 제목이 아니라는 것입니다.

본문에 보이는 큰 제목은 보통 h1 태그로 작성합니다.

<h1>HTML 기본 구조</h1>

차이를 정리하면 다음과 같습니다.

태그	보이는 위치	역할
`<title>`	브라우저 탭	문서 제목 설정
`<h1>`	웹페이지 본문	화면에 보이는 큰 제목

`<body>`

<body>
  <h1>안녕하세요</h1>
  <p>HTML 기본 구조를 배우는 중입니다.</p>
</body>

body 태그 안에는 실제 웹페이지 화면에 보이는 내용이 들어갑니다.

예를 들면 다음과 같은 요소들이 body 안에 작성됩니다.

제목
문단
이미지
링크
버튼
입력창
목록
표

처음 HTML을 공부할 때는 다음 기준을 기억하면 좋습니다.

화면에 보여주고 싶은 내용은 body 안에 작성한다.

head와 body 차이

HTML 기본 구조에서 가장 많이 헷갈리는 부분은 head와 body입니다.

둘의 차이는 간단합니다.

구분	역할	화면 표시 여부
`<head>`	문서 정보와 설정	대부분 보이지 않음
`<body>`	실제 화면 내용	보임

예를 들어 다음 코드를 보겠습니다.

<head>
  <title>내 웹페이지</title>
</head>
<body>
  <h1>안녕하세요</h1>
</body>

title은 브라우저 탭에 표시됩니다.

h1은 웹페이지 본문 화면에 표시됩니다.

즉, head는 설정 정보이고, body는 실제 내용입니다.

전체 구조 다시 보기

다시 한 번 전체 코드를 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>HTML 기본 구조를 연습하고 있습니다.</p>
  </body>
</html>

이 코드를 역할별로 나누면 다음과 같습니다.

코드	역할
`<!DOCTYPE html>`	HTML 문서라고 선언
`<html lang="ko">`	HTML 문서 전체 시작
`<head>`	문서 정보 영역
`<title>`	브라우저 탭 제목
`<body>`	화면에 보이는 내용 영역

초보자가 자주 하는 실수

`body` 밖에 화면 내용을 작성하는 경우

화면에 보여주고 싶은 내용은 body 안에 작성해야 합니다.

잘못된 예시는 다음과 같습니다.

<body>
</body>
<h1>안녕하세요</h1>

좋은 예시는 다음과 같습니다.

<body>
  <h1>안녕하세요</h1>
</body>

`title`과 `h1`을 헷갈리는 경우

title은 브라우저 탭 제목입니다.

h1은 웹페이지 본문에 보이는 큰 제목입니다.

<title>브라우저 탭 제목</title>
<h1>본문에 보이는 제목</h1>

둘 다 제목처럼 보이지만 위치와 역할이 다릅니다.

`<!DOCTYPE html>`을 빼먹는 경우

HTML 문서가 동작은 할 수 있지만, 기본 구조를 배울 때는 <!DOCTYPE html>을 작성하는 습관을 들이는 것이 좋습니다.

브라우저가 문서를 올바르게 해석하는 데 도움이 됩니다.

정리

HTML 문서의 기본 구조는 웹페이지를 만들 때 가장 먼저 알아야 하는 내용입니다.

처음에는 다음만 기억해도 충분합니다.

<!DOCTYPE html>은 HTML 문서 선언입니다.
<html>은 HTML 문서 전체를 감쌉니다.
<head>는 문서 정보와 설정을 담습니다.
<title>은 브라우저 탭 제목을 정합니다.
<body>는 실제 화면에 보이는 내용을 담습니다.

한 문장으로 정리하면 다음과 같습니다.

head는 웹페이지의 설정 정보, body는 사용자에게 보이는 실제 내용입니다.

이 차이를 이해하면 HTML 문서를 읽는 것이 훨씬 쉬워집니다.

HTML 기본 구조 한 번에 이해하기

이 글에서 다루는 내용

HTML 기본 구조

<!DOCTYPE html>

<html>

<head>

<title>

<body>