첫 HTML 문서 만들기

웹 페이지는 글과 이미지 같은 콘텐츠가 어떤 구조로 이루어져 있는지 브라우저에 알려 주어야 합니다. HTML은 이 구조를 표현하는 마크업 언어입니다. 이 강의에서는 작은 HTML 문서를 만들고, 각 부분이 어떤 역할을 하는지 살펴봅니다.

첫 HTML 문서

다음 코드를 텍스트 편집기에 입력합니다. 예제 환경은 Chromium 브라우저이며, 별도의 라이브러리나 인터넷 연결은 필요하지 않습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 첫 HTML 문서</title>
</head>
<body>
  <h1>첫 웹 페이지</h1>
  <p>안녕하세요, HTML!</p>
</body>
</html>

이 문서에는 사용자가 입력할 값이 없습니다. 브라우저에서 열면 페이지에 제목 첫 웹 페이지와 그 아래 인사말 안녕하세요, HTML!이 표시될 것으로 예상합니다. 브라우저 탭에는 페이지 본문의 제목과 별도로 나의 첫 HTML 문서가 표시됩니다.

태그와 요소 읽기

<p>는 시작 태그, </p>는 종료 태그입니다. 종료 태그에는 이름 앞에 /가 있습니다. 두 태그와 그 사이의 내용이 함께 문단 요소를 이룹니다. h1은 페이지의 주제목을 나타내는 요소입니다. 제목과 문단을 더 자세히 다루는 방법은 다음 강의에서 살펴봅니다.

요소는 다른 요소를 포함할 수 있습니다. 예제에서 body 요소 안에는 h1과 p 요소가 있고, head와 body는 모두 html 요소 안에 있습니다. 들여쓰기는 브라우저에 구조를 명령하기보다 사람이 포함 관계를 읽기 쉽게 합니다.

시작 태그에 추가하는 lang="ko" 같은 정보는 속성이라고 합니다. lang은 문서의 주된 언어가 한국어임을 나타내며, 화면 낭독기 등이 언어를 판단하는 데 도움을 줍니다. 모든 요소가 종료 태그를 갖는 것은 아닙니다. 예제의 meta는 내용과 종료 태그가 없는 빈 요소입니다.

문서의 기본 구조

• <!DOCTYPE html>은 문서 맨 앞에 쓰는 선언입니다. HTML 요소나 태그가 아니며, 브라우저가 표준 모드로 문서를 처리하도록 합니다.
• <html lang="ko">는 문서 전체를 감싸는 루트 요소의 시작 태그입니다.
• head에는 문서에 관한 정보가 들어갑니다. <meta charset="UTF-8">은 문자 인코딩을 UTF-8로 선언하고, title은 브라우저 탭 등에 표시할 문서 제목을 지정합니다.
• body에는 페이지 본문에 표시할 콘텐츠를 넣습니다. 브라우저가 h1과 p를 각각 제목과 문단으로 해석하므로 예상 결과처럼 구분되어 표시됩니다. 기본 글꼴과 여백은 브라우저 설정에 따라 다를 수 있습니다.

저장하고 브라우저에서 열기

1. 텍스트 편집기에 예제 전체를 입력합니다.
2. 파일 이름을 index.html로 정하고 인코딩을 UTF-8로 선택해 저장합니다. 편집기에 파일 형식 선택 항목이 있다면 .txt가 뒤에 덧붙지 않도록 확인합니다.
3. 저장한 파일을 Chromium에서 엽니다. 파일을 브라우저 창에 끌어다 놓거나 브라우저의 파일 열기 기능을 사용할 수 있습니다.
4. 내용을 수정했다면 다시 저장한 뒤 브라우저에서 새로고침합니다.

한글이 깨진다면 파일을 실제로 UTF-8로 저장했는지와 meta의 인코딩 선언이 맞는지 확인하세요. 선언만 바꾸면 이미 다른 인코딩으로 저장된 파일이 자동으로 변환되지는 않습니다. 페이지에 HTML 코드가 글자 그대로 보이면 파일 확장자가 실제로 .html인지 확인합니다.

브라우저는 일부 빠진 태그를 보정해 보여 줄 수 있지만, 그 결과에 기대기보다 예제처럼 구조와 종료 태그를 명확히 작성하는 편이 좋습니다. 특히 포함 관계가 어긋나지 않도록 먼저 연 요소를 나중에 닫으세요. title의 내용은 본문의 화면 제목이 아니므로 페이지에 보일 글은 body에 작성합니다.

작은 연습

예제에서 브라우저 탭의 제목만 HTML 연습으로 바꾸려면 어느 부분을 수정해야 할까요? 페이지의 제목과 인사말은 그대로 둡니다.

풀이: head 안의 <title>나의 첫 HTML 문서</title>을 <title>HTML 연습</title>으로 바꿉니다. 저장하고 새로고침하면 탭 제목이 바뀔 것으로 예상합니다. body 안의 h1과 p는 수정하지 않았으므로 페이지에 표시되는 글은 그대로입니다.