HTML 입문 문법

HTML 기본 문서 구조

HTML 기본 문서 구조 — 초급

HTML 기본 문서 구조

1. 도입 (왜 배워야 하는가)

HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 형성하는 언어입니다. 모든 웹사이트는 HTML로 작성된 기본 문서 구조를 필요로 합니다. 이 구조가 없다면, 웹 페이지는 제대로 표시되지 않거나, 사용자가 원하는 정보를 전달하지 못할 수 있습니다.

예를 들어, 쇼핑몰 웹사이트를 개발하는 경우, HTML 문서 구조가 제대로 설정되지 않으면 사용자에게 제품 정보가 혼란스럽게 표시되거나 아예 보이지 않을 수 있습니다. 따라서 HTML 기본 문서 구조를 이해하는 것은 웹 개발의 첫걸음이며, 이는 실무에서 필수적인 지식입니다.

2. 핵심 개념 설명

HTML 문서 구조는 크게 몇 가지 요소로 이루어져 있습니다:

요소	설명
`<!DOCTYPE html>`	문서 타입 선언. HTML5 문서임을 브라우저에 알려줍니다.
`<html>`	HTML 문서의 시작과 끝을 정의합니다.
`<head>`	문서의 메타 정보를 포함하며, 제목, 문자 인코딩 등을 설정합니다.
`<title>`	웹 페이지의 제목을 정의하며, 브라우저 탭에 표시됩니다.
`<body>`	실제 웹 페이지에 표시되는 콘텐츠를 포함합니다.

비유하자면, HTML 문서 구조는 집의 설계도와 같습니다. 집이 지어지기 전에 설계도가 필요하듯, 웹 페이지도 이 구조가 있어야만 올바르게 표시되고 기능할 수 있습니다.

3. 기본 코드 예제

기본적인 HTML 문서 구조는 다음과 같습니다:

<!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>안녕하세요, HTML!</h1>
    <p>이것은 나의 첫 번째 HTML 문서입니다.</p>
</body>
</html>

실행 결과:

웹 페이지에 "안녕하세요, HTML!"이라는 제목과 "이것은 나의 첫 번째 HTML 문서입니다."라는 문장이 표시됩니다.

코드 한 줄씩 동작 설명:

<!DOCTYPE html>: 이 문서가 HTML5로 작성되었음을 선언합니다.
<html lang="ko">: HTML 문서의 시작을 알리며, 언어를 한국어로 설정합니다.
<head>: 문서의 메타 정보를 포함하는 시작 태그입니다.
<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정하여 다양한 문자를 지원합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹 디자인을 위한 설정입니다.
<title>: 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
<body>: 웹 페이지의 본문 시작을 알립니다.
<h1>: 가장 큰 제목을 정의하며, "안녕하세요, HTML!"을 표시합니다.
<p>: 단락을 정의하며, "이것은 나의 첫 번째 HTML 문서입니다."를 표시합니다.
</body>: 본문의 끝을 알립니다.
</html>: HTML 문서의 끝을 알립니다.

4. 실전 활용 예제

블로그 포스트 작성: 블로그에서 글을 작성할 때, 제목과 본문을 HTML로 작성합니다. <h1>, <h2> 태그를 사용하여 구조화된 내용을 제공합니다.
정보 페이지 생성: 회사나 제품 정보를 제공하는 페이지를 만들 때, 다양한 섹션(<section>, <article>)으로 나누어 사용자에게 명확한 정보를 전달합니다.
쇼핑몰 장바구니 구현: 제품 목록을 보여주는 웹 페이지에서 각 제품의 이름, 가격 등을 <table>로 배열하여 쉽게 비교할 수 있도록 합니다.

5. 흔한 실수와 주의사항

DOCTYPE 누락:

- 잘못된 코드:

     <html>
     <head>
     <title>제목</title>
     </head>
     <body>
     ...

- 올바른 코드:

     <!DOCTYPE html>
     <html>
     <head>
     <title>제목</title>
     </head>
     <body>
     ...

<head>와 <body> 섹션 혼동:

- 잘못된 코드:

     <head>
     <h1>제목</h1>
     </head>

- 올바른 코드:

     <body>
     <h1>제목</h1>
     </body>

6. 정리

HTML 문서 구조는 웹 페이지의 기본 뼈대를 형성합니다.
<!DOCTYPE html>로 시작하여, <html>, <head>, <body> 등으로 구성됩니다.
웹 페이지의 제목은 <title> 태그로 정의합니다.
올바른 구조를 사용하지 않으면 웹 페이지가 제대로 표시되지 않을 수 있습니다.

다음에 학습하면 좋은 주제

HTML 태그의 종류와 사용법
CSS를 활용한 스타일링
JavaScript를 통한 동적 웹 페이지 만들기