시맨틱 HTML과 접근성
header·nav·main·article 같은 의미 요소로 문서를 구성하고 키보드·레이블·대체 텍스트 접근성을 적용합니다.
지금까지 우리는 HTML 문서의 기본 구조를 이해하고, 텍스트, 링크, 이미지, 리스트, 테이블, 폼 등 다양한 콘텐츠를 HTML로 표현하는 방법을 학습했습니다.
이제 HTML로 웹 페이지를 화면에 보이게 하는 방법을 넘어, 웹 페이지에 의미를 부여하고 모든 사용자가 동등하게 접근할 수 있도록 돕는 방법까지 다룰 시간입니다.
이 장에서는 현대 웹 개발의 핵심 흐름인 시맨틱 HTML(Semantic HTML)의 개념과 중요성을 정리합니다.
또한 웹 접근성(Web Accessibility)의 기본 원리와 HTML로 접근성을 높이는 방법을 구체적으로 살펴봅니다.
이 두 가지 개념은 단순히 작동하는 웹 페이지를 넘어, 잘 만들어진 웹 페이지를 만드는 데 필수적입니다.
SEMANTICS & ACCESSIBILITY
네이티브 요소의 의미와 기본 동작을 함께 사용합니다
역할·이름·상태는 보조 기술에 전달되고, 기본 키보드 동작은 해당 HTML 요소가 제공합니다.
HTML 의미 → 접근성 역할·이름·상태
브라우저가 DOM의 의미를 접근성 API에 전달하면 보조 기술이 이를 이용합니다. 화면의 모든 DOM 노드가 같은 모습으로 복사되지는 않습니다.
button · 기본 조작이 있는 요소
<button>저장</button>접근성 정보
역할: button
이름: 저장
키보드 동작
Tab으로 이동하고 Enter·Space로 활성화합니다. 버튼 핸들러의 업무 동작은 별도 구현합니다.
label + input · 입력 이름
<label for="email">
이메일
</label>
<input id="email"
type="email" required>접근성 정보
입력 역할 · 이름: 이메일
required 상태
키보드 동작
기본 입력에 초점을 이동해 편집합니다. 실제 역할 이름은 브라우저·플랫폼 표현을 확인합니다.
nav · 탐색 영역
<nav aria-label="주 메뉴">
<a href="/">홈</a>
</nav>접근성 정보
영역: navigation
이름: 주 메뉴
탐색 동작
보조 기술의 영역 탐색에 쓰입니다. nav 자체가 Tab 정지점이 되는 것은 아닙니다.
기본 HTML 동작과 접근성 정보는 연결되지만 구분합니다
네이티브 button은 의미와 기본 키보드 동작을 함께 제공합니다. 접근성 트리가 키보드 동작을 생성하는 마지막 단계인 것은 아닙니다.
ARIA 역할만으로 동작이 생기지 않습니다
<div role="button">저장</div>이 div에는 기본 버튼의 초점·Enter·Space 조작이 자동으로 생기지 않습니다. 가능하면 button을 사용합니다.
시맨틱 HTML: 웹 페이지에 의미 부여하기
시맨틱 HTML과 접근성에서는 태그 의미, 브라우저 해석, 사용자에게 보이는 결과를 연결합니다.
시맨틱(Semantic)이란 '의미론적인'이라는 뜻입니다.
따라서 시맨틱 HTML은 HTML 태그 자체가 웹 페이지의 내용에 대한 의미를 명확하게 전달하도록 작성하는 것을 의미합니다.
예를 들어, 웹 페이지에서 제목을 표현할 때 단순히 <div> 태그를 사용하고 CSS로 글씨 크기를 키울 수도 있습니다.
그러나 <h1> 태그를 사용하면, 브라우저, 검색 엔진, 그리고 보조 기술(스크린 리더 등)은 이 요소가 '페이지의 가장 중요한 제목'이라는 것을 명확히 이해할 수 있습니다.
왜 시맨틱 HTML이 중요할까요?
시맨틱 HTML을 사용하는 것은 다음과 같은 중요한 이점들을 제공합니다.
- 검색 엔진 봇은 웹 페이지의 콘텐츠를 분석하여 순위를 매깁니다. 이때 시맨틱 태그는 페이지의 구조와 중요 콘텐츠를 더 잘 파악할 수 있도록 돕습니다. 예를 들어,
<h1>태그는 페이지의 핵심 주제를,<nav>태그는 내비게이션 영역임을 알려주어 검색 엔진이 웹 페이지의 관련성을 더 정확하게 판단하게 합니다. 이는 검색 결과에서 더 높은 순위를 얻는 데 기여할 수 있습니다.
- 시각 장애인을 위한 스크린 리더와 같은 보조 기술은 시맨틱 태그를 기반으로 웹 페이지의 구조를 파악하고 사용자에게 음성으로 전달합니다.
<table>태그는 표임을,<header>는 머리글 영역임을 명확히 알려주어 사용자가 콘텐츠를 더 쉽게 이해하고 탐색할 수 있도록 돕습니다.
- 시맨틱 태그를 사용하면 코드 자체가 의미를 가지므로, 다른 개발자(또는 미래의 자신)가 코드를 훨씬 쉽게 이해하고 유지보수할 수 있습니다.
<div>와<span>으로만 이루어진 복잡한 코드보다<nav>,<aside>,<article>등으로 구조화된 코드가 훨씬 읽기 쉽고 수정하기 용이합니다.
- 브라우저의 개발자 도구에서도 시맨틱 태그를 통해 문서 구조를 한눈에 파악하기 용이하며, CSS 스타일링 시에도 의미론적 선택자를 사용하여 코드를 더 깔끔하게 작성할 수 있습니다.
주요 시맨틱 HTML5 태그
HTML5는 웹 페이지의 구조를 더욱 명확하게 정의할 수 있는 다양한 시맨틱 태그들을 도입했습니다.
-
<header>: 웹 페이지나 섹션의 머리글 영역을 정의합니다. 주로 제목, 로고, 내비게이션 링크 등이 포함됩니다.<header> <h1>나의 블로그</h1> <nav> <a href="/">홈</a> <a href="/about">소개</a> </nav> </header> -
<nav>: 내비게이션(탐색) 링크들을 포함하는 영역을 정의합니다. 주로 메뉴, 목차 등이 여기에 해당합니다.<nav> <ul> <li><a href="#intro">소개</a></li> <li><a href="#services">서비스</a></li> <li><a href="#contact">문의</a></li> </ul> </nav> -
<main>: 문서의 주요 콘텐츠를 정의합니다. 이 교재의 화면에서는 주요 콘텐츠를 하나의main영역으로 묶어 중심 내용을 찾기 쉽게 합니다.<main> <p>이곳에 페이지의 가장 중요한 내용이 들어갑니다.</p> <article> <h2>주요 기사 제목</h2> <p>기사 내용...</p> </article> </main> -
<article>: 독립적으로 배포하거나 재사용할 수 있는 독립적인 콘텐츠를 정의합니다. 블로그 게시물, 뉴스 기사, 댓글 등이 좋은 예시입니다.<article> <h2>오늘의 뉴스: 웹 개발 동향</h2> <p>최근 웹 개발 분야에서는 새로운 기술들이 빠르게 등장하고 있습니다.</p> <footer> <p>작성자: 김웹 | 날짜: 2025-06-14</p> </footer> </article> -
<section>: 문서의 독립적인 섹션을 정의합니다. 일반적으로 제목(<h1>~<h6>)을 포함하며, 관련성 있는 콘텐츠를 그룹화합니다.<div>와 비슷하지만,<section>은 의미론적으로 더 강한 그룹화를 나타냅니다.<section> <h2>회사 비전</h2> <p>우리는 기술을 통해 세상을 더 좋게 만듭니다.</p> </section> <section> <h2>연혁</h2> <p>2020년: 회사 설립</p> <p>2022년: 첫 번째 제품 출시</p> </section> -
<aside>: 문서의 주요 콘텐츠와 간접적으로 관련된 콘텐츠를 정의합니다. 사이드바, 광고, 관련 링크 등이 포함될 수 있습니다.<aside> <h3>인기 게시물</h3> <ul> <li><a href="#">HTML5 필수 태그</a></li> <li><a href="#">CSS Flexbox 완벽 가이드</a></li> </ul> </aside> -
<footer>: 웹 페이지나 섹션의 바닥글 영역을 정의합니다. 저작권 정보, 연락처 정보, 관련 링크 등이 포함될 수 있습니다.<footer> <p>© 2025 나 혼자 웹 개발. 모든 권리 보유.</p> <p>문의: [email protected]</p> </footer> -
<figure>와<figcaption>: 이미지, 다이어그램, 코드 블록 등과 같은 독립적인 콘텐츠를 정의하고, 그 콘텐츠에 대한 캡션(설명)을 제공합니다.<figure> <img src="code_example.png" alt="HTML 코드 예시"> <figcaption>그림 1. 시맨틱 HTML 구조의 예시 코드</figcaption> </figure>
이 외에도 <blockquote>, <time>, <mark> 등 다양한 시맨틱 태그들이 있습니다.
중요한 것은 각 콘텐츠의 역할과 의미에 가장 적합한 태그를 선택하여 사용하는 습관을 들이는 것입니다.
웹 접근성: 모두를 위한 웹
웹 접근성(Web Accessibility)은 장애인이나 고령자 등 신체적, 인지적 제약이 있는 사용자들을 포함하여 모든 사람이 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 하는 것을 의미합니다.
웹은 본질적으로 모두를 위한 것이어야 한다는 가치 아래, 웹 접근성은 선택이 아닌 필수 사항으로 여겨지고 있습니다.
장애를 가진 사용자들은 스크린 리더(화면 내용을 음성으로 읽어주는 소프트웨어), 키보드 내비게이션, 대체 입력 장치 등 다양한 보조 기술을 사용하여 웹을 이용합니다.
웹 접근성을 고려하여 웹 페이지를 만들면, 이러한 보조 기술들이 콘텐츠를 올바르게 해석하고 사용자에게 전달할 수 있게 됩니다.
HTML을 통한 웹 접근성 향상 방법
HTML은 웹 접근성을 위한 기본적인 토대를 제공합니다.
올바른 HTML 마크업만으로도 웹 접근성을 크게 향상시킬 수 있습니다.
- 이 절 앞부분에서 살펴보았듯이,
<div>와 같은 비의미론적 태그 대신<header>,<nav>,<main>,<article>,<aside>,<footer>등 의미론적 태그를 사용하여 문서의 구조를 명확히 합니다. 스크린 리더는 이 태그들을 기반으로 페이지의 영역을 사용자에게 알려줍니다. - 예:
<h1>,<h2>등을 사용하여 제목 계층을 올바르게 구성합니다. - 예:
<ul>,<ol>,<dl>을 사용하여 목록을 올바르게 마크업합니다.
alt 속성 부여- 이미지 절에서 살펴본 것처럼, 정보 이미지에는 전달할 내용을 설명하는
alt를 제공합니다. 모든 그림에 길거나 비어 있지 않은 설명이 필요한 것은 아닙니다. 아래처럼 장식 이미지에는 빈alt를 써서 불필요한 읽기를 줄입니다. - 예:
<img src="sunset.jpg" alt="노을 지는 바닷가 풍경"> - 단순한 장식용 이미지는
alt=""와 같이 빈 값을 주어 스크린 리더가 건너뛰도록 합니다.
<a>태그의 링크 텍스트는 목적지를 명확히 설명해야 합니다. 여기 클릭, 더 보기와 같은 모호한 텍스트보다는 제품 상세 페이지로 이동, 문의하기와 같이 구체적인 텍스트를 사용해야 스크린 리더 사용자가 링크의 목적을 쉽게 이해할 수 있습니다.- 예:
<a href="product.html">아이폰 15 상세 정보 보기</a>
<label> 연결- 사용자가 값을 입력하는 text·email 같은 필드에는 보이는
<label>과 연결을 제공합니다. 숨김 필드는 같은 label 대상이 아니며, 제출 버튼은 버튼 안의 글자로 이름을 전달할 수 있습니다.label의for속성과input의id속성 값을 일치시켜 연결합니다. 이는 스크린 리더 사용자가 어떤 입력 필드에 대한 설명인지 알 수 있도록 돕습니다. 또한, 마우스로 레이블을 클릭해도 해당 입력 필드가 활성화됩니다. - 예:
<label for="username">사용자 이름:</label><input type="text" id="username">
- 모든 대화형 요소(링크, 버튼, 폼 필드)는 마우스뿐만 아니라 키보드의
Tab키로도 이동할 수 있어야 합니다. HTML의 기본 대화형 요소들은 이 기능을 자동으로 지원합니다. - 사용자가
Tab키를 눌렀을 때 초점이 이동하는 순서는 일반적으로 문서 순서를 따릅니다. 기본 라디오 그룹은 Tab으로 그룹에 들어간 뒤 방향키로 항목을 바꾸는 등, 컨트롤마다 세부 조작이 다를 수 있습니다. 화면의 시각적 순서와 초점 순서가 자연스럽게 이어지는지도 확인합니다. tabindex속성을 사용하여 탭 순서를 제어할 수 있지만, 꼭 필요한 경우가 아니라면 기본 순서에 맡기는 것이 좋습니다. (양수 값은 사용하지 않는 것이 원칙)
lang 속성 명시<html>태그에lang속성(lang="ko",lang="en")을 명시하여 문서의 주요 언어를 지정합니다. 이는 스크린 리더가 올바른 언어로 콘텐츠를 읽어줄 수 있도록 합니다.
- HTML만으로는 접근성을 완벽하게 구현하기 어려운 복잡한 UI 컴포넌트(탭 메뉴, 슬라이더 등)의 경우, ARIA 속성을 사용하여 보조 기술에 추가적인 정보를 제공할 수 있습니다.
- 예:
role="button",aria-label="메뉴 열기",aria-expanded="true"등. - ARIA는 강력하지만, 오용될 경우 오히려 접근성을 해칠 수 있으므로, HTML의 기본 기능을 최대한 활용한 후 보충적으로 사용하는 것이 권장됩니다. (First rule of ARIA: If you can use a native HTML element or attribute with the semantics and behavior you require, instead of re-purposing a non-semantic element and adding an ARIA role, state or property to it, then do so.)
접근성은 요소 선택, 접근 가능한 이름, 키보드 조작, 보조 기술 전달을 함께 점검합니다. div에 role="button"만 붙이면 역할 정보는 전달할 수 있어도 Tab 초점이나 Enter·Space 동작이 자동으로 생기지는 않습니다. 기본 button을 쓰면 해당 조작을 활용할 수 있습니다. WAI-ARIA APG의 역할 설명도 역할을 지정한 개발자가 필요한 동작을 제공해야 한다고 설명합니다.
이 절의 통합 다이어그램은 시맨틱 HTML과 접근성 속성이 접근성 트리로 이어지는 순서를 보여줍니다.
시맨틱 태그, 접근 가능한 이름, 키보드 흐름을 하나의 점검 기준으로 연결해 확인합니다.
실습: 시맨틱 구조로 개인 블로그 페이지 만들기
지금까지 배운 시맨틱 HTML과 접근성 고려 사항을 바탕으로 간단한 개인 블로그 페이지의 뼈대를 만들어 봅시다.
web-dev-practice폴더 안에blog.html파일을 새로 생성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 개발 블로그 - [여러분의 이름]</title>
<style>
/* 이 장에서는 HTML 구조에 집중하므로, CSS는 최소한으로만 포함합니다. */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
background-color: #f8f8f8;
color: #333;
}
.container {
max-width: 960px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
header, nav, main, article, aside, footer {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}
header { background-color: #e0f7fa; } /* 연한 하늘색 */
nav { background-color: #e6ffe6; } /* 연한 녹색 */
main { background-color: #fffacd; } /* 연한 노란색 */
article { background-color: #ffe0b2; } /* 연한 주황색 */
aside { background-color: #e3f2fd; } /* 연한 파란색 */
footer { background-color: #f2f2f2; } /* 연한 회색 */
nav ul { list-style: none; padding: 0; display: flex; justify-content: space-around; }
nav ul li a { text-decoration: none; color: #007bff; font-weight: bold; }
img { max-width: 100%; height: auto; display: block; margin-top: 15px; border-radius: 5px; }
.post-meta { font-size: 0.9em; color: #666; margin-top: 10px; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>[여러분의 이름]의 웹 개발 블로그</h1>
<p>프론트엔드 개발 학습 여정 기록</p>
</header>
<nav>
<ul>
<li><a href="#latest-posts">최신 글</a></li>
<li><a href="#categories">카테고리</a></li>
<li><a href="#about-me">소개</a></li>
<li><a href="#contact">문의</a></li>
</ul>
</nav>
<main id="about-me">
<h2>환영합니다!</h2>
<p>이곳은 제가 웹 개발을 학습하며 기록하는 공간입니다.</p>
<section id="latest-posts">
<h2>최신 게시물</h2>
<article>
<h3>HTML5 시맨틱 태그 마스터하기</h3>
<p class="post-meta">작성일: <time datetime="2025-06-14">2025년 6월 14일</time> | 카테고리: HTML</p>
<figure>
<figcaption>시맨틱 HTML 태그의 중요성을 나타내는 다이어그램</figcaption>
</figure>
<p>오늘은 HTML5에서 새롭게 도입된 시맨틱 태그들의 중요성에 대해 알아보았습니다. <code><header></code>, <code><nav></code>, <code><main></code>, <code><article></code>, <code><section></code>, <code><aside></code>, <code><footer></code> 등의 태그들은... <a href="blog-post-1.html" title="HTML5 시맨틱 태그 마스터하기 게시물 읽기">더 읽기</a></p>
</article>
<article>
<h3>CSS Flexbox로 레이아웃 잡기</h3>
<p class="post-meta">작성일: <time datetime="2025-06-10">2025년 6월 10일</time> | 카테고리: CSS</p>
<p>Flexbox는 CSS3에 도입된 강력한 레이아웃 모듈입니다. 요소들을 한 줄 또는 한 열로 효율적으로 배치하는 데 매우 유용합니다... <a href="blog-post-2.html" title="CSS Flexbox로 레이아웃 잡기 게시물 읽기">더 읽기</a></p>
</article>
</section>
</main>
<aside id="categories">
<h3>카테고리</h3>
<ul>
<li><a href="#">HTML (5)</a></li>
<li><a href="#">CSS (3)</a></li>
<li><a href="#">JavaScript (7)</a></li>
<li><a href="#">팁 & 트릭 (2)</a></li>
</ul>
<h3>최근 댓글</h3>
<p>아직 댓글이 없습니다.</p>
</aside>
<footer id="contact">
<p>© 2025 [여러분의 이름]. 모든 권리 보유.</p>
<a href="mailto:[email protected]" title="이메일로 문의하기">문의하기</a>
</footer>
</div>
</body>
</html>- Live Server를 통해
blog.html파일을 열어 보세요. - 메뉴의 최신 글·카테고리·소개·문의 링크를 눌러 해당 영역으로 이동하는지 확인합니다. 이동하지 않으면
href="#이름"과 대상 요소의id="이름"이 같은지 확인합니다.blog-post-1.html과blog-post-2.html상세 페이지는 이 예제에서 제공하지 않습니다. - 첫 게시물의
figure에는 아직 그림 없이 캡션만 있습니다. 그림이 보인다는 기대를 두지 말고, 실제로 그림을 넣을 때는 준비한 이미지나 SVG와 목적에 맞는 대체 설명을 함께 추가합니다.mailto:링크는 메일 앱을 여는 연결이며 문의를 서버에 저장하는 기능은 아닙니다.
이번 장에서는 웹 페이지의 구조에 의미를 부여하는 시맨틱 HTML과, 모든 사용자가 웹을 동등하게 이용할 수 있도록 하는 웹 접근성의 중요성에 대해 깊이 있게 다루었습니다.
모양을 유지한 채 의미를 바꾸면 무엇이 남을까요?
블로그의 h1을 같은 글자 크기의 div로 바꾸었다고 가정해 보세요. 눈으로 보이는 크기가 같아도 제목 탐색에서는 어떤 정보가 없어질까요? 이어 실제 예제에서 마우스를 놓고 Tab·Shift+Tab으로 링크를 이동하고 Enter로 메뉴를 실행합니다. 초점이 어디에 있는지 보이는지, 메뉴 글자가 목적지를 설명하는지, 이동한 영역의 제목 계층이 이어지는지를 각각 기록하세요.
관찰과 한계 확인
CSS의 글자 크기만으로는 h1의 제목 역할이 생기지 않습니다. 메뉴는 실제 href와 대상 id로 연결되고, 키보드 이동에서는 현재 초점과 실행 결과를 함께 확인합니다. 첫 게시물의 상세 페이지 링크는 대상 파일을 따로 만들기 전에는 내용을 열 수 없습니다. 이 작은 검사는 제목·이동·초점의 일부를 확인한 것이며 색 대비나 보조 기술 조합까지 접근성 전체를 검증한 것은 아닙니다.