2. 내 첫 페이지 만들기: HTML 문서의 기본 구조

웹페이지도 집처럼 뼈대가 먼저입니다. 벽지 색을 고르기 전에 기둥부터 세우듯, HTML도 내용을 멋지게 꾸미기 전에 기본 구조를 먼저 잡아야 합니다. 이 구조를 익히면 처음 보는 HTML 파일도 훨씬 덜 낯설어집니다.¹

이번 장에서는 딱 다섯 가지를 확실히 익힙니다. <!DOCTYPE html>, <html>, <head>, <title>, <body>입니다. 이 다섯 친구만 제대로 알아도 여러분은 이미 "아무것도 모르는 초보자" 단계를 벗어난 셈입니다.

HTML 문서의 기본 뼈대

가장 기본적인 HTML 문서는 아래처럼 생겼습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>내 첫 페이지</title>
  </head>
  <body>
    안녕하세요! 제 첫 웹페이지입니다.
  </body>
</html>

처음 보면 꺾쇠 괄호가 많아서 복잡해 보이지만, 사실은 역할이 아주 분명합니다. 맨 위에서 문서 형식을 알리고, 그 아래에서 문서 전체를 감싼 뒤, 보이지 않는 정보는 head에 넣고, 실제로 보이는 내용은 body에 넣는 구조입니다.²

한 문장으로 줄이면 이렇습니다.

HTML 문서는 "문서 선언 + 전체 껍데기 + 문서 정보 + 화면 본문"으로 이루어진다.

<!DOCTYPE html>: 브라우저에게 보내는 첫인사

HTML 파일의 맨 첫 줄에는 보통 이 코드가 옵니다.

<!DOCTYPE html>

이 코드는 일반 태그가 아니라 문서 형식 선언입니다. 브라우저에게 "이 문서는 HTML5 방식으로 읽어 주세요"라고 알려주는 역할을 합니다.³ 초보자에게는 이유를 깊게 파고드는 것보다, HTML 파일의 첫 줄은 거의 항상 이 선언이라고 기억하는 편이 더 중요합니다.

이 선언이 맨 위에 있어야 브라우저가 표준 방식으로 문서를 해석하는 데 도움이 됩니다.¹ 쉽게 말하면, 웹페이지가 입장하면서 "안녕하세요, 저는 HTML 문서입니다"라고 자기소개를 하는 셈입니다.

<html>: 문서 전체를 감싸는 가장 큰 상자

그다음은 <html> 태그입니다.

<html lang="ko">

이 태그는 HTML 문서의 루트 요소입니다. 어렵게 들리지만 뜻은 단순합니다. <!DOCTYPE html>을 제외한 나머지 모든 내용을 감싸는 가장 바깥 상자라는 뜻입니다.²

여기서 함께 보이는 lang="ko"는 문서의 기본 언어가 한국어라는 의미입니다. 이 정보는 스크린 리더, 검색 엔진, 번역 도구가 페이지를 이해하는 데 도움을 줍니다.¹

한국어 페이지는 보통 이렇게 씁니다.

<html lang="ko">

영어 페이지라면 이렇게 쓸 수 있습니다.

<html lang="en">

눈에 바로 보이는 변화는 없지만, 문서를 더 바르게 만드는 좋은 습관입니다.

<head>: 화면에는 안 보이지만 중요한 공간

<head>는 많은 초보자가 이름 때문에 헷갈리는 부분입니다. "head면 페이지 맨 위에 보이는 제목이 들어가나?" 하고 생각하기 쉽지만, 실제로는 그렇지 않습니다. head는 브라우저와 검색 엔진이 읽는 정보를 넣는 곳입니다.⁴

예를 들어 이런 것들이 들어갈 수 있습니다.

• 문서 제목

• 문자 인코딩 정보

• 모바일 화면 설정

• CSS 파일 연결

• JavaScript 파일 연결

하지만 이번 장에서는 가장 기본인 <title>만 먼저 익히면 충분합니다.

<head>
  <title>내 첫 페이지</title>
</head>

중요한 점은, head 안의 내용은 보통 웹페이지 본문에 그대로 보이지 않는다는 것입니다.⁴ 그래서 사람이 읽을 본문 내용은 여기 넣지 않습니다.

예를 들어 아래 코드는 잘못된 예입니다.

<head>
  <title>실수 예시</title>
  <h1>안녕하세요!</h1>
</head>

<h1>은 화면에 보여야 하는 내용이므로 body 안으로 가야 합니다.

<title>: 브라우저 탭에 붙는 이름표

<title>은 head 안에 들어가며, 문서의 제목을 정합니다.

<title>내 첫 페이지</title>

이 안의 글자는 브라우저 탭에 표시되고, 검색 결과 제목으로도 활용될 수 있습니다.¹ 그래서 title은 생각보다 꽤 중요합니다.

예를 들어 탭 여러 개를 열어 둔 상태를 떠올려 보세요. 제목이 모두 test, 새 문서, 연습이라면 어느 탭이 어느 페이지인지 찾기 꽤 괴롭습니다. 반대로 민지의 첫 페이지, 고양이 소개, 여행 메모처럼 쓰면 한눈에 알아볼 수 있습니다.

좋은 title은 길게 뽐내는 제목보다, 이 페이지가 무엇인지 분명하게 알려 주는 제목입니다.

<body>: 실제로 눈에 보이는 본문

이제 진짜 무대가 나옵니다.

<body>
  안녕하세요! 제 첫 웹페이지입니다.
</body>

<body>는 사용자가 실제로 보는 모든 내용이 들어가는 공간입니다.² 글자, 제목, 문단, 이미지, 링크, 목록, 표, 버튼이 앞으로 거의 다 여기 들어갑니다.

예를 들어 이렇게 쓰면,

<body>
  <h1>환영합니다!</h1>
  <p>이 페이지는 제가 처음 만든 HTML 문서입니다.</p>
</body>

화면에는 제목과 문단이 나타납니다. 즉, 보이는 건 body, 보이지 않는 문서 정보는 head라고 구분하면 됩니다.

직접 따라 쓰는 첫 번째 HTML 파일

이제 정말로 직접 만들어 봅시다. 새 파일을 만들고 index.html이라는 이름으로 저장한 뒤, 아래 코드를 입력해 보세요.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>민지의 첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>저는 HTML을 배우는 중입니다.</p>
  </body>
</html>

브라우저에서 열면 화면에는 안녕하세요!와 문단이 보이고, 탭에는 민지의 첫 페이지가 보일 것입니다. 바로 이 순간이 중요합니다. title의 글자는 본문에 보이지 않고, body의 글자는 화면에 보입니다. 이 차이를 직접 보는 순간 구조가 머릿속에 딱 들어옵니다.

실무에서 자주 함께 쓰는 두 줄

이번 장의 목표는 다섯 태그이지만, 실제 HTML 문서에서는 head 안에 아래 두 줄이 자주 함께 들어갑니다.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

첫 번째 줄은 문자 인코딩을 UTF-8로 지정해서 한글을 포함한 다양한 문자가 깨지지 않도록 도와줍니다. 두 번째 줄은 모바일 화면에서 페이지가 자연스럽게 보이도록 도와줍니다.¹

그래서 조금 더 자주 보는 기본 뼈대는 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>저는 HTML을 배우는 중입니다.</p>
  </body>
</html>

이제 여러분은 HTML 문서의 가장 기본적인 구조를 이해했습니다. 다음 장에서는 이 구조 위에 제목, 문단, 링크를 하나씩 올려 보겠습니다.