HTML — 웹 페이지의 뼈대
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 같은 시맨틱 태그를 골라 두는 작은 습관이 검색엔진과 스크린 리더 사용자에게 큰 도움.
Next
- 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 첫 브라우저 시뮬레이션 을 참고합니다.