홈 / 학습 코스 / 웹은 어떻게 작동하는가

4부 · 페이지의 뼈대: HTML

← 3부 | 목차 | 다음: 5부 · CSS와 JavaScript →

지금 다루는 단계: ⑥ 콘텐츠 — 서버가 보내준 응답 본문의 정체, 바로 HTML입니다.
그리고 여기서부터 실습 프로젝트("나를 소개하는 작은 웹페이지")가 시작됩니다.
flowchart LR
    DNS["① DNS"]:::dim
    TCP["② 연결"]:::dim
    REQ["③ 요청"]:::dim
    RES["⑤ 응답 본문<br/>= HTML"]:::focus
    REN["⑥ 화면<br/>(콘텐츠)"]:::focus
    DNS --> TCP --> REQ --> RES --> REN

    classDef focus fill:#c6f6d5,stroke:#276749,color:#000,stroke-width:3px
    classDef dim fill:#f0f0f0,stroke:#bbb,color:#999

HTML이란 무엇인가

HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)은 웹페이지의 내용과 구조를 적는 언어입니다. 1부의 비유로는 집의 뼈대였죠.

핵심은 '마크업(markup)'이라는 말에 있습니다. 우리는 글에 표시(mark)를 달아 "이건 제목이다", "이건 문단이다", "이건 이미지다"라고 알려줍니다. 그러면 브라우저가 그 표시를 보고 알맞게 화면을 구성합니다.

HTML은 프로그래밍 언어가 아닙니다. 계산하거나 판단하지 않아요. 그냥 "여기는 제목, 여기는 그림"이라고 구조를 설명하는 언어입니다. 동작은 5부의 JavaScript가 맡습니다.

태그: 내용에 표시 달기

HTML의 기본 단위는 태그(tag)입니다. 대부분 여는 태그와 닫는 태그가 짝을 이뤄 내용을 감쌉니다.

HTML
<p>안녕하세요. 이것은 한 문단입니다.</p>
  • <p> : 여는 태그 (paragraph = 문단의 시작)
  • 안녕하세요... : 감싸인 내용
  • </p> : 닫는 태그 (/가 붙으면 끝)

이 한 덩어리(<p>...</p>)를 요소(element)라고 부릅니다. 요소 안에 요소를 넣어 둥지처럼 중첩할 수도 있습니다.

HTML
<p>저는 <strong>웹 개발</strong>을 배우고 있습니다.</p>

여기서 <strong>(중요·강조)은 <p> 안에 들어 있죠. 이렇게 요소들이 부모-자식으로 겹겹이 쌓인 나무 구조가 페이지의 뼈대가 됩니다(이 나무를 6부에서 'DOM'이라 부릅니다).

자주 쓰는 태그 한 상

처음엔 이 정도만 알면 충분합니다.

태그역할
<h1>~<h6>제목 (h1이 가장 큼, 숫자가 클수록 작은 소제목)
<p>문단
<a href="...">링크 (다른 페이지로 이동)
<img src="..." alt="...">이미지
<ul> / <ol> / <li>목록 (순서 없는 / 순서 있는 / 항목)
<button>버튼
<div> / <span>의미 없는 '상자' (묶음용, 5부에서 활용)

<img>처럼 닫는 태그가 없는 태그도 있습니다(감쌀 내용이 없으니까요). 이런 건 속성으로 정보를 줍니다.

속성: 태그에 정보 덧붙이기

여는 태그 안에 이름="값" 형태로 속성(attribute)을 넣어 추가 정보를 줍니다.

HTML
<a href="https://example.com">예시 사이트로 이동</a>
<img src="profile.jpg" alt="내 프로필 사진">
  • href : 링크가 가리키는 주소 (a 태그의 목적지)
  • src : 이미지 파일의 위치 (source의 줄임)
  • alt : 이미지가 안 보일 때 대신 보여줄 설명 글 (시각장애인용 화면낭독기도 이걸 읽습니다 — 꼭 넣는 습관!)

문서의 기본 골격

낱개 태그를 넘어, 완전한 HTML 문서는 정해진 뼈대를 갖춥니다. 아래가 모든 웹페이지의 표준 골격입니다.

HTML
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>탭에 표시될 제목</title>
</head>
<body>
  <!-- 화면에 보이는 내용은 모두 여기에 -->
  <h1>안녕하세요!</h1>
  <p>화면에 보이는 첫 문단입니다.</p>
</body>
</html>

각 부분의 뜻:

  • <!DOCTYPE html> : "이 문서는 최신 HTML입니다"라는 선언. 맨 위에 한 줄 고정.
  • <html lang="ko"> : 문서 전체를 감싸는 뿌리. lang="ko"는 한국어 문서라는 표시.
  • <head> : 보이지 않는 설정 구역. 글자 인코딩(charset="UTF-8" — 한글 깨짐 방지), 탭 제목(<title>) 등이 들어갑니다.
  • <body> : 화면에 보이는 모든 내용이 들어가는 곳.
<head>와 <body>의 구분이 헷갈리면: head는 '설정', body는 '내용물'입니다. 탭 이름·인코딩은 head, 실제 글·그림은 body.

의미를 담은 태그: 시맨틱 HTML

<div>는 아무 의미 없는 '상자'라고 했죠. 그런데 페이지의 큰 구획들 — 머리말, 메뉴, 본문, 꼬리말 — 에는 의미가 담긴 태그를 쓰는 게 좋습니다. 이를 시맨틱(semantic, 의미론적) 태그라고 합니다.

태그뜻
<header>페이지/구역의 머리말 (로고·제목 등)
<nav>내비게이션 (메뉴 모음)
<main>페이지의 핵심 본문
<article>독립적인 글 한 편
<section>주제로 묶인 구역
<footer>꼬리말 (저작권·연락처 등)

<div>로 다 만들어도 화면은 똑같이 보입니다. 그런데도 왜 이걸 쓸까요?

  • 화면낭독기(시각장애인용)가 "여기가 메뉴, 여기가 본문"이라고 안내할 수 있습니다 — 접근성(accessibility).
  • 검색엔진이 페이지 구조를 더 잘 이해합니다.
  • 동료(그리고 미래의 나)가 코드를 읽기 쉽습니다.
같은 상자라도 라벨이 붙은 상자가 낫다는 이야기입니다. 겉보기는 같아도, 안 보이는 곳에서 큰 차이를 만듭니다.

사용자 입력 받기: 폼(form)

3부에서 POST는 "자료를 보내기(제출)"라고 했습니다. 사용자가 무언가를 입력해 서버로 보내는 창구가 바로 폼(form)입니다. 로그인, 회원가입, 검색창, 댓글 — 전부 폼입니다.

HTML
<form action="/submit" method="post">
  <label>이름: <input type="text" name="username"></label>
  <label>이메일: <input type="email" name="email"></label>
  <label>메시지:
    <textarea name="message"></textarea>
  </label>
  <button type="submit">보내기</button>
</form>
  • <form> : 입력 묶음 전체. action은 어디로 보낼지, method는 어떤 HTTP 메서드로(보통 post) 보낼지.
  • <input> : 한 줄 입력칸. type으로 종류를 정합니다 (text·email·password·checkbox·date 등).
  • <textarea> : 여러 줄 입력칸.
  • <label> : 입력칸에 붙는 설명. 접근성을 위해 꼭 짝지어 줍니다.
  • <button type="submit"> : 누르면 폼 전체를 action 주소로 전송.

제출 버튼을 누르면 브라우저가 입력값을 모아 3부에서 본 HTTP 요청(주로 POST)으로 서버에 보냅니다. 여기서 HTML(입력 양식)과 HTTP(전송)가 만나는 거죠. 단, 실제로 그 데이터를 받아 처리하려면 서버 측 프로그램이 필요합니다(6·7부에서 다루는 백엔드의 몫). 우리 실습은 브라우저 안에서만 도는 페이지라, 폼은 모양만 만들고 처리는 JavaScript로 흉내 냅니다.

자주 쓰는 속성과 주석

태그 안에 메모를 남기고 싶을 때는 주석(comment)을 씁니다. 주석은 화면에 안 보이고, 코드 읽는 사람만 봅니다.

HTML
<!-- 이것은 주석입니다. 브라우저가 무시합니다. -->
<p>이건 화면에 보입니다.</p>

🛠 실습: 첫 페이지를 직접 띄우기

이제 진짜로 만들어 봅니다. 설치할 것은 하나도 없습니다.

  1. 메모장(윈도우) 또는 텍스트편집기(맥) 또는 아무 코드 에디터를 엽니다.
  2. 아래 코드를 그대로 복사해 붙여 넣습니다.
  3. 파일 이름을 index.html로 저장합니다. (맥 텍스트편집기는 "포맷 → 일반 텍스트"로 바꾼 뒤 저장하세요. 윈도우 메모장은 저장할 때 "파일 형식: 모든 파일"을 선택해 .txt가 안 붙게 하세요.)
  4. 저장한 index.html을 더블클릭합니다. 브라우저가 열리면서 여러분의 첫 페이지가 뜹니다!
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나를 소개합니다</title>
</head>
<body>
  <h1>김초보의 소개 페이지</h1>

  <img src="https://placehold.co/150x150" alt="내 프로필 사진">

  <p>안녕하세요! 저는 웹이 어떻게 작동하는지 배우고 있는 <strong>김초보</strong>입니다.</p>

  <h2>제가 좋아하는 것</h2>
  <ul>
    <li>커피 ☕</li>
    <li>산책</li>
    <li>새로운 것 배우기</li>
  </ul>

  <h2>링크</h2>
  <p><a href="https://developer.mozilla.org/ko/">MDN에서 더 배우기</a></p>
</body>
</html>

예상 결과: 큰 제목 "김초보의 소개 페이지", 회색 정사각형 이미지(placehold.co가 임시 이미지를 줍니다), 강조된 이름이 들어간 문단, 점이 찍힌 목록 세 개, 그리고 클릭하면 MDN으로 가는 링크가 보입니다.

이름·취미·링크를 여러분 것으로 바꿔 저장하고 새로고침해 보세요. 바꾼 글자가 화면에 즉시 반영되는 걸 보면, "내가 적은 설명서를 브라우저가 조립한다"는 1부의 말이 피부로 와닿을 겁니다.

지금은 디자인이랄 게 없어 투박합니다. 색을 입히고 버튼을 동작시키는 건 바로 다음 부에서 합니다.

이 부에서 기억할 것

  • HTML은 페이지의 내용과 구조를 적는 마크업 언어다(프로그래밍 언어 아님).
  • 기본 단위는 태그이고, 여는/닫는 태그가 내용을 감싼 것이 요소다.
  • 요소에 이름="값" 형태의 속성으로 정보를 덧붙인다(href, src, alt 등).
  • 모든 문서는 <!DOCTYPE> → <html> → <head>(설정) + <body>(내용)의 골격을 가진다.
  • 의미를 담은 시맨틱 태그(<header>·<nav>·<main> 등)는 접근성·검색·가독성에 좋다.
  • 폼(<form>·<input>·<button>)은 사용자 입력을 받아 HTTP 요청으로 서버에 보내는 창구다.
  • 실습 프로젝트의 1단계 — HTML 뼈대를 완성했다.

다음 부에서는 이 투박한 뼈대에 CSS로 옷을 입히고, JavaScript로 움직임을 더합니다.

→ 5부 · 화장과 동작: CSS와 JavaScript