HTML 문서의 기본 모양 익히기

먼저 완성된 모양을 봅니다

HTML 문서는 처음 보면 낯선 기호가 많습니다. 하지만 자세히 보면 늘 비슷한 틀을 가지고 있습니다. 편지에 봉투, 제목, 본문이 있듯이 HTML 문서에도 정해진 자리들이 있습니다.

이번 장에서는 아래 코드를 index.html 파일에 넣어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 소개 페이지</title>
  </head>
  <body>
    <h1>안녕하세요, 민지입니다</h1>
    <p>저는 주말마다 작은 베이킹 클래스를 엽니다.</p>
  </body>
</html>

복사해서 저장한 뒤 브라우저에서 새로고침해 보세요.

화면에는 다음 내용이 보일 것입니다.

• 큰 제목: 안녕하세요, 민지입니다

• 문단: 저는 주말마다 작은 베이킹 클래스를 엽니다.

그런데 코드 안에는 화면에 보이지 않는 줄도 있습니다. <!DOCTYPE html>, <html>, <head>, <title> 같은 부분입니다. 이 줄들은 화면에 글자로 나오지는 않지만, 브라우저가 문서를 바르게 이해하도록 돕습니다.

AI 생성 이미지

HTML 문서는 크게 네 부분으로 볼 수 있습니다

방금 본 코드는 크게 이렇게 나눌 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    문서에 대한 정보
  </head>
  <body>
    화면에 보이는 내용
  </body>
</html>

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

• <!DOCTYPE html>: 이 문서가 HTML 문서라는 안내문

• <html>: HTML 문서 전체를 감싸는 큰 상자

• <head>: 화면에 직접 보이지 않는 정보가 들어가는 곳

• <body>: 실제로 화면에 보이는 내용이 들어가는 곳

이 구조는 대부분의 HTML 문서에서 반복됩니다. 그래서 처음 보는 HTML 파일을 열었을 때도 "아, 위쪽에는 문서 정보가 있고, 아래쪽에는 화면 내용이 있구나" 하고 읽을 수 있습니다.

<!DOCTYPE html>은 브라우저에게 보내는 첫 안내입니다

맨 첫 줄에 있는 코드를 봅시다.

<!DOCTYPE html>

이 줄은 태그처럼 보이지만, 정확히는 브라우저에게 "이 문서는 최신 방식의 HTML 문서입니다"라고 알려 주는 선언입니다.

식당 입구에 "오늘 정상 영업합니다"라는 안내문이 붙어 있으면 손님이 안심하고 들어갈 수 있습니다. <!DOCTYPE html>도 비슷합니다. 브라우저가 문서를 해석하기 전에 어떤 방식으로 읽으면 되는지 알게 해 줍니다.

직접 화면에 나타나지는 않습니다. 하지만 HTML 문서의 첫 줄에 적어 두는 기본 안내라고 생각하면 됩니다.

<html>은 문서 전체를 감싸는 큰 상자입니다

다음은 <html>입니다.

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

<html>은 "여기부터 여기까지가 HTML 문서입니다"라고 표시하는 가장 큰 상자입니다. 문서 안의 거의 모든 내용은 이 안에 들어갑니다.

위 예시에는 lang="ko"가 붙어 있습니다.

<html lang="ko">

lang은 language, 즉 언어를 뜻합니다. ko는 한국어를 뜻합니다. 그래서 이 문장은 "이 문서의 기본 언어는 한국어입니다"라는 의미입니다.

이 정보는 화면에 크게 드러나지 않을 수 있습니다. 하지만 브라우저, 번역 도구, 화면 읽기 프로그램 같은 도구가 문서를 이해하는 데 도움이 됩니다. 지금은 "한국어 페이지라면 <html lang="ko">라고 쓰면 좋다" 정도로 알고 넘어가면 됩니다.

<head>에는 보이지 않는 정보가 들어갑니다

이제 <head> 부분을 보겠습니다.

<head>
  <meta charset="UTF-8">
  <title>나의 첫 소개 페이지</title>
</head>

head는 머리라는 뜻입니다. 웹페이지의 머리 부분이라고 해서 화면 맨 위에 보인다는 뜻은 아닙니다.

HTML에서 <head>는 문서에 대한 정보를 담는 곳입니다. 예를 들면 이런 정보가 들어갑니다.

• 이 문서의 제목은 무엇인지

• 글자를 어떤 방식으로 읽어야 하는지

• 검색엔진이나 브라우저가 참고할 정보는 무엇인지

• 나중에 CSS 파일을 연결할 때 필요한 정보

여기서 중요한 구분은 하나입니다.

<head> 안의 내용은 보통 화면 본문에 직접 보이지 않습니다.

예시의 이 줄을 봅시다.

<meta charset="UTF-8">

이 줄은 글자를 읽는 방식을 알려 줍니다. 한국어가 깨지지 않도록 돕는 기본 설정이라고 생각하면 됩니다. 이 줄도 화면에는 직접 보이지 않습니다.

처음에는 <head>를 "브라우저를 위한 메모장"처럼 생각해도 좋습니다. 방문자에게 바로 보여 줄 글은 아니지만, 브라우저가 페이지를 제대로 다루기 위해 참고하는 정보가 들어갑니다.

<title>은 브라우저 탭 이름이 됩니다

<head> 안에서 꼭 알아야 할 태그가 있습니다.

<title>나의 첫 소개 페이지</title>

title은 문서의 제목을 정합니다. 여기서 말하는 제목은 페이지 안에 크게 보이는 제목이 아닙니다. 브라우저 탭에 보이는 이름입니다.

예를 들어 위처럼 작성하면 브라우저 위쪽 탭에 나의 첫 소개 페이지라는 글자가 보일 수 있습니다.

한번 직접 바꿔 보세요.

<title>민지의 베이킹 클래스</title>

저장하고 브라우저를 새로고침하면, 화면 본문은 그대로인데 탭 이름이 바뀝니다.

이 차이를 꼭 느껴 보세요.

• <title>: 브라우저 탭에 보이는 문서 제목

• <h1>: 페이지 안에 크게 보이는 제목

두 태그 모두 "제목"과 관련이 있지만, 쓰이는 자리가 다릅니다.

title은 웹에 페이지를 올렸을 때 검색 결과의 제목에도 영향을 줄 수 있습니다. 검색엔진이 항상 그대로 보여 주는 것은 아니지만, 페이지가 어떤 내용을 담고 있는지 판단할 때 중요한 힌트로 사용됩니다.

그래서 title에는 너무 막연한 말보다 페이지 내용을 잘 나타내는 말을 쓰는 편이 좋습니다.

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

<title>민지의 베이킹 클래스 안내</title>

조금 아쉬운 예시는 다음과 같습니다.

<title>홈페이지</title>

홈페이지라고만 쓰면 어떤 홈페이지인지 알기 어렵습니다. 반면 민지의 베이킹 클래스 안내라고 쓰면 브라우저도, 방문자도 이 페이지의 성격을 더 쉽게 짐작할 수 있습니다.

<body>에는 실제 화면 내용이 들어갑니다

이제 방문자가 실제로 보는 영역입니다.

<body>
  <h1>안녕하세요, 민지입니다</h1>
  <p>저는 주말마다 작은 베이킹 클래스를 엽니다.</p>
</body>

body는 몸이라는 뜻입니다. HTML에서는 페이지의 본문을 담는 곳입니다.

브라우저 화면에 보여 주고 싶은 내용은 대부분 <body> 안에 씁니다.

예를 들면 다음과 같은 것들입니다.

• 소개 글

• 가게 주소

• 행사 안내 문구

• 이미지

• 링크

• 표

• 입력 양식

앞으로 배울 많은 태그는 대부분 <body> 안에서 사용하게 됩니다.

다음처럼 내용을 바꿔 보세요.

<body>
  <h1>토요일 플리마켓 안내</h1>
  <p>6월 27일 오후 1시부터 동네 공원에서 열립니다.</p>
</body>

저장하고 새로고침하면 화면의 제목과 문단이 바뀝니다. 반대로 <head> 안의 title만 바꾸면 화면 본문은 바뀌지 않습니다.

이렇게 구분하면 HTML 문서가 훨씬 덜 낯설어집니다.

들여쓰기는 사람을 위한 정리입니다

코드를 보면 줄 앞에 빈칸이 들어가 있습니다.

<html lang="ko">
  <head>
    <title>나의 첫 소개 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
  </body>
</html>

이렇게 안쪽에 있는 코드를 조금 밀어 쓰는 것을 들여쓰기라고 합니다.

중요한 점이 있습니다. HTML에서 들여쓰기는 대부분 컴퓨터보다 사람을 위한 정리입니다. 브라우저는 아래처럼 한 줄로 붙여 써도 어느 정도 읽을 수 있습니다.

<html><head><title>나의 첫 소개 페이지</title></head><body><h1>안녕하세요</h1></body></html>

하지만 사람은 읽기 어렵습니다. 어디서 시작하고 어디서 끝나는지 찾기 힘듭니다.

들여쓰기를 하면 포함 관계가 눈에 보입니다.

<html lang="ko">
  <head>
    <title>나의 첫 소개 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>반갑습니다.</p>
  </body>
</html>

위 코드를 보면 <head>와 <body>가 <html> 안에 들어 있다는 것을 쉽게 볼 수 있습니다. 또 <title>은 <head> 안에 있고, <h1>과 <p>는 <body> 안에 있다는 것도 보입니다.

들여쓰기는 책의 목차처럼 코드를 보기 좋게 정리해 줍니다. 브라우저를 위한 기능이라기보다, 내가 나중에 다시 읽기 위한 표시입니다.

처음에는 완벽하게 맞추려고 애쓰지 않아도 됩니다. 다만 "안에 들어간 것은 조금 오른쪽으로 밀어 쓴다"는 느낌만 익히면 충분합니다.

직접 한 줄씩 바꿔 보기

이제 전체 코드를 다시 봅니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 소개 페이지</title>
  </head>
  <body>
    <h1>안녕하세요, 민지입니다</h1>
    <p>저는 주말마다 작은 베이킹 클래스를 엽니다.</p>
  </body>
</html>

아래 순서대로 바꿔 보세요.

1. <title> 안의 글자를 우리 가게 안내로 바꿉니다.

2. 저장하고 새로고침합니다.

3. 브라우저 탭 이름이 바뀌었는지 봅니다.

4. <h1> 안의 글자를 달빛 문구점으로 바꿉니다.

5. <p> 안의 글자를 평일 오전 10시부터 오후 7시까지 운영합니다.로 바꿉니다.

6. 저장하고 새로고침합니다.

7. 화면 본문이 바뀌었는지 봅니다.

완성 코드는 이런 모습이 됩니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>우리 가게 안내</title>
  </head>
  <body>
    <h1>달빛 문구점</h1>
    <p>평일 오전 10시부터 오후 7시까지 운영합니다.</p>
  </body>
</html>

여기서 가장 중요한 경험은 이것입니다.

head를 바꾸면 주로 문서 정보가 바뀝니다.
body를 바꾸면 주로 화면에 보이는 내용이 바뀝니다.

이 구분만 잡혀도 HTML 문서를 읽는 눈이 생기기 시작합니다.

이번 장의 핵심 정리

HTML 문서는 아무렇게나 생긴 암호가 아닙니다. 일정한 기본 모양을 가진 문서입니다.

• <!DOCTYPE html>은 브라우저에게 HTML 문서라고 알려 주는 첫 안내입니다.

• <html>은 문서 전체를 감싸는 큰 상자입니다.

• <head>에는 화면에 직접 보이지 않는 문서 정보가 들어갑니다.

• <body>에는 방문자에게 실제로 보여 줄 내용이 들어갑니다.

• <title>은 브라우저 탭 이름이 되며, 검색 결과 제목에도 영향을 줄 수 있습니다.

• 들여쓰기는 컴퓨터보다 사람이 코드를 읽기 쉽게 만드는 정리 도구입니다.

다음에 HTML 코드를 보게 되면 먼저 <head>와 <body>를 찾아보세요. 그러면 낯선 코드 덩어리가 아니라, 정보 영역과 본문 영역으로 나뉜 문서처럼 보이기 시작합니다.