텍스트 태그

HTML에서 가장 많이 쓰는 태그들은 대부분 텍스트와 관련된 것들이다. 제목, 문단, 강조, 줄바꿈 — 텍스트를 어떻게 표현하느냐에 따라 태그가 달라진다.

---

제목 태그 — h1 ~ h6

<h1>부터 <h6>까지 여섯 단계의 제목 태그가 있다. 숫자가 클수록 글자가 작아진다.

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

<h1>은 페이지에서 가장 중요한 제목 하나에만 쓰는 것이 일반적이다. 단순히 글자 크기를 조절하려고 <h3>를 쓰는 건 올바른 사용법이 아니다. 글자 크기는 CSS로 조절하고, 태그는 의미에 맞게 선택해야 한다.

---

문단 태그 — p

<p>는 하나의 문단을 나타낸다. 앞뒤로 자동으로 여백이 생긴다.

<p>첫 번째 문단입니다. 문단은 줄바꿈이 아니라 태그로 구분합니다.</p>
<p>두 번째 문단입니다.</p>

HTML에서는 코드에 줄바꿈을 아무리 많이 써도 브라우저에서는 무시된다. 줄을 나누고 싶다면 <br> 태그를 써야 한다.

---

줄바꿈 — br

<p>첫 번째 줄<br>두 번째 줄<br>세 번째 줄</p>

<br>은 닫는 태그 없이 단독으로 쓰는 빈 요소다. 문단을 나누는 용도보다는 주소나 시처럼 같은 문단 안에서 줄을 나눠야 할 때 적합하다.

---

강조 태그 — strong, em

<p>이 내용은 <strong>매우 중요</strong>합니다.</p>
<p>이 부분은 <em>강조</em>해서 읽어야 합니다.</p>

• <strong> — 굵게 표시. 의미적으로 "중요하다"는 뜻
• <em> — 기울임 표시. 의미적으로 "강조한다"는 뜻

시각적으로 굵게 보이게 하려고 <strong>을 쓰기보다, 실제로 중요한 내용에 써야 한다. 단순한 스타일링은 CSS로 처리하는 것이 맞다.

---

인라인 텍스트 태그들

<p>가격은 <del>50,000원</del> → <ins>39,000원</ins>입니다.</p>
<p>H<sub>2</sub>O는 물의 화학식입니다.</p>
<p>E = mc<sup>2</sup></p>
<p><mark>형광펜</mark>으로 강조한 텍스트입니다.</p>
<p>단축키: <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
<p><code>System.out.println()</code>은 출력 메서드입니다.</p>

태그	의미	표시 방식
<del>	삭제된 텍스트	취소선
<ins>	추가된 텍스트	밑줄
<sub>	아래 첨자	H₂O
<sup>	위 첨자	mc²
<mark>	형광펜 강조	노란 배경
<kbd>	키보드 입력	Ctrl
<code>	코드 인라인	고정폭 폰트

---

span — 의미 없는 인라인 컨테이너

<span>은 특별한 의미 없이 인라인 요소를 묶을 때 쓴다. 주로 CSS로 특정 텍스트에 스타일을 적용하기 위해 감싸는 용도다.

<p>가격은 <span style="color: red;">품절</span> 상태입니다.</p>

---

hr — 수평선

내용을 구분하는 수평선을 그린다.

<p>첫 번째 섹션 내용</p>
<hr>
<p>두 번째 섹션 내용</p>

---

텍스트 태그를 고를 때 기준은 "어떻게 보이게 할까?"가 아니라 "이 내용이 무슨 의미인가?"다. 제목이면 <h>, 문단이면 <p>, 중요하면 <strong>. 의미에 맞는 태그를 쓰는 것이 HTML을 올바르게 쓰는 첫 번째 습관이다.