HTML을 처음 배울 때는 태그를 많이 외우는 것보다 파일 하나를 만들고 브라우저에서 직접 확인하는 경험이 먼저 필요합니다. 코드가 화면으로 바뀌는 과정을 한 번 확인하면 head, body, title의 역할도 훨씬 쉽게 구분할 수 있습니다.

이 글에서는 개발 환경 준비, 첫 문서 작성, 실행 결과 확인, 자주 발생하는 오류 해결을 하나의 흐름으로 진행합니다.

먼저 만들 결과

완성할 페이지는 거북이 관찰 기록을 남기는 간단한 문서입니다. 브라우저 탭에는 나의 첫 HTML 문서가 표시되고, 화면에는 제목과 문단이 나타납니다.

브라우저 탭: 나의 첫 HTML 문서

화면:
거북이 관찰 기록
오늘은 바스킹존에서 쉬는 모습을 관찰했습니다.

이 결과를 만들면서 HTML 문서의 기본 구조와 브라우저의 해석 방식을 함께 확인합니다.

준비할 도구

처음에는 아래 두 가지만 있으면 충분합니다.

  • 코드 편집기: Visual Studio Code
  • 결과를 확인할 브라우저: Chrome, Edge, Firefox, Safari 중 하나

HTML 파일은 브라우저에서 바로 열 수 있습니다. 자동 새로고침이 필요하면 VS Code의 Live Preview 같은 로컬 서버 확장을 추가로 사용할 수 있습니다.

로컬 서버는 처음부터 반드시 필요한 도구는 아닙니다. 기본 문서는 파일을 직접 열어도 확인할 수 있고, 일부 기능을 실습할 때 로컬 서버가 필요합니다.

작업 폴더와 파일 만들기

먼저 연습 파일을 따로 관리할 폴더를 만듭니다.

first-html/
└── index.html

VS Code에서 first-html 폴더를 연 뒤 index.html 파일을 만듭니다. 웹사이트의 첫 화면 파일 이름으로 index.html을 자주 사용하지만, HTML 문법이 이 이름만 허용하는 것은 아닙니다.

파일 이름을 만들 때는 확장자를 꼭 확인합니다.

올바른 이름: index.html
잘못된 이름: index.html.txt

첫 HTML 문서 작성하기

index.html에 아래 코드를 입력하고 저장합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>나의 첫 HTML 문서</title>
  </head>
  <body>
    <main>
      <h1>거북이 관찰 기록</h1>
      <p>오늘은 바스킹존에서 쉬는 모습을 관찰했습니다.</p>
    </main>
  </body>
</html>

처음에는 코드를 통째로 외우지 않아도 됩니다. 화면에 보이는 내용과 문서 설정이 어디에 나뉘어 있는지만 먼저 확인합니다.

문서 구조를 한 번에 읽기

<!doctype html>

<!doctype html>

문서가 현대 HTML 문법을 사용한다는 사실을 브라우저에 알립니다. HTML 문서 가장 위에 작성합니다.

<html lang="ko">

<html lang="ko">

html은 문서 전체를 감싸는 최상위 요소입니다. lang="ko"는 문서의 기본 언어가 한국어라는 뜻이며, 화면 읽기 프로그램과 검색엔진이 문서를 이해하는 데 도움을 줍니다.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>나의 첫 HTML 문서</title>
</head>

head에는 문서의 설정과 메타데이터가 들어갑니다. charset은 문자 인코딩을, viewport는 모바일 화면의 크기 계산 방식을, title은 브라우저 탭 제목을 정합니다.

<body>

<body>
  <main>
    <h1>거북이 관찰 기록</h1>
    <p>오늘은 바스킹존에서 쉬는 모습을 관찰했습니다.</p>
  </main>
</body>

body에는 사용자가 실제 화면에서 읽고 조작할 내용이 들어갑니다. 이 예제에서는 main이 핵심 내용을 묶고, h1이 문서 제목, p가 문단을 나타냅니다.

구조를 짧게 정리하면 다음과 같습니다.

html
├── head: 문서 설정과 정보
└── body: 화면에 표시할 내용

브라우저에서 실행하고 결과 확인하기

파일을 저장한 뒤 Finder 또는 파일 탐색기에서 index.html을 더블 클릭합니다. 브라우저 주소창에는 운영 사이트 주소가 아니라 로컬 파일 경로가 표시될 수 있습니다.

file:///.../first-html/index.html

다음 두 곳을 따로 확인합니다.

  • 브라우저 탭: <title>에 작성한 나의 첫 HTML 문서
  • 페이지 화면: <body> 안에 작성한 제목과 문단

title과 h1은 모두 제목처럼 보이지만 위치와 역할이 다릅니다. 이 차이를 직접 확인하면 head와 body를 섞어 쓰는 실수를 줄일 수 있습니다.

코드를 바꿔 브라우저 반응 확인하기

문단을 아래처럼 수정합니다.

<p>오후에는 은신처로 이동한 것도 확인했습니다.</p>

파일을 저장하고 브라우저를 새로고침합니다. 화면의 문단만 바뀌고 브라우저 탭 제목은 그대로라면 수정한 위치를 제대로 이해한 것입니다.

Live Preview 같은 확장을 사용한다면 저장할 때 화면이 자동으로 갱신될 수 있습니다. 자동 갱신이 되지 않아도 오류는 아니며, 직접 새로고침하면 됩니다.

일부러 오류를 만들어 확인하기

정상 코드만 보는 것보다 작은 오류를 만들어 증상을 확인하면 원인을 더 빨리 찾을 수 있습니다.

저장하지 않아 화면이 바뀌지 않는 경우

코드를 수정한 뒤 저장하지 않고 브라우저를 새로고침하면 이전 내용이 그대로 보입니다. 화면이 바뀌지 않을 때는 먼저 VS Code 탭의 저장되지 않음 표시를 확인합니다.

1. 파일 저장
2. 브라우저 새로고침
3. 열어둔 파일 경로 확인

파일 확장자가 .txt인 경우

운영체제에서 확장자를 숨기면 index.html.txt가 index.html처럼 보일 수 있습니다. 브라우저가 HTML 문서로 열지 않거나 코드가 일반 텍스트처럼 보인다면 실제 파일 이름을 확인합니다.

한글이 깨지는 경우

head에서 문자 인코딩 선언을 빼고 저장 환경이 다르면 한글이 깨질 수 있습니다. 문서 앞부분에 UTF-8 선언을 두고, 편집기 파일 인코딩도 UTF-8인지 확인합니다.

<meta charset="UTF-8" />

잘못된 위치에 작성했는데도 화면이 보이는 경우

아래 코드는 h1이 body 밖에 있으므로 올바른 구조가 아닙니다.

<body>
  <p>본문입니다.</p>
</body>
<h1>잘못된 위치의 제목</h1>

브라우저는 일부 잘못된 구조를 자동으로 보정하기 때문에 제목이 화면에 나타날 수 있습니다. 화면에 보인다는 사실만으로 올바른 HTML이라고 판단하면 안 됩니다.

브라우저가 해석한 구조 확인하기

브라우저 개발자 도구의 Elements 또는 요소 탭을 열면 브라우저가 만든 DOM 구조를 확인할 수 있습니다. 소스 코드가 잘못 중첩되어 있으면 브라우저가 요소 위치를 옮기거나 빠진 구조를 보완한 모습이 보일 수 있습니다.

확인 순서는 다음과 같습니다.

페이지에서 마우스 오른쪽 클릭
→ 검사 또는 Inspect 선택
→ Elements 탭에서 html, head, body 구조 확인

소스 코드 자체의 문법은 Nu HTML Checker 같은 검사 도구로 한 번 더 확인할 수 있습니다. 브라우저 보정 결과와 작성한 코드의 적합성을 구분하는 데 도움이 됩니다.

HTML을 처음 배울 때 기억할 특징

태그 이름은 소문자로 작성합니다

HTML 태그 이름은 일반적인 HTML 문서에서 대소문자를 엄격하게 구분하지 않는 경우가 많습니다. 그래도 코드를 일관되게 읽고 다른 도구와 함께 사용하기 위해 소문자로 작성하는 습관을 들이는 편이 좋습니다.

<h1>소문자로 작성한 제목</h1>

일반 공백은 하나로 합쳐집니다

HTML 소스에 일반 공백과 줄바꿈을 여러 번 넣어도 화면에서는 하나의 공백처럼 처리되는 경우가 많습니다. 간격을 만들기 위해 공백을 반복하기보다 문서 구조는 HTML로, 시각적 간격은 CSS로 처리합니다.

태그의 의미를 먼저 생각합니다

h1은 큰 글자를 만드는 도구이기 전에 문서의 핵심 제목을 나타냅니다. p는 문단, main은 페이지의 주요 내용을 나타냅니다.

처음부터 모든 태그를 외울 필요는 없습니다. 화면 모양만 보고 태그를 고르기보다, 이 내용이 문서에서 어떤 역할인지 먼저 생각합니다.

정리

첫 HTML 문서를 만들 때 필요한 흐름은 복잡하지 않습니다.

  • 작업 폴더에 index.html을 만듭니다.
  • head에는 문서 설정을, body에는 화면 내용을 작성합니다.
  • 저장한 파일을 브라우저에서 열어 탭 제목과 본문을 따로 확인합니다.
  • 화면이 이상하면 저장 여부, 확장자, 인코딩, 요소 위치를 차례대로 확인합니다.
  • 브라우저가 오류를 보정할 수 있으므로 개발자 도구와 검사기로 구조를 확인합니다.

이 과정을 직접 반복하면 HTML은 외워야 하는 문법 목록이 아니라, 브라우저가 읽을 수 있게 문서 구조를 표시하는 언어로 보이기 시작합니다.

참고자료