5. 비시맨틱 태그 재고 및 접근성
시맨틱 태그를 사용한다고 해서 <div>나 <span>을 완전히 배제하는 것은 아닙니다. 이들은 여전히 스타일링(CSS)이나 JavaScript 동작을 위한 훅(Hook)으로 유용하게 사용됩니다.
5.1. <div>와 <span>의 적절한 사용
<div> (Block level)와 <span> (Inline level)은 콘텐츠에 의미를 부여하는 것이 아니라, 스타일링을 위한 래퍼(Wrapper) 역할을 할 때 사용합니다. 시맨틱 태그가 적절하지 않거나, 오직 CSS 레이아웃 목적인 경우에만 사용합니다.
<div class="card-wrapper"> <!-- CSS 레이아웃 목적 -->
<article>...</article>
</div>
<p>가격은 <span class="highlight">50% 할인</span>되었습니다.</p> <!-- 인라인 스타일링 목적 -->
5.2. 시맨틱 마크업과 ARIA
시맨틱 태그는 스크린 리더에게 기본적인 ARIA Role 정보를 제공합니다. 예를 들어, <nav>는 자동으로 role="navigation" 역할을 가집니다.
- 장점: 시맨틱 태그를 사용하면 ARIA 속성을 수동으로 추가할 필요가 줄어들어 코드가 간결해지고 오류 가능성이 낮아집니다.
- 예외: <div> 등을 사용하여 커스텀 컴포넌트(예: 커스텀 버튼)를 만들 때는
aria-*속성을 반드시 명시하여 접근성을 보장해야 합니다.
최종 목표는 의미 있는 마크업을 통해 모든 사용자가 콘텐츠에 쉽게 접근하고 이해할 수 있도록 하는 것입니다.