HTML 텍스트 구조화하기, 의미론적 태그와 접근성 고려

HTML 텍스트 구조화하기, 의미론적 태그와 접근성 고려

웹 페이지는 단순히 화면에 보이는 것 이상을 전달해야 합니다. 구조화된 HTML은 콘텐츠를 명확하게 표현할 뿐만 아니라, 스크린 리더 사용자나 검색 엔진에게도 유의미한 정보를 제공합니다. 이 글에서는 의미론적 태그(semantic tag)를 기반으로 텍스트를 논리적으로 구성하는 방법과 함께, 접근성(accessibility)을 고려한 HTML 작성 전략을 살펴봅니다.

 

 

목차

1. 의미론적 HTML이란?
2. 텍스트 구조화에 사용되는 주요 태그
3. 올바른 제목 계층 구조
4. 스크린 리더와의 관계
5. 의미를 무너뜨리는 잘못된 사례
6. 의미론적 vs 비의미론적 태그 비교
7. 접근성과 의미를 모두 잡는 모범 사례

 

1. 의미론적 HTML이란?

의미론적(semantic) HTML이란 태그 자체가 콘텐츠의 의미를 설명해주는 마크업 방식을 말합니다. 예를 들어 <strong>은 단순한 굵은 텍스트가 아닌 “강조”라는 의미를 갖습니다.

• <article>: 독립적인 콘텐츠 단위
• <section>: 문서 내 주제 구분
• <nav>: 탐색 메뉴 정의
• <blockquote>: 인용 콘텐츠 표현

 

 

 

2. 텍스트 구조화에 사용되는 주요 태그

다음은 텍스트 콘텐츠의 의미를 부여할 때 자주 사용하는 HTML 태그들입니다:

태그	용도
<p>	단락 구분
<ul>, <ol>, <li>	리스트 표현
<em>	강조(기울임)
<abbr>	약어 표현 및 툴팁 제공

 

 

 

3. 올바른 제목 계층 구조

제목 태그(h1~h6)는 문서의 계층 구조를 반영해야 합니다. 순서가 뒤섞이면 스크린 리더나 검색엔진에게 혼란을 줄 수 있습니다.

• <h1>: 문서 제목
• <h2>: 주요 섹션 제목
• <h3> 이하: 세부 내용의 하위 제목

중요: 시각적 스타일링만을 이유로 h 태그를 건너뛰면 안 됩니다. 계층은 논리적으로 구성되어야 합니다.

 

 

 

4. 스크린 리더와의 관계

스크린 리더는 의미론적 태그를 통해 콘텐츠 구조를 이해합니다. 이를 활용하면 시각적 정보에 의존하지 않고도 웹 페이지를 완전히 탐색할 수 있습니다.

접근성 향상을 위한 팁:

• 제목 계층을 유지하여 탐색 용이
• <label>과 <input> 연결
• aria-label, aria-hidden 등 ARIA 속성 적절히 사용

 

 

 

 

5. 의미를 무너뜨리는 잘못된 사례

다음과 같은 사례는 의미론적 마크업을 저해합니다:

• <div>로만 텍스트 구성: 의미 부여 실패
• <br>로 단락 구분: 접근성과 유지보수 저하
• <b>, <i> 태그 남용: 의미보다 시각 효과만 부여

 

 

 

6. 의미론적 vs 비의미론적 태그 비교

의미론적 태그	비의미론적 태그
<section>, <article>	<div>
<em>, <strong>	<i>, <b>

 

 

 

7. 접근성과 의미를 모두 잡는 모범 사례

다음은 접근성과 구조를 함께 고려한 HTML 구성 예시입니다:

<article>
  <h2>공지사항</h2>
  <p>2025년 4월 업데이트를 공지드립니다.</p>
  <a href="notice.html">자세히 보기</a>
</article>
  

위 예시는 콘텐츠 블록을 article로 감싸고 제목, 본문, 링크를 구조적으로 제공함으로써 시멘틱 마크업과 접근성을 모두 충족합니다.