[HTML] 05. 텍스트(글자) 관련 태그 완전 정리

[HTML] 05. 텍스트(글자) 관련 태그 완전 정리

HTML에서 가장 많이 사용하는 요소는 결국 텍스트입니다.
이번 글에서는 글자를 표현하는 태그들을 단순 암기가 아니라 의미 중심으로 정리해보겠습니다.

---

1. 제목 태그 (Heading Tag)

제목 태그는 문서의 구조를 나타냅니다.
단순히 글자를 크게 만드는 태그가 아닙니다.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
...
<h6>제목6</h6>

Output

제목1

제목2

제목3

은 페이지에서 가장 중요한 제목입니다.
SEO(검색엔진 최적화) 측면에서도 매우 중요합니다.

• 한 페이지에 h1은 보통 1개 사용
• 계층 구조를 유지 (h1 → h2 → h3)

---

2. 문단 태그 (Paragraph)

<p>이것은 문단입니다.</p>

Output

이것은 문단입니다.

문단은 자동으로 위아래 여백을 가집니다.
줄 바꿈을 위해 p를 남발하는 것은 좋지 않습니다.

---

3. 줄 바꿈 태그 (br)

첫 줄<br>
두 번째 줄

Output

첫 줄
두 번째 줄

br은 문단을 나누는 용도가 아닙니다.
의미 없는 줄 바꿈에 사용합니다.

---

4. 강조 태그

① strong vs b

<strong>중요</strong>
<b>굵게</b>

• strong → 의미상 중요한 내용
• b → 단순히 굵게 표시

② em vs i

<em>강조</em>
<i>기울임</i>

• em → 의미상 강조
• i → 단순 스타일

HTML5에서는 의미 있는 태그 사용을 권장합니다.

---

5. span 태그

span은 대표적인 인라인 요소입니다.
특정 텍스트 일부에 스타일을 줄 때 사용합니다.

<p>
  이것은 <span style="color:red;">빨간 글자</span>입니다.
</p>

---

6. 기타 텍스트 관련 태그

<mark>형광펜</mark>
<small>작은 글자</small>
<sub>아래첨자</sub>
<sup>위첨자</sup>
<del>삭제선</del>
<ins>밑줄</ins>

Output

형광펜
작은 글자
H₂O
x²
삭제된 내용
추가된 내용

---

7. 실무 기준 정리

• 제목은 반드시 계층 구조 유지
• 강조는 strong / em 사용 권장
• 스타일 목적이면 CSS 사용
• 의미 중심으로 태그 선택

HTML은 단순히 글자를 꾸미는 언어가 아니라, 의미를 담는 문서 구조 언어입니다.