HTML 기본 구조

이번 강에서 배울 것

DOCTYPE 선언과 그 이유
html, head, body 세 구역의 역할
태그(tag), 요소(element), 속성(attribute) 개념 구분
meta 태그 — charset, viewport, description
VS Code Emmet으로 HTML 뼈대 1초 만에 생성

1. HTML 파일의 뼈대 전체 구조

모든 HTML 파일은 다음 구조를 기본으로 합니다. 한 줄씩 의미를 살펴봅시다.

<!DOCTYPE html>                    ← ① DOCTYPE 선언
<html lang="ko">                   ← ② html 요소 (언어 속성)
  <head>                           ← ③ head 영역 시작
    <meta charset="UTF-8">         ← ④ 문자 인코딩
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">  ← ⑤ 모바일 대응
    <title>페이지 제목</title>      ← ⑥ 브라우저 탭 제목
    <link rel="stylesheet" href="style.css">  ← ⑦ CSS 파일 연결
  </head>
  <body>                           ← ⑧ body 영역 — 화면에 보이는 모든 것
    <h1>안녕하세요</h1>
    <p>본문 내용이 여기에 들어갑니다.</p>
  </body>
</html>

2. 각 부분 상세 설명

① DOCTYPE 선언

<!DOCTYPE html>은 "이 파일은 HTML5 문서입니다"라고 브라우저에 알리는 선언입니다. 태그가 아니라 지시문(instruction)입니다. 이것이 없으면 브라우저가 Quirks Mode(구형 호환 모드)로 동작해 예상치 못한 레이아웃 오류가 생깁니다. 반드시 맨 첫 줄에 써야 합니다.

② <html lang="ko">

전체 문서를 감싸는 루트(root) 요소입니다. lang="ko" 속성은 이 페이지의 기본 언어가 한국어임을 선언합니다. 검색 엔진과 스크린리더(시각 장애인 보조 도구)가 이 정보를 활용합니다.

③ <head> — 보이지 않는 메타 정보

head 안의 내용은 화면에 표시되지 않습니다. 브라우저와 검색 엔진을 위한 정보(메타데이터)가 들어갑니다.

태그	역할
`<meta charset="UTF-8">`	한글 깨짐 방지. UTF-8은 전 세계 모든 문자를 표현하는 인코딩
`<meta name="viewport"...>`	모바일에서 화면 크기에 맞게 표시 (없으면 PC 화면 축소판으로 보임)
`<title>`	브라우저 탭·즐겨찾기·검색 결과에 표시되는 페이지 이름
`<meta name="description">`	검색 결과 설명 문구 (SEO에 중요)
`<link rel="stylesheet">`	외부 CSS 파일 연결

④ <body> — 화면에 보이는 모든 것

사용자가 보는 텍스트, 이미지, 버튼, 링크 등 모든 콘텐츠는 <body> 안에 들어갑니다.

3. 태그 · 요소 · 속성 개념 정확히 구분하기

<a href="https://google.com" target="_blank">구글로 이동</a>
 ↑                                              ↑        ↑
태그                                          콘텐츠    닫는 태그

┌──────────────────────────────────────────────────────┐
│  전체를 "요소(element)"라고 부른다                      │
│  href="..." 와 target="..." 는 "속성(attribute)"      │
│  속성은 항상 여는 태그 안에만 쓴다                       │
└──────────────────────────────────────────────────────┘

자기닫힘 태그(Self-closing tag) — 콘텐츠가 없는 태그:
  <meta charset="UTF-8">
  <img src="photo.jpg" alt="사진">
  <br>  <hr>  <input>

4. Emmet으로 뼈대 1초 생성

VS Code에는 Emmet이 내장되어 있습니다. index.html에서 느낌표(!)를 입력하고 Tab을 누르면 기본 HTML 뼈대가 자동 완성됩니다.

Emmet 단축 표현 예시:
  !               → 전체 HTML 뼈대
  h1              → <h1></h1>
  h1{제목}        → <h1>제목</h1>
  ul>li*3         → <ul><li></li><li></li><li></li></ul>
  div.container   → <div class="container"></div>
  div#header      → <div id="header"></div>
  p.intro{내용}   → <p class="intro">내용</p>

Emmet을 익히면 코딩 속도가 3~5배 빨라집니다. 처음에는 낯설어도 하루만 연습하면 자연스럽게 손에 익습니다.

5. 주석(Comment) 작성하기

HTML에서 주석은 브라우저에 표시되지 않는 메모입니다. 코드 설명이나 임시 비활성화에 활용합니다.

<!-- 이것은 주석입니다. 브라우저에 표시되지 않습니다 -->

<body>
  <!-- 헤더 영역 시작 -->
  <header>
    <h1>사이트 제목</h1>
  </header>
  <!-- 헤더 영역 끝 -->
</body>

VS Code 단축키: Ctrl + / (선택된 줄 주석 토글)

6. 올바른 들여쓰기 습관

들여쓰기는 코드 가독성을 위한 필수 습관입니다. 자식 요소는 부모보다 들여쓰기(Tab 또는 스페이스 2칸)를 합니다.

❌ 나쁜 예:
<body><header><h1>제목</h1></header><main><p>내용</p></main></body>

✅ 좋은 예:
<body>
  <header>
    <h1>제목</h1>
  </header>
  <main>
    <p>내용</p>
  </main>
</body>

2강 핵심 요약

DOCTYPE은 반드시 첫 줄 — 없으면 구형 호환 모드로 동작
head는 메타 정보(보이지 않음) / body는 화면 콘텐츠(보임)
태그는 마크업 기호, 요소는 여는~닫는 태그 전체, 속성은 태그 안 설정값
charset=UTF-8로 한글 깨짐 방지 / viewport로 모바일 대응
Emmet ! + Tab으로 뼈대 자동 생성
다음 강: 자주 쓰는 태그 — h1~h6, p, div, span, strong, em 완전 정복

관련 검색어 · HTML기본구조, DOCTYPE선언, head태그역할, body태그, meta charset, Emmet단축키, HTML들여쓰기