1. 텍스트와 시맨틱
body 안에 들어가는 대부분의 콘텐츠는 텍스트다. HTML은 이 텍스트를 그냥 글자의 나열로 두지 않고, 태그로 감싸 '이 텍스트가 어떤 성격인지' 를 명시한다. 이것이 시맨틱 마크업의 핵심이다.
텍스트를 크게 보이게 하거나 굵게 만드는 것은 CSS의 역할이다. HTML 태그가 해야 할 일은 "이 텍스트는 제목이다", "이 부분은 중요하다", "이건 강조다"처럼 의미를 부여하는 것이다. 시각적 효과는 그 의미에 브라우저가 기본 스타일을 붙여주는 결과일 뿐이다.
2. 제목 태그: <h1> ~ <h6>
2.1 계층적 구조
HTML은 제목을 6단계로 표현한다. <h1> 이 가장 중요한 최상위 제목이고, <h6> 이 가장 낮은 수준이다.
<h1>웹의 기초</h1>
<h2>1. 인터넷과 웹</h2>
<h3>1.1 인터넷의 정의</h3>
<h3>1.2 웹의 정의</h3>
<h2>2. HTML</h2>
<h3>2.1 마크업 언어란</h3>
<h4>2.1.1 태그의 구조</h4>
이 계층 구조는 책의 목차와 같다. 책에서 장(Chapter) 아래에 절(Section)이 오듯, <h2> 아래에 <h3> 이 온다.
2.2 계층을 지켜야 하는 이유
제목 태그를 글자 크기 조절 수단으로 쓰는 것은 잘못된 사용이다. 계층을 무너뜨리면 두 가지 문제가 생긴다.
스크린 리더의 탐색 혼란
스크린 리더는 페이지 안의 제목 태그를 모아 목차처럼 탐색 메뉴를 제공한다. 시각 장애가 있는 사용자는 긴 페이지를 처음부터 듣는 대신 "다음 제목으로 이동" 키로 빠르게 훑는다. <h1> 다음에 갑자기 <h4> 가 나온다면 이 탐색 체계가 무너진다.
검색 엔진의 주제 파악 실패
검색 엔진은 제목 태그를 페이지 구조와 주요 키워드를 파악하는 신호로 사용한다. 계층이 어긋나면 크롤러가 페이지의 주제를 올바르게 분석하지 못한다.
제목 계층의 핵심 규칙
단계를 건너뛰지 않는다.
<h1>다음엔<h2>,<h2>다음엔<h3>이어야 한다.<h1>다음에 바로<h3>을 쓰면 안 된다.
2.3 <h1> 은 페이지당 하나
<h1> 은 해당 페이지 전체의 핵심 주제를 나타내는 태그다. 페이지당 하나를 사용하는 것이 SEO 관점에서 권장된다.
- 블로그 글 페이지: 글 제목이
<h1>, 본문의 소제목들이<h2>,<h3>순으로 내려간다. - 사이트 메인 페이지: 사이트 이름이
<h1>이 될 수 있으나, 하위 페이지에서는 해당 페이지의 제목이<h1>이 된다.
2.4 제목 태그를 쓰면 안 되는 경우
제목 태그는 문서 구조의 계층을 표현할 때만 써야 한다. 다음은 잘못된 사용이다.
<!-- 글자를 크게 만들기 위해 제목 태그를 남용 -->
<h3>이 텍스트를 크게 보여주고 싶다</h3>
<!-- 올바른 방법: CSS로 크기 조절 -->
<p class="large-text">이 텍스트를 크게 보여주고 싶다</p>
글자를 굵고 크게 만들고 싶다면 CSS의 font-size, font-weight 를 사용한다. 제목 태그는 시각적 효과가 아닌 의미를 위해 존재한다.
3. 문단, 줄바꿈, 구분선
3.1 문단: <p>
<p>HTML은 웹 문서의 구조를 정의하는 마크업 언어다.</p>
<p>CSS는 그 구조에 시각적 스타일을 입힌다.</p>
- 하나의 생각의 단위를 묶는 블록 레벨 요소다. 브라우저는 기본적으로 문단 사이에 위아래 여백(margin)을 추가한다.
<p>안에 다른 블록 레벨 요소를 넣을 수 없다.<p>안에<div>나<h2>를 넣으면 브라우저가<p>를 자동으로 닫아버려 의도치 않은 구조가 만들어진다.<p>를 중첩할 수 없다.<p>안에<p>를 넣으면 유효하지 않은 HTML이다.- 문단 사이의 간격은 CSS
margin으로 조절한다. 빈<p></p>를 여러 개 써서 간격을 만드는 것은 잘못된 방법이다.
3.2 줄바꿈: <br>
<p>
서시 — 윤동주<br>
<br>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼이 없기를,
</p>
- 강제 줄바꿈을 삽입하는 빈 요소(void element)다.
- 사용 범위를 좁혀야 한다. 줄바꿈 자체가 콘텐츠의 의미를 가질 때만 써야 한다. 시(詩), 주소, 가사처럼 줄의 구분이 내용의 일부인 경우가 적합하다.
- 문단 사이의 간격을 만들기 위해
<br>을 연속으로 쓰는 것은 잘못된 사용이다. 간격은 CSSmargin으로 제어한다.
<!-- 잘못된 사용: 간격을 만들기 위해 br 남용 -->
<p>첫 번째 문단</p>
<br>
<br>
<p>두 번째 문단</p>
<!-- 올바른 방법: CSS margin으로 간격 조절 -->
<p style="margin-bottom: 2rem;">첫 번째 문단</p>
<p>두 번째 문단</p>
3.3 주제 구분선: <hr>
<p>1장의 내용이 여기서 끝난다.</p>
<hr>
<p>2장의 내용이 시작된다.</p>
- HTML4에서는 단순한 가로 선(Horizontal Rule) 을 그리는 시각적 요소였다.
- HTML5에서 의미가 바뀌었다. 단순한 선이 아니라 주제의 전환(Thematic Break) 을 나타내는 시맨틱 요소가 됐다. "이 지점을 기준으로 내용의 주제가 달라진다"는 의미다.
- 시각적 선 스타일(색, 두께, 길이)은 CSS로 조절한다.
4. 강조와 의미 부여 태그
텍스트의 특정 부분에 의미를 더하는 인라인 요소들이다. 핵심은 시각적 효과가 목적이 아니라, 의미 부여가 목적이라는 것이다.
4.1 <strong> vs <b>: 굵기의 의미 차이
두 태그 모두 기본적으로 굵은 텍스트(bold)로 렌더링되지만, 의미가 다르다.
| 태그 | 의미 | 사용 상황 |
|---|---|---|
<strong> | 중요성, 긴급함, 심각함 | 경고 문구, 핵심 정보, 꼭 주목해야 할 내용 |
<b> | 의미적 중요성 없이 시각적으로 주목시키기 | 제품명, 키워드, 리뷰의 첫 문장 등 |
<!-- strong: 이 정보는 중요하다 -->
<p>비밀번호를 타인과 공유하지 마십시오.
<strong>계정 도용의 책임은 사용자에게 있습니다.</strong></p>
<!-- b: 시각적 주목, 의미적 중요성은 없음 -->
<p><b>HTML</b>은 웹 문서의 구조를 정의하는 언어다.</p>
4.2 <em> vs <i>: 기울임의 의미 차이
마찬가지로 두 태그 모두 기울임(italic)으로 렌더링되지만, 의미가 다르다.
| 태그 | 의미 | 사용 상황 |
|---|---|---|
<em> | 강세(stress emphasis) — 발음상 강조해서 읽는 부분 | 문장의 의미를 바꾸는 강조 |
<i> | 의미적 강조 없이 일반 산문과 구분되는 텍스트 | 기술 용어, 외국어, 생각, 선박명 등 |
<!-- em: 어디를 강조하느냐에 따라 문장의 의미가 달라진다 -->
<p><em>나는</em> 그것을 하지 않았다.</p> <!-- 내가 한 게 아니다 -->
<p>나는 그것을 <em>하지</em> 않았다.</p> <!-- 하지 않은 것이다 -->
<!-- i: 외국어, 기술 용어 등 -->
<p>이 현상을 라틴어로 <i>carpe diem</i>이라 부른다.</p>
4.3 <mark>: 형광펜 강조
<p>검색 결과에서 <mark>하이퍼텍스트</mark>가 포함된 부분을 강조 표시했다.</p>
- 특정 맥락에서 참조 목적으로 하이라이트된 텍스트를 나타낸다. 기본 스타일은 노란 배경이다.
- 검색 결과에서 검색어를 강조하거나, 인용문에서 주목할 부분을 표시할 때 적합하다.
<strong>이 "본래부터 중요한" 텍스트라면,<mark>는 "이 맥락에서 주목할" 텍스트다.
4.4 <small>: 부가 정보
<p>이 상품의 가격은 10,000원입니다. <small>(부가세 별도)</small></p>
<p><small>© 2026 uzu-dev.kr. All rights reserved.</small></p>
- HTML5에서 의미가 재정의되었다. 단순히 "글자를 작게"가 아니라, 면책 조항·저작권 고지·부가 설명 같은 '사이드 코멘트'를 나타낸다.
- 기본 스타일은 한 단계 작은 글자 크기다.
4.5 <del> 과 <ins>: 삭제와 삽입
<p>정가: <del>20,000원</del> → <ins>15,000원</ins></p>
<del>: 삭제된 텍스트. 기본 스타일은 취소선(strikethrough).<ins>: 삽입된 텍스트. 기본 스타일은 밑줄(underline).- 문서의 수정 이력을 보여주거나, 이전 가격과 할인 가격을 함께 표시할 때 적합하다.
4.6 <abbr>: 약어
<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기초다.</p>
- 약어(abbreviation) 또는 두문자어(acronym)를 표시한다.
title속성에 약어의 원래 표현을 적으면, 마우스를 올렸을 때 툴팁으로 표시된다.
4.7 <code> 와 <kbd>: 코드와 키보드 입력
<p>변수 선언에는 <code>const</code> 또는 <code>let</code>을 사용한다.</p>
<p>저장하려면 <kbd>Ctrl</kbd> + <kbd>S</kbd>를 누른다.</p>
<code>: 인라인 코드 조각. 프로그래밍 코드, 파일명, 명령어 등에 사용한다.<kbd>: 사용자가 입력하는 키보드 입력을 나타낸다. 단축키 설명에 유용하다.- 두 태그 모두 기본 스타일은 모노스페이스(고정폭) 폰트다.
5. 인라인 컨테이너: <span>
5.1 <span> 이란
<p>이 문장에서 <span class="highlight">이 부분만</span> 스타일을 다르게 하고 싶다.</p>
- 의미가 없는 인라인 컨테이너다. 텍스트 흐름 안의 특정 영역을 CSS나 JavaScript로 타겟팅할 수 있도록 감싸는 역할을 한다.
- 블록 레벨 컨테이너인
<div>와 대응되는 인라인 버전이다.
<div> | <span> | |
|---|---|---|
| 레벨 | 블록 레벨 | 인라인 |
| 의미 | 없음 | 없음 |
| 용도 | 레이아웃 구역 구분 | 텍스트 일부 타겟팅 |
5.2 언제 써야 하나
<span> 은 적합한 시맨틱 태그가 없을 때 마지막으로 선택한다.
<!-- strong이 맞는데 span으로 처리: 잘못된 사용 -->
<span style="font-weight: bold;">경고: 이 동작은 되돌릴 수 없습니다.</span>
<!-- 의미에 맞는 태그 사용: 올바른 사용 -->
<strong>경고: 이 동작은 되돌릴 수 없습니다.</strong>
<!-- 적합한 시맨틱 태그가 없을 때 span: 올바른 사용 -->
<p>가격: <span class="price">15,000원</span></p>
5.3 data-* 속성과 함께 쓰는 패턴
<span> 은 JavaScript로 특정 텍스트 영역에 데이터를 부착하거나 이벤트를 연결할 때도 자주 쓰인다.
<p>상태: <span class="badge" data-status="active">활성</span></p>
const badge = document.querySelector('.badge');
console.log(badge.dataset.status); // "active"