HTML — 웹 페이지의 뼈대

브라우저가 화면에 보여 주는 모든 것은 결국 텍스트 문서에서 출발합니다. 그 텍스트 문서의 형식이 HTML. 처음 배우는 사람이 가장 먼저 마주하는 언어이기도 하고, 다른 어떤 기술을 배우든 결국 다시 돌아오는 자리이기도 합니다. 이 글은 HTML 의 출자 · 문서 구조 · 자주 쓰는 요소 · 시맨틱 마크업 · 접근성 기초.

1. HTML 에 대한 이야기

HyperText Markup Language 의 줄임말. 1991 년 CERN 의 Tim Berners-Lee 가 제안한 문서 형식. 첫 공개 명세는 1993 년의 "HTML Tags" 메모, IETF 의 HTML 2.0 이 1995 년 RFC 1866 으로 표준화. 이후 W3C 가 명세를 이어받아 4.01 (1999) 까지 진행.

2004 년 Apple · Mozilla · Opera 가 만든 WHATWG 가 "HTML Living Standard" 라는 형식을 제안했고, W3C 의 HTML5 (2014 정식 권고) 와 한동안 병존하다 2019 년부터는 WHATWG 의 Living Standard 가 단일 SSOT 로 합의. 즉 오늘 "HTML 명세" 라 하면 html.spec.whatwg.org 의 살아 있는 문서를 가리킵니다.

마크업 언어라는 분류에 따라 HTML 은 프로그래밍 언어가 아닙니다. 데이터에 의미를 부여하는 태그 시스템에 가까움.

2. 최소 문서 구조

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>본문이 들어가는 자리입니다.</p>
  </body>
</html>

<!DOCTYPE html> — HTML5 문서임을 선언. 빠지면 브라우저가 quirks mode 로 떨어져 일부 CSS 가 다르게 해석.
<html lang="ko"> — 문서 기본 언어. 스크린 리더 발음 · 검색엔진 · 번역에 영향.
<head> — 메타데이터. 페이지 제목 · 인코딩 · 뷰포트 · 외부 스타일 / 스크립트 링크.
<body> — 화면에 보이는 본문.

3. 자주 쓰는 요소

분류	태그	쓰임
제목	`h1` ~ `h6`	문서 위계. 한 페이지에 `h1` 은 1 개가 일반적
단락	`p`	일반 텍스트 블록
링크	`a href="..."`	다른 문서로 이동
이미지	`img src="..." alt="..."`	그림
목록	`ul` · `ol` · `li`	비순서 / 순서 목록
폼	`form` · `input` · `button` · `label`	사용자 입력
표	`table` · `thead` · `tbody` · `tr` · `th` · `td`	표 형식 데이터
인라인 강조	`strong` · `em`	의미 있는 강조

div 와 span 도 있음. 둘은 의미가 없는 통 (container) 으로, 스타일링이나 스크립트의 후크로 자주 사용.

4. 시맨틱 HTML

같은 결과를 div 로만 쌓아도 화면에는 비슷하게 나오지만, 의미를 담은 태그를 쓰면 보조기술과 검색엔진이 구조를 이해할 수 있음. HTML5 가 추가한 시맨틱 요소:

header — 페이지 또는 섹션의 머리
nav — 주요 네비게이션
main — 페이지 본문 한 덩어리 (한 문서에 1 개)
article — 그 자체로 의미가 완결되는 콘텐츠
section — 주제로 묶인 영역
aside — 본문과 부수적 관계의 영역
footer — 페이지 또는 섹션의 꼬리
figure · figcaption — 이미지 · 표 · 도식과 캡션

5. 폼 예시

<form action="/login" method="post">
  <label for="email">이메일</label>
  <input id="email" name="email" type="email" required />

  <label for="pw">비밀번호</label>
  <input id="pw" name="pw" type="password" required minlength="8" />

  <button type="submit">로그인</button>
</form>

label 의 for 가 input 의 id 와 묶이면 라벨 클릭이 입력 칸을 활성화하고, 스크린 리더가 칸의 이름을 읽음.

6. 다른 길

HTML 만으로 만든 정적 페이지는 1990 년대 방식. 오늘날 자주 보이는 갈래:

서버 렌더링 — PHP · Ruby on Rails · Django · Spring · ASP.NET 같은 백엔드가 HTML 을 만들어 보냄.
정적 사이트 생성기 — Hugo · Jekyll · Astro · 11ty 가 빌드 타임에 HTML 을 만듦.
클라이언트 렌더링 — React · Vue · Svelte 가 브라우저에서 JavaScript 로 HTML 을 만듦.
메타 프레임워크 — Next.js · Nuxt · SvelteKit · Remix 가 서버 · 클라이언트 렌더링을 섞음.

어떤 길로 가도 결국 브라우저가 받는 결과물은 HTML.

7. 자주 쓰는 모양

VS Code · Sublime · 메모장 어느 곳에서든 .html 확장자로 파일을 만들고 더블클릭하면 브라우저에서 열림. 로컬 서버로 보고 싶다면:

# Python 이 깔려 있으면
python -m http.server 8000

# Node 가 깔려 있으면
npx serve .

브라우저에서 http://localhost:8000. Windows · macOS 모두 같음.

8. 자주 걸리는 자리

닫히지 않은 태그 — <div> 를 열고 </div> 를 빼먹는 식. 에디터의 자동 닫기 · 포매터 (Prettier) 가 대부분 잡음.

id 중복 — 한 문서 안에서 유일해야 함. 같은 id 를 둘 두면 getElementById 가 첫 번째만 찾음. 클래스 (class) 는 여러 번 써도 됨.

alt 의 무의미 — "사진" 같은 값으로 채우면 스크린 리더 사용자에게 도움이 안 됨. 장식용은 alt="" 로 비우는 편.

블록과 인라인 — 블록 요소 (div · p) 안에 인라인 요소 (a · span) 를 넣는 건 자연스럽지만, 그 반대 (인라인 안에 블록) 는 문법적으로 어색하거나 금지된 자리가 있음.

<a href="javascript:..."> — 보안 · 접근성에서 약점이 많음. 버튼 동작이 필요하면 <button>.

하고픈 말

HTML 은 마크업 언어라 단순해 보이지만, 시맨틱 + 접근성 + 폼 라벨링이 함께 있을 때 진가를 발휘합니다. 프레임워크가 HTML 을 만들어 주는 시대에도, 결국 의미 있는 요소를 고르는 결정은 사람의 몫. div 두 개로 끝낼 자리에 nav · article 같은 시맨틱 태그를 골라 두는 작은 습관이 검색엔진과 스크린 리더 사용자에게 큰 도움.

css
javascript-basics

WHATWG HTML Living Standard · W3C HTML5 권고 · MDN Web Docs HTML · web.dev Learn HTML · W3C WAI ARIA Authoring Practices · a11yproject.com · WorldWideWeb 첫 브라우저 시뮬레이션 을 참고합니다.