웹 개발 시작하기 —
기본 HTML 문서 구조 완전 정리
HTML 문서를 처음 만들 때 가장 기본이 되는 뼈대 코드다. 단 8줄이지만 여기에 웹의 모든 규칙이 압축돼 있다.
DOCTYPE은 브라우저에게 "이 문서는 HTML5 표준으로 작성됐다"고 알리는 선언문이다. 태그가 아니라 선언문이라는 점이 중요하다. 가장 첫 줄에 와야 하며, 빠뜨리면 브라우저는 옛날 방식(Quirks Mode)으로 페이지를 해석한다.
| 모드 | 동작 | 결과 |
|---|---|---|
| Standards Mode | 최신 웹 표준대로 해석 | 의도한 대로 화면 출력 |
| Quirks Mode | 1990년대 옛 브라우저 방식 | 박스 크기, 정렬 깨짐 |
- DOCTYPE은 대소문자 구분 안 함 —
<!doctype html>,<!DOCTYPE html>둘 다 OK - HTML4 시절엔 한 줄이 매우 길었지만 HTML5에서 단순화됨
- 이걸 빼먹으면 CSS가 의도치 않게 동작하는 원인이 됨
<html>은 문서 전체를 감싸는 가장 바깥쪽 컨테이너다. 모든 다른 태그는 이 안에 들어가야 한다. 닫기 태그 </html>까지가 곧 HTML 문서 전체다.
이 문서가 한국어로 작성됐다는 정보를 알려준다. 사람이 보기엔 별 차이 없어 보이지만 다음 셋은 이 정보를 직접 사용한다.
| 대상 | 활용 방식 |
|---|---|
| 스크린 리더 | 한국어 발음 엔진으로 읽음 (시각장애인 접근성) |
| 검색 엔진(SEO) | 한국어 페이지로 분류해 한국 사용자에게 노출 |
| 브라우저 번역기 | "이 페이지를 영어로 번역하시겠습니까?" 안내 표시 |
lang="en"은 영어, lang="ja"는 일본어, lang="zh-CN"은 중국어 간체. 잘못 지정하면 번역 안내가 엉뚱하게 뜨거나 검색 노출이 떨어진다.<head>는 화면에 직접 표시되지 않지만 문서가 어떻게 동작할지를 결정하는 설정값이 들어간다. 사람의 머리 속처럼 "이 문서는 이런 규칙으로 움직여요"를 정의하는 영역이다.
- 화면에 안 보임
- 문자 인코딩, 제목, CSS, JS 연결
- SEO·접근성 설정
- 브라우저가 먼저 읽음
- 화면에 보임
- 제목·이미지·문단·버튼 등
- 실제 사용자 콘텐츠
- head 다음에 읽힘
meta, title, link(CSS 연결), script(JS 연결), style(인라인 CSS) 등charset은 문서가 사용할 문자 인코딩 방식을 지정한다. UTF-8은 전 세계 거의 모든 문자(한글, 일본어, 이모지 포함)를 표현할 수 있는 표준 인코딩이다. 이걸 빼면 브라우저는 한글을 이상한 깨진 문자로 보여줄 수 있다.
| 인코딩 | 지원 문자 | 현재 상태 |
|---|---|---|
| ASCII | 영문·숫자만 | 한글 표현 불가 |
| EUC-KR | 한글 + 영문 | 구형 사이트에서만 사용 (지양) |
| UTF-8 | 전 세계 모든 문자 + 이모지 | 현재 표준 |
- HTML 파일을 저장할 때도 에디터에서 "UTF-8" 인코딩으로 저장해야 한글이 안 깨짐
- charset 선언은 head의 가장 위쪽에 두는 게 안전 — 브라우저가 다른 태그 읽기 전에 인코딩 알아야 함
- VS Code 기본 인코딩이 UTF-8이라 모르고 잘 쓰고 있는 경우가 많음
<title>은 화면 본문에는 안 나오지만 다음 위치에서 사용된다.
<title> 값이다. SEO에서 가장 중요한 요소 중 하나.- 한 페이지당 title은 1개만 — 여러 개 쓰면 첫 번째만 인식됨
- 너무 길면 검색 결과에서 잘림 (보통 50~60자 권장)
- 각 페이지마다 다른 title을 줘야 SEO에 유리
<body>는 사용자 눈에 실제로 보이는 모든 콘텐츠가 들어가는 영역이다. 이번 예제에는 세 가지 태그가 들어 있다.
| 태그 | 역할 | 화면에서 |
|---|---|---|
<h1> |
가장 큰 제목 (Heading 1) | 크고 굵은 글씨로 표시 |
<img> |
이미지 삽입 | 지정한 경로의 그림 출력 |
<p> |
문단 (Paragraph) | 줄바꿈된 본문 텍스트 |
HTML은 h1부터 h6까지 6단계 제목 태그를 제공한다. 숫자가 커질수록 글씨가 작아지고 중요도도 낮아진다. 글씨 크기 차이뿐 아니라 검색엔진과 스크린 리더가 문서 구조를 파악하는 데 활용한다.
- 한 페이지에
h1은 1개가 원칙 — 그 페이지의 핵심 주제 - 크게 보이게 하려고
h1을 남발하면 SEO 점수 하락 - "글씨 크기를 위해서가 아니라 의미(중요도)를 위해서" 쓴다
<img>는 닫기 태그가 없다. 빈 태그(empty element)라고 부르며, 자기 자신만으로 완결되는 태그다. </img>를 쓰지 않는다.
<p>내용</p>여는 태그 + 내용 + 닫는 태그
<img src="...">혼자서 완성. 닫는 태그 없음
src(source)는 이미지 파일 위치를 가리키는 속성이다. 위 코드는 "현재 HTML 파일이 있는 폴더 안에 images라는 하위 폴더가 있고, 그 안에 watch.jpg 파일이 있다"는 뜻이다.
| 경로 작성법 | 의미 | 예시 |
|---|---|---|
| 상대 경로 | 현재 파일 기준 | images/watch.jpg |
| 절대 경로 | 도메인 루트 기준 | /images/watch.jpg |
| 외부 URL | 다른 사이트 이미지 | https://example.com/a.jpg |
- 이미지가 안 뜰 때 대체 텍스트 표시:
<img src="..." alt="시계 사진"> - 스크린 리더가 시각장애인에게 읽어줌 (접근성)
- alt 누락 시 SEO 점수 감점, 웹 접근성 검사에서도 경고
<p>는 paragraph(문단)의 약자다. 단순히 글자를 보여주는 게 아니라 "여기는 하나의 문단입니다"라는 의미를 부여한다. 그래서 자동으로 위아래 여백이 생기고, 다음 요소와 줄이 분리된다.
<br>을 쓴다. <p>는 "독립된 의미 단위"일 때 사용하는 게 맞다.| 구분 | p 태그 | br 태그 |
|---|---|---|
| 의미 | 독립된 문단 | 단순 줄바꿈 |
| 여백 | 위아래 자동 생성 | 없음 |
| 닫기 태그 | 필요 (</p>) |
없음 (빈 태그) |
HTML 파일을 브라우저로 열면 위에서부터 아래로 한 줄씩 해석한다. 짧은 순간이지만 아래 단계가 순차적으로 일어난다.
| 실수 | 증상 | 해결 |
|---|---|---|
| DOCTYPE 빠뜨림 | 레이아웃·CSS 깨짐 | 첫 줄에 <!doctype html> |
| charset 없음 또는 잘못 | 한글이 ¾È³çÇϼ¼¿ä로 깨짐 | <meta charset="utf-8"> 추가 |
| 닫기 태그 누락 | 화면 일부만 보임 / 깨짐 | 여는 태그마다 닫기 태그 짝 맞추기 |
| img 경로 오타 | X 표시만 보임 | 폴더명·확장자 정확히 / 대소문자 구분 |
| h1을 디자인 용도로 남발 | SEO 점수 하락 | 크기는 CSS로, h1은 페이지당 1개 |
| body 밖에 콘텐츠 작성 | 일부 브라우저에서 안 보임 | 모든 콘텐츠는 <body> 안으로 |
핵심 한 줄 요약
'php' 카테고리의 다른 글
| HTML 텍스트 기초 — h1~h6 · p · hr · blockquote 완전 정리 (0) | 2026.05.01 |
|---|---|
| HTML 비순서 리스트 — ul · li 완전 정리 (0) | 2026.05.01 |
| HTML 순서 리스트 — ol · type · start 완전 정리 (1) | 2026.05.01 |
| HTML 테이블 구조 — thead · tbody · tfoot 완전 정리 (0) | 2026.05.01 |
| HTML 테이블 기초 — table, tr, th, td 완전 정리 (0) | 2026.05.01 |
댓글