Frontend/HTML

텍스트 태그 총정리: <h1>부터 <small>까지, 의미에 맞는 올바른 태그 선택 가이드

미니임 2026. 2. 9. 23:46

 

웹 페이지를 제작할 때 단순히 글자를 화면에 보여주는 것을 넘어, 그 글자가 어떤 의미를 담고 있는지 브라우저와 검색 엔진에게 알려주는 것이 중요합니다. 이를 '시맨틱 마크업(Semantic Markup)'이라고 합니다.

오늘은 가장 자주 사용되는 HTML 텍스트 태그들의 올바른 사용법과 풍부한 예제를 알아보겠습니다.

1. 제목 태그: <h1> ~ <h6> (Heading Tags)

제목 태그는 문서의 구조를 잡는 가장 중요한 요소입니다. 숫자가 작을수록 높은 수준의 제목을 의미합니다.

  • <h1>: 페이지 전체에서 가장 중요한 주제 (페이지당 1회 사용 권장)
  • <h2> ~ <h6>: 하위 섹션의 제목들

✅ 올바른 계층 구조 예시

<h1>최고의 캠핑 요리 가이드</h1>
  <h2>1. 아침 식사 레시피</h2>
    <h3>1.1 간단한 토스트</h3>
    <h3>1.2 에그 스크램블</h3>
  <h2>2. 저녁 식사 레시피</h2>
    <h3>2.1 통삼겹 바비큐</h3>

주의사항: 단순히 글씨를 크게 만들기 위해 <h1>을 사용해서는 안 됩니다. 글씨 크기는 CSS로 조절하고, 태그는 철저히 문서의 구조에 맞춰 선택해야 합니다.

2. 본문과 줄 바꿈: <p>,

, <hr>

<p> (Paragraph)

가장 기본적인 단락 태그입니다. 텍스트를 하나의 논리적인 덩어리로 묶어줍니다.

(Line Break)

단락 안에서 강제로 줄을 바꿀 때 사용합니다. 닫는 태그가 없는 빈 태그입니다.

<hr> (Horizontal Rule)

내용의 주제가 바뀔 때 시각적으로 구분선을 긋는 용도로 사용합니다.

<p>
  HTML 공부는 처음에는 어렵게 느껴질 수 있습니다.<br>
  하지만 태그의 의미를 하나씩 이해하다 보면 즐거워집니다.
</p>
<hr>
<p>다음 섹션에서는 강조 태그에 대해 알아보겠습니다.</p>

3. 강조와 중요도: <strong>, <b>, <em>, <i>

비슷해 보이지만 의미상 큰 차이가 있습니다.

태그의미시각적 효과

<strong> 내용상 매우 중요함 (경고, 필수 사항 등) 굵게
<b> 특별한 중요성 없이 텍스트에 주의를 끌 때 굵게
<em> 문장에서 특정 단어를 강조할 때 (어조의 변화) 기울임
<i> 기술 용어, 외국어, 생각 등 주위와 구분할 때 기울임

✅ 예제: 의미에 따른 차이

<!-- 검색 엔진이 '매우 중요'하게 인식 -->
<p><strong>주의:</strong> 허가 없이 콘텐츠를 무단 복제할 수 없습니다.</p>

<!-- 단순히 눈에 띄게만 표현 -->
<p>오늘의 <b>주요 키워드</b>는 웹 표준입니다.</p>

<!-- 말하는 느낌의 강조 -->
<p>나는 사과가 <em>정말</em> 좋다.</p>

4. 인용구: <blockquote>, <q>, <cite>

외부에서 가져온 문구를 표현할 때 사용합니다.

  • <blockquote>: 긴 인용문 (블록 요소)
  • <q>: 짧은 인용문 (인라인 요소, 자동으로 따옴표 삽입)
  • <cite>: 저작물(책, 영화, 노래 등)의 제목
<blockquote>
  <p>인생은 가까이서 보면 비극이지만, 멀리서 보면 희극이다.</p>
  <cite>- 찰리 채플린</cite>
</blockquote>

<p>그는 나에게 <q>곧 도착해</q>라고 말했다.</p>

5. 부가 정보와 서식: <small>, <sub>, <sup>

<small> (Small print)

저작권 고지, 법적 독소 조항, 이용 약관 등의 '부가 정보'를 나타냅니다.

<sub> (Subscript) / <sup> (Superscript)

아래 첨자와 위 첨자입니다. 화학식이나 수학 공식에 필수적입니다.

<p>물은 H<sub>2</sub>O로 표현하며, 피타고라스 정리는 a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>입니다.</p>

<p><small>&copy; 2024 HTML 가이드북. All rights reserved.</small></p>

6. 코드와 약어: <code>, <abbr>

IT 기술 블로그에서 특히 유용한 태그들입니다.

  • <code>: 컴퓨터 코드 조각
  • <abbr>: 약어 (title 속성을 통해 전체 이름을 표기)
<p>변수를 선언할 때는 <code>let</code> 또는 <code>const</code>를 사용하세요.</p>

<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹의 기초입니다.</p>

요약 가이드: 어떤 태그를 쓸까?

  1. 가장 중요한 제목인가요? → <h1>
  2. 단순한 본문인가요? → <p>
  3. 강력한 주의사항인가요? → <strong>
  4. 화학식이나 각주인가요? → <sub>, <sup>
  5. 하단의 저작권 표시인가요? → <small>

올바른 태그 선택은 웹 접근성을 높여 스크린 리더를 사용하는 사용자들에게 정확한 정보를 전달하며, SEO 성능을 높여 검색 결과 상단에 노출될 확률을 높여줍니다.

디자인은 CSS의 몫으로 남겨두고, HTML은 오직 의미에만 집중해 보세요.

반응형