[HTML의 TEXT 요소] #01 제목<h1~h6>과 단락<p>

 

 

https://youtu.be/gTrilkiZppE?si=vAqS7r8N4c1VSxsv

---

안녕하세요, 토스트 데브입니다.

이전 시간에는 HTML 문서의 구조에 대해 배워보았죠?
오늘은 웹 문서를 구성하는 데 있어서 가장 기본적이면서 중요한 제목(heading) 태그와 단락(paragraph) 태그에 대해 알아보겠습니다.

---

제목과 단락 태그는 왜 중요한가요?

기사, 교과서, 보고서 등 어떤 문서든 제목과 단락으로 구조화되어 있습니다.
HTML 문서도 마찬가지예요. 제목과 단락을 잘 구성하면 읽기 쉽고, 정보 구조도 명확해집니다.

---

제목 태그 (<h1> ~ <h6>)

HTML에서는 총 6단계의 제목 태그를 제공합니다.

<h1>대제목 (최상위)</h1>
<h2>중제목</h2>
<h3>소제목</h3>
<h4>하위제목</h4>
<h5>더 작은 제목</h5>
<h6>가장 작은 제목</h6>

각 태그는 문서의 계층 구조를 나타내는 용도로 사용되며, 시각적인 크기 차이보다 논리적 구조가 더 중요합니다.

---

단락 태그 <p>

단락은 문장의 내용을 감싸는 기본 텍스트 블록입니다.

<p>이 부분은 하나의 단락입니다.</p>

• <p>는 블록 레벨 요소로 줄바꿈이 자동 적용됩니다.
• 문서 내에서 본문을 구성하는 기본 단위로 사용됩니다.

---

계층 구조 예시

<h1>대 제목</h1>
<p>대 제목 내용</p>

<section>
  <h2>중 제목</h2>
  <p>중 제목 내용</p>
  <h3>소제목</h3>
  <p>소제목 내용</p>
</section>

<section>
  <h2>중 제목 2</h2>
  <p>중 제목 내용</p>
  <h3>소제목 2</h3>
  <p>소제목 내용</p>
</section>

section 태그를 활용하여 논리적 블록 구분도 함께 해주면 더 좋은 문서가 됩니다.

---

웹 접근성을 위한 주의사항

접근성과 검색엔진 최적화를 위해 아래 사항들을 꼭 지켜주세요.

1. 글자 크기 때문에 제목 태그 사용 금지

• 단순히 굵게 표시하고 싶다고 <h1>을 쓰지 말고, 논리적 구조에 맞게 사용하세요.

2. 제목 단계를 건너뛰지 말 것

• 예: <h1> 다음은 <h2>, 그 다음 <h3>로 순차적 계층 유지가 중요합니다.

3. 페이지 내 <h1> 태그는 하나만!

• <h1>은 문서의 가장 중요한 제목으로 한 번만 사용하는 것이 권장됩니다.

4. 너무 많은 heading 계층은 피하자

• 보통 <h1>~<h3>까지만 사용하는 것이 적절합니다.
• 내용이 너무 많다면 페이지를 나누는 것도 좋은 방법입니다.

---

heading 없이 제목처럼 보이게 하는 방법

HTML에서는 꼭 <h1>~<h6> 태그를 사용하지 않아도 role과 aria-level 속성을 통해 제목 역할을 부여할 수 있습니다.

<div role="heading" aria-level="2">div 태그에 제목 부여하기</div>

※ 하지만 이 방법은 특별한 접근성 설정이 필요한 경우에만 사용하는 것이 좋습니다. 일반적인 문서 작성에는 heading 태그를 활용하세요.

---

정리

태그	용도	특징
<h1>~<h6>	제목	계층 구조 표현, 문서 구조화, 검색 최적화
<p>	단락	본문 구성, 블록 요소, 문장 그룹핑

 

접근성을 높이려면?

• 제목은 논리 순서대로 작성하기
• 단락은 너무 길지 않게 적절히 나누기
• 시각적 효과가 아니라 의미 중심으로 태그 선택하기

 

제목 태그와 단락 태그는 HTML 문서의 기초 중 기초입니다.
단순히 보여지는 텍스트가 아니라, 구조와 의미를 부여하는 핵심 요소이기 때문에 제대로 사용하는 습관이 정말 중요합니다.