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안에 제목과 문단이 남아 있는지 살펴봅니다.
로컬 HTML 파일을 여는 방법은 MDN의 파일 다루기 안내에서도 확인할 수 있습니다.
다음에 읽을 글
문서의 큰 틀을 이해했다면 HTML 요소·태그·속성·주석을 설명한 문법 강좌에서 각 요소를 쓰는 방법을 이어서 살펴보세요.
HTML 목록은 순서가 중요하면 ol, 중요하지 않으면 ul, 이름과 값의 관계는 dl로 작성합니다. li·dt·dd 구조, start·value·reversed 속성, 중첩 목록과 CSS 마커 설정 방법을 예제로 설명합니다.
표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있습니다.
링크(link)는 a 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다. href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리됩니다.
HTML / Tutorial / 양식에 안내 문구 추가하는 방법
input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. 만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.
HTML h1~h6 제목 태그와 p 문단 태그의 역할 및 올바른 구조를 예제로 설명합니다. 제목 단계 구성, br 줄바꿈과 자주 발생하는 작성 오류도 함께 확인할 수 있습니다.
HTML 강좌 / HTML의 개념과 웹페이지에서 하는 역할
HTML은 웹페이지의 콘텐츠에 구조와 의미를 부여합니다. HTML·CSS·JavaScript의 역할을 비교하고, 간단한 코드가 브라우저에 표시되는 과정과 첫 HTML 파일을 만드는 방법을 알아봅니다.
HTML 문서를 이루는 doctype, html, head, body의 역할과 기본 작성 순서를 예제로 설명합니다. 문서 정보와 페이지 본문을 구분하고 첫 HTML 파일을 직접 만들어 볼 수 있습니다.
HTML 요소·태그·속성·주석의 기본 문법을 예제로 설명합니다. 빈 요소, 속성값 따옴표, 태그 중첩에서 주의할 점과 문법 확인 방법도 다룹니다.
HTML / Tutorial / 연속된 공백 넣는 방법
HTML에서 연속된 공백은 하나의 공백으로 처리합니다. 소스 코드에서 여러 칸을 띄어써도 브라우저에서는 한 칸을 띄어쓴 것으로 표현됩니다. 연속된 공백을 넣고 싶다면 특수 문자 를 사용합니다.