HTML 강좌 / HTML 문서의 기본 구조

HTML 강좌

HTML 문서의 기본 구조는 <!doctype html> 선언과 그 뒤를 잇는 html 요소로 이루어집니다. html 안의 head에는 문서 정보가, body에는 페이지의 주요 콘텐츠가 들어갑니다. 아래 예제를 그대로 저장하면 브라우저에서 열 수 있는 HTML 파일이 됩니다.

HTML 문서의 기본 형태

다음 코드를 먼저 전체적으로 살펴보세요. 가장 바깥의 html 요소가 head와 body를 감싸고 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>첫 HTML 문서</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>문서의 본문입니다.</p>
  </body>
</html>

들여쓰기는 어느 요소가 다른 요소 안에 있는지 읽기 쉽게 보여줍니다. 브라우저는 태그를 해석해 문서 구조를 만들며, 화면에는 주로 body 안의 제목과 문단이 표시됩니다.

각 부분은 무슨 역할을 하나요?

<!doctype html>: 이 문서가 HTML 문서임을 알리는 선언입니다. HTML 요소가 아니며, 문서 맨 앞에 두어 브라우저가 표준에 맞는 렌더링 모드를 사용하도록 합니다.
<html lang="ko">: 문서 전체의 뿌리 요소입니다. lang="ko"는 문서의 주 언어가 한국어임을 나타내며, 화면 읽기 도구 등이 언어를 판단하는 데 도움이 됩니다.
<head>: 문서 제목, 문자 인코딩, 화면 크기 설정 같은 문서 정보를 담습니다. 이 안의 내용이 모두 페이지 본문에 그대로 표시되는 것은 아닙니다.
<body>: 제목, 문단, 이미지, 링크처럼 페이지를 이루는 주요 콘텐츠를 담습니다.

HTML 표준은 일부 시작·종료 태그의 생략을 허용하지만, 처음 배울 때는 위 예제처럼 html, head, body를 명시하면 구조를 파악하기 쉽습니다. 문서의 뼈대와 각 요소의 정의는 WHATWG HTML 표준의 문서 구조 설명에서 확인할 수 있습니다.

head 안의 세 가지 설정

예제의 head에는 처음 만드는 문서에서 알아두면 좋은 항목 세 가지가 있습니다.

meta charset="utf-8": 문서의 문자 인코딩을 UTF-8로 선언합니다. 파일도 UTF-8로 저장해야 한글이 올바르게 표시됩니다. 인코딩 선언은 문서 앞부분에 배치합니다.
meta name="viewport": 모바일 브라우저에서 레이아웃 뷰포트의 너비를 기기 너비에 맞춥니다. 이 태그만으로 디자인이 자동으로 반응형이 되는 것은 아닙니다.
title: 문서의 제목을 지정합니다. 브라우저 탭 등에 쓰이며, body 안의 h1처럼 페이지 본문에 표시되는 제목과는 역할이 다릅니다.

특히 title과 h1을 구분하세요. 위 예제에서 브라우저 탭의 제목은 ‘첫 HTML 문서’이고, 페이지 안에 보이는 큰 제목은 ‘안녕하세요’입니다.

HTML 파일로 저장하고 브라우저에서 확인하기

앞의 코드 블록을 실제 파일로 저장해 결과를 확인해 보세요. 텍스트 편집기와 웹 브라우저만 있으면 되며, 서식 있는 문서가 아닌 일반 텍스트 파일로 저장해야 합니다.

작업할 폴더를 만들고 텍스트 편집기에서 새 파일을 엽니다. 첫 번째 코드 블록 전체를 붙여 넣습니다.
파일을 index.html이라는 이름으로 작업 폴더에 저장합니다. 문자 인코딩을 선택할 수 있다면 UTF-8을 사용합니다. index.html은 첫 페이지에 흔히 쓰이는 이름이지만, 이 실습에서는 다른 이름에 .html 확장자를 붙여도 됩니다.
파일 관리자에서 index.html을 더블클릭합니다. 다른 프로그램이 열린다면 ‘연결 프로그램’ 메뉴에서 웹 브라우저를 선택하거나 파일을 브라우저 창으로 끌어다 놓습니다.
브라우저 탭에 ‘첫 HTML 문서’가, 페이지에는 ‘안녕하세요’와 ‘문서의 본문입니다.’가 표시되는지 확인합니다. 주소 표시줄에는 로컬 파일을 뜻하는 file:// 주소가 보입니다.
편집기에서 title과 h1의 내용을 각각 바꾸고 파일을 저장한 뒤 브라우저를 새로고침합니다. 탭 제목과 페이지 안의 제목이 어떻게 달라지는지 확인합니다.

이 단계는 내 컴퓨터에 있는 파일을 여는 것입니다. file:// 주소만 다른 사람에게 보내도 그 사람의 컴퓨터에서 내 파일을 볼 수는 없습니다. 웹에서 공유하려면 파일을 웹 서버나 호스팅 서비스에 별도로 올려야 합니다.

예상한 화면이 나오지 않을 때

태그가 글자 그대로 보일 때: 실제 파일 이름이 index.html.txt처럼 .txt로 끝나는지 확인합니다. 일부 편집기는 텍스트 문서 형식으로 저장하면 확장자를 자동으로 붙입니다. 저장 대화상자에서 파일 형식을 ‘모든 파일’ 또는 이에 해당하는 항목으로 바꿔 index.html로 저장하고, 파일 관리자에서도 확장자를 표시해 확인하세요.
수정한 내용이 반영되지 않을 때: 편집기에서 저장했는지 확인하고 브라우저를 새로고침합니다. 같은 이름의 파일이 여러 폴더에 있다면 브라우저 주소와 저장 위치도 비교하세요.
한글이 깨질 때: 파일을 UTF-8로 저장했는지, 문서의 <meta charset="utf-8"> 선언이 있는지 함께 확인합니다.
화면이 비어 있을 때: 올바른 파일을 열었는지 확인하고, 편집기에서 body 안에 제목과 문단이 남아 있는지 살펴봅니다.