웹 개발을 시작한다면 가장 먼저 만나게 되는 언어가 HTML입니다.
이번 글에서는 HTML의 기본 개념부터 브라우저가 해석하는 과정, 그리고 자주 실수하는 부분까지 이해하기 쉽게 정리해 보겠습니다.
1. HTML이란?
HTML(Hyper Text Markup Language)은 웹 페이지의 구조와 의미를 표현하는 언어입니다.
CSS는 스타일을, JavaScript는 동작을 담당하는 것과 달리 HTML은 페이지의 뼈대와 시맨틱을 담당합니다.
- 뼈대 : 제목, 본문, 구역, 이미지, 링크 등 문서의 기본 구조
- 시맨틱 : 요소 자체가 의미를 갖는 태그 (<article> = 독립적인 글, <nav> = 내비게이션)
왜 중요할까?
→ 시맨틱 하게 작성된 HTML은 검색엔진, 스크린리더, 브라우저가 정확히 이해할 수 있어 접근성, 성능, SEO까지 좋아집니다.
2. 브라우저가 HTML을 이해하는 과정 (DOM 파싱)
HTML은 단순히 텍스트일 뿐입니다. 브라우저는 HTML을 다음과 같은 단계로 해석합니다.
- HTML 문서 수신 : 서버에서 HTML 텍스트 가져오기 (네트워크 → 텍스트)
- 토큰화(Tokenizing) : 태그, 속성, 텍스트를 토큰 단위로 쪼개기
- DOM(Document Object Model) 트리 생성 : 태그의 중첩 구조를 반영해 트리 형태 구성
- CSSOM 생성 : CSS 해석 이후 DOM과 결합, 렌더 트리(Render Tree) 완성
- 레이아웃 & 페인팅 : 요소 크기와 위치를 계산하고 실제 화면에 그리기
→ 잘못된 마크업은 브라우저가 자동 보정해 의도치 않은 DOM이 만들어질 수 있습니다.
3. HTML의 문서 구조 : head와 body
HTML 문서는 크게 <head>와 <body>로 나뉩니다.
<head> : 문서 정보 (메타데이터)
사용자가 직접 보지는 않지만, 브라우저와 검색엔진이 이해하는 데 꼭 필요한 부분입니다.
- <meta charset="utf-8"> : 문자 인코딩(UTF-8)
- <meta name="viewport" content="width=device-width, initial-scale=1"> : 반응형 기본
- <title> : 문서 제목 (브라우저 탭·검색결과에 표시)
- <link> : 외부 CSS, 아이콘, preload 등
- <script> : 자바스크립트 파일 로드
<body> : 실제 콘텐츠
텍스트, 이미지, 링크, 버튼 등 사용자가 직접 확인할 수 있는 UI 요소가 들어갑니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>예시 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 본문입니다.</p>
</body>
</html>
4. 요소(Element)의 구성
<p class="text">Hello <em>World</em></p>
- 여는 태그(Opening tag) : <p>
- 속성(attribute) : class="text"
- 내용(Content) : Hello <em>World</em>
- 닫는 태그(Closing tag) : </p>
- 요소(Element) : 여는 태그 + 속성 + 내용 + 닫는 태그 전체
5. 블록 레벨 요소 vs 인라인 요소
블록 레벨(Block-level)
기본적으로 한 줄 전체 차지, 줄바꿈 발생
ex) <div>, <p>, <h1>~<h6>, <section>, <ul>/<li>
인라인(Inline)
줄 안에 이어져 표시됨
ex) <span>, <a>, <strong>, <em>, <img>
→ 의미에 맞는 태그를 선택하고, 레이아웃은 CSS로 제어하는 것이 바람직합니다.
6. 빈 요소(Void Elements)
종료 태그가 필요 없고 내부 콘텐츠도 가질 수 없습니다.
ex) <img>, <input>, <br>, <hr>, <meta>, <link>
<img src="photo.jpg" alt="사진" width="400" height="300">
주의 : </img> 같이 닫으면 오류
7. 속성(Attributes)
속성은 요소에 추가 정보 제공하는 역할을 합니다.
ex) id, class, title, lang, src, alt
- 전역 속성 : 대부분의 태그에서 사용 가능 (id, class, style, data-*)
작성 규칙
1. 속성 앞뒤는 공백으로 구분
2. 속성 이름 뒤엔 = 필요
3. 속성 값은 따옴표("")로 감싸야함
8. 참과 거짓 속성 (Boolean vs 문자열 기반)
Boolean 속성 : 존재하면 true, 없으면 false
<input type="checkbox" checked> <!-- true -->
<input type="checkbox"> <!-- false -->
<input type="checkbox" checked="false"> <!-- 여전히 true -->
문자열 기반 속성 : 값 자체가 의미
<div contenteditable="false">편집 불가</div>
9. 문서 구조
표준 HTML 문서 기본 골격은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>문서 제목</title>
</head>
<body>
<header>머리글</header>
<main>본문</main>
<footer>바닥글</footer>
</body>
</html>
<!DOCTYPE html> → 표준 모드 보장
: 브라우저에게 “이 문서는 HTML5 표준 DOM으로 해석해라”라고 알리는 역할
lang → 접근성, 검색 최적화에 중요
viewport → 반응형 기초
10. 공백 처리
HTML은 연속된 공백/개행을 1칸으로 줄여 표시합니다.
<p>안녕 하세요</p>
<!-- 브라우저에는 '안녕 하세요' -->
예외 : <pre>, <textarea>, CSS white-space
강제 공백 :
11. 주석
<!-- 주석 -->
- 브라우저에는 표시되지 않음
- 금지: <!-- -- --> (연속 하이픈)
- 코드 설명, 임시 비활성화 용도
주의 : 배포 시 민감 정보 넣지 말기
이번 글에서는 HTML의 기초 개념 → 브라우저 해석 원리 → 문서 구조와 규칙을 다뤄봤습니다.
다음에는 여러 태그에 대해 좀 더 알아보겠습니다.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 태그 정리 (2) | 2025.08.28 |
|---|