개발자가 반드시 고민해야 할 부분 중 하나는, 스크린 리더를 통해 웹사이트를 이용하는 사용자에게도 사이트가 접근 가능하도록 만드는 일입니다. HTML은 마크업에 시맨틱(semantic, 의미론적) 요소를 활용함으로써 이러한 웹 접근성 확보를 돕습니다. 이 글에서는 웹 개발에서 널리 쓰이는 대표적인 시맨틱 요소들을 살펴보겠습니다.
시맨틱 HTML이란?
'시맨틱 HTML'의 의미를 이해하려면 '시맨틱스(semantics)'라는 단어의 정의부터 확인하면 됩니다. 메리엄-웹스터 사전에 따르면 시맨틱스란 '의미, 혹은 기호가 지니는 의미를 연구하는 학문'입니다. 따라서 시맨틱 HTML을 작성한다는 것은, 각 태그가 무엇을 의미하는지 코드만 보고도 명확히 알 수 있는 HTML을 만드는 것을 뜻합니다.
시맨틱 마크업을 사용하면 웹 페이지의 구조를 표준화된 방식으로 설명할 수 있습니다. 덕분에 스크린 리더나 음성 비서 같은 보조 기술이 HTML 요소를 해석하여, 사용자가 원하는 관련 정보를 정확하게 전달할 수 있습니다.
주요 시맨틱 요소
2014년 HTML5 표준이 발표되면서 웹 페이지의 구조를 더 명확하게 드러낼 수 있는 시맨틱 요소들이 대거 추가되었습니다. 그중에서도 자주 사용되는 태그들을 하나씩 살펴보겠습니다.
<header>
<header>는 주로 컨테이너 역할을 하는 영역별(sectional) 시맨틱 요소입니다. 일반적으로 사이트 로고, <nav>, 그리고 웹사이트 전체를 설명하는 <h1>을 포함하며, 사이트의 모든 페이지에서 일관된 형태로 유지되는 경우가 많습니다.
<nav>
<nav>는 내비게이션(navigation)을 나타내는 요소로, 사용자를 사이트의 다른 영역으로 이동시키는 링크들을 담습니다.
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='utf-8'>
<title>시맨틱 헤더 예제</title>
</head>
<body>
<header>
<div class='logo-container'>
<img src='logo.png' alt='킷캣 로고'/>
<h1>Kit Kat Logo</h1>
</div>
<nav class='navigation-links-container'>
<a href='about-us.html'>About Us</a>
<a href='contact-us.html'>Contact Us</a>
<a href='services.html'>Services</a>
<a href='login.html'>Login/Register</a>
</nav>
</header>
</body>
</html>
내비게이션 요소에는 링크와 메뉴, 하위 메뉴가 들어갈 수 있지만, 그 안에 또 다른 <nav> 요소를 중첩해서는 안 됩니다. 위 예제에서는 로고 자리를 대신하는 <img>와 앵커(<a>) 요소들을 감싼 <nav>가 있으며, 이 모든 요소가 <header> 안에 배치되어 있습니다.
<main>, <section>, <h2> ~ <h6>
<main> 태그는 최상단 <header>를 제외한 페이지의 핵심 본문 콘텐츠를 나타냅니다. 그 안에는 여러 개의 <section>을 배치할 수 있고, 각 섹션은 자체적인 <header>와 <h2>~<h6> 제목 요소를 가질 수 있습니다.
제목 태그 사용의 기본 원칙은 다음과 같습니다. 먼저, 한 페이지에는 페이지 제목과 일치하는 단 하나의 <h1>만 존재해야 합니다. 또한 번호가 큰 제목(예: <h3>)은 그보다 번호가 작은 상위 제목(<h2>)을 먼저 사용하지 않은 상태에서 건너뛰어 쓸 수 없습니다. 반대로, 이미 <h4>를 사용한 뒤 다시 <h3>로 되돌아가는 것은 가능합니다. 이는 곧 웹 페이지가 가져야 할 논리적 구조를 그대로 반영합니다.
<main>
<header>
<h2>h2 — 시맨틱 요소: 본문 콘텐츠의 목적을 설명</h2>
</header>
<section>
<header>
<h3>h3 — 섹션 콘텐츠의 목적을 설명</h3>
</header>
<p>h3에 해당하는 내용</p>
<h4>h4 — 더 낮은 수준의 제목</h4>
<p>h4에 해당하는 내용</p>
</section>
<section>
<header>
<h3>h4를 사용한 뒤에도 다시 h3로 올라올 수 있습니다</h3>
</header>
<p>h3에 해당하는 내용</p>
<!-- h5, h6는 h4를 거치지 않고 건너뛰어 사용할 수 없습니다 -->
<h4>h4</h4>
<h5>h5</h5>
<h6>h6 — 이제 사용할 수 있습니다!</h6>
</section>
</main>
제목 태그를 순서에 맞지 않게 사용하는 것이 기술적으로 가능하다고 해도, 이는 권장되는 모범 사례가 아닙니다. 올바른 제목 계층 구조를 유지해야 스크린 리더 사용자에게 더 나은 접근성을 제공할 수 있습니다.
그 밖의 유용한 시맨틱 요소들
HTML5는 이 외에도 콘텐츠의 성격을 드러내는 다양한 시맨틱 요소를 제공합니다. 독립적으로 배포 가능한 콘텐츠 단위를 나타내는 <article>, 본문과 간접적으로 관련된 사이드 콘텐츠를 담는 <aside>, 페이지나 섹션의 마지막 부분을 나타내는 <footer>, 이미지와 캡션을 묶는 <figure>와 <figcaption>, 날짜와 시간을 표기하는 <time> 등이 대표적입니다. 상황에 맞는 요소를 선택하면 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줍니다.
마치며
시맨틱 HTML의 활용 가능성은 무궁무진합니다. 공식 문서는 MDN(Mozilla Developer Network)과 W3C 웹사이트에서 확인할 수 있으며, 용도를 이름으로 드러내는 그 밖의 태그들도 두 사이트에 잘 정리되어 있습니다. 문서를 찾아 읽는 습관을 들이고, 브라우저 같은 HTML 처리기가 시맨틱 정보를 활용해 필요할 때 사용자에게 추가적인 계층 구조 정보를 제공한다는 점을 기억하시기 바랍니다.