웹 페이지는 결국 브라우저가 읽어 화면으로 그려내는 문서다. 그 문서의 뼈대를 기술하는 언어가 HTML이다. 이 글에서는 HTML 문서의 기본 구조, 자주 쓰는 태그, 그리고 사용자 입력을 받는 폼(Form)까지 정리한다.
1. HTML 문서의 기본 구조
HTML은 태그로 내용을 감싸 의미와 구조를 부여하는 마크업 언어다. 모든 문서는 다음 골격에서 출발한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<!-- 화면에 보이는 내용 -->
</body>
</html>
크게 두 영역으로 나뉜다.
<head>: 문서의 메타 정보. 문자셋, 제목, 스타일·스크립트 연결 등 화면에는 보이지 않지만 문서를 설명하는 정보가 들어간다.<body>: 실제로 브라우저 화면에 표시되는 내용.
DOCTYPE와 charset은 왜 쓸까
<!DOCTYPE html>은 "이 문서를 HTML5 표준 모드로 해석하라"고 브라우저에 알리는 선언이다. <meta charset="UTF-8">은 문자 인코딩을 지정해 한글이 깨지지 않게 한다. 둘 다 눈에 보이지 않지만, 빠뜨리면 화면이 깨지거나 의도와 다르게 렌더링된다.2. 자주 쓰는 태그
자주 쓰는 기본 태그들이다. 각 태그가 "무엇을 의미하는가"를 기준으로 익히면 좋다.
| 태그 | 용도 |
|---|---|
<h1>~<h6> |
제목 (숫자가 작을수록 큰 제목) |
<p> |
문단 |
<br> / <hr> |
줄바꿈 / 수평선 |
<a href> |
하이퍼링크 |
<img src> |
이미지 |
<ul> / <ol> / <li> |
비순서 목록 / 순서 목록 / 항목 |
<table><tr><td> |
표 (행 / 셀) |
<div> / <span> |
블록 영역 / 인라인 영역 |
특히 <div>와 <span>의 차이를 알아두면 좋다. <div>는 한 줄 전체를 차지하는 블록 요소라 영역을 나눌 때 쓰고, <span>은 줄 안의 일부만 감싸는 인라인 요소라 문장 중 일부에 스타일을 줄 때 쓴다.
3. 폼(Form): 사용자 입력 받기
폼은 사용자에게서 입력을 받아 서버로 보내는 통로다. <form> 안에 여러 입력 요소를 배치한다.
<form>
<input type="text"> <!-- 텍스트 입력 -->
<input type="radio" name="city" value="seoul">서울
<input type="checkbox">동의
<input type="button" value="확인">
<select><option>항목</option></select>
</form>
입력 요소 중 라디오 버튼과 체크박스의 차이를 짚어두자.
라디오 버튼 vs 체크박스
- radio:
name이 같은 버튼끼리 한 그룹이 되어 그중 하나만 선택된다. (성별, 도시 선택 등) - checkbox: 서로 독립적이라 여러 개를 동시에 선택할 수 있다. (관심사 다중 선택 등)
라디오 버튼이 "하나만" 선택되게 하는 비결이 바로 같은 name 값이다. 브라우저는 동일한 name을 가진 라디오들을 하나의 선택 그룹으로 묶는다.
한 걸음 더
- HTML5는 태그에 "의미"를 담는 시맨틱 태그를 강조한다. 같은 영역 나누기라도
<div>만 쓰지 않고<header>,<nav>,<main>,<footer>같은 태그를 쓰면, 검색 엔진과 화면 낭독기(스크린 리더)가 문서 구조를 더 잘 이해한다. 보기엔 같아도 "기계가 읽기 좋은" 차이가 생긴다. <input>의type은 단순한 모양 지정이 아니다.type="email",type="number",type="date"등으로 지정하면 브라우저가 자동으로 형식 검사와 전용 입력 UI(날짜 선택기 등)를 제공한다. 직접 자바스크립트로 검증하기 전에, HTML 차원에서 1차 검증이 이뤄지는 셈이다.- 폼의 데이터가 서버로 가는 방식은
method속성으로 정해진다. GET은 입력값을 URL 뒤에 붙여 보내고(검색창처럼 노출돼도 되는 것), POST는 본문에 담아 보낸다(비밀번호처럼 노출되면 안 되는 것). "무엇을 보내느냐"에 따라 방식이 달라진다는 점이 폼 설계의 첫 고려사항이다.