[HTML5 시맨틱태그 완전정복]④ 텍스트 및 콘텐츠 관련 시맨틱 태그 가이드

1. 제목 태그(<h1>~<h6>)의 올바른 사용법과 문서 구조에서의 의미

HTML 문서에서 <h1>~<h6> 태그는 제목을 나타내는 시맨틱 요소입니다. 이 태그는 시각적 크기보다는 문서 구조와 계층을 나타내는 데 중요한 의미를 가집니다.

• <h1>: 해당 페이지의 최상위 제목, 페이지를 대표하는 주제
• <h2>~<h6>: 하위 섹션 제목이며, <h1>을 기준으로 단계별 계층을 형성

예시:

<h1>웹접근성이란?</h1>
  <h2>스크린리더란?</h2>
    <h3>NVDA 설치 방법</h3>

주의사항:

• 한 문서에 <h1>은 한 번만 사용하는 것이 원칙 (HTML5에서는 여러 개도 허용되나, 접근성과 SEO 측면에서는 권장되지 않음)
• 제목 태그는 스타일 목적이 아닌 문서 의미 전달에 사용해야 함

2. 텍스트 표현 태그 설명

<p>: 문단

• 문장을 하나의 문단으로 묶을 때 사용
• 기본적으로 위아래 여백(margin)이 있음

<blockquote>: 인용문

• 다른 출처에서 가져온 길고 명시적인 인용문에 사용
• 시각적으로 들여쓰기 처리됨

웹 접근성은 모두를 위한 웹 환경을 만드는 것이다.

<pre>: 사전 서식 유지

• 공백, 줄바꿈 등 텍스트의 원형 그대로 표시
• 코드, ASCII 아트 등에 사용됨

<pre>
function hello() {
  console.log("Hello, world!");
}
</pre>

<code>: 코드 조각

• 한 줄 또는 문장 안의 코드나 명령어 표현에 사용
• <pre>와 함께 쓰면 전체 코드 블록을 표현 가능

<em>: 강조 (기울임)

• 의미상의 강조 (스크린리더는 강한 어조로 읽음)
• 기본적으로 이탤릭체로 표시됨

<strong>: 중요 강조

• 더 강한 강조 의미 (스크린리더는 더욱 강조된 어조)
• 기본적으로 굵은 글씨로 표시됨

접근성 팁:

• 스타일 목적이 아닌 의미적 강조에 따라 <em>, <strong>을 구분하여 사용

3. 리스트 태그(<ul>, <ol>, <li>)와 그 활용법

<ul>: 순서 없는 리스트 (unordered list)

• 항목 간 순서가 중요하지 않을 때

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>: 순서 있는 리스트 (ordered list)

• 항목 간 순서가 중요할 때 (예: 단계, 절차)

<ol>
  <li>계정 생성</li>
  <li>이메일 인증</li>
  <li>로그인</li>
</ol>

<li>: 리스트 항목

• <ul> 또는 <ol> 안에서 사용되어야 함

활용 팁:

• <nav> 안에서 메뉴 리스트 구성 시 <ul>과 <li>를 활용하여 접근성과 구조성 확보
• 다단계 목록은 <li> 안에 중첩된 <ul> 또는 <ol>로 표현 가능

4. 접근성을 고려한 텍스트 태그 활용 팁

• 제목 태그는 계층 구조에 맞게 순차적으로 사용 (건너뛰지 말 것)
• 강조 표현 시 <b>, <i>보다는 의미가 있는 <strong>, <em> 사용
• 리스트는 단순 줄바꿈으로 나열하지 말고, <ul>, <ol> 구조 사용
• 스크린리더 호환을 위한 시맨틱 태그 사용을 기본으로 하고, 필요시 aria-label, aria-labelledby 등 ARIA 속성과 병행

마무리하며

웹 콘텐츠의 핵심은 사용자에게 명확하고 의미 있는 정보를 제공하는 것입니다. 시맨틱 태그는 그 구조와 의미를 강화하여 웹 접근성과 SEO까지 개선하는 중요한 요소입니다. HTML을 단순한 디자인 도구가 아닌 정보 전달 언어로 이해한다면, 더 나은 사용자 경험을 설계할 수 있습니다.

 

*이 글이 도움이 되셨다면 댓글로 궁금한 점이나 추가로 다뤘으면 하는 태그를 알려주세요!