시맨틱 HTML과 접근성

지금까지 HTML 문서의 기본 구조와 텍스트, 링크, 이미지, 목록, 표, 폼을 표현하는 방법을 익혔습니다. 이 글에서는 화면에 내용을 보이게 하는 데서 한 걸음 더 나아가, 문서에 의미를 부여하고 누구나 쓸 수 있는 페이지를 만드는 방법을 다룹니다. 요소의 의미를 살려 쓰는 시맨틱 HTML(semantic HTML)과, 장애가 있는 사용자도 웹을 이용할 수 있게 하는 웹 접근성(web accessibility)의 기본을 살펴봅니다.

<button>저장</button>

<label for="email">
  이메일
</label>
<input id="email"
  type="email" required>

<nav aria-label="주 메뉴">
  <a href="/">홈</a>
</nav>

<div role="button">저장</div>

위 그림은 HTML 요소가 보조 기술과 키보드 사용자에게 각각 무엇을 제공하는지 보여 줍니다. 브라우저는 button, label과 input, nav와 a 같은 네이티브 HTML 요소의 의미를 역할, 이름, 상태라는 접근성 정보로 바꿔 접근성 API에 전달하고, 스크린 리더 같은 보조 기술은 이 정보로 내용을 읽어 주거나 영역 사이를 이동합니다. 이와 별개로 네이티브 요소는 button의 Tab 이동과 Enter, Space 활성화 같은 기본 키보드 동작도 함께 제공합니다.

그림의 두 가지 갈래는 서로 다른 관계입니다. 접근성 트리가 키보드 동작을 만들어 내는 것은 아니며, nav 자체가 Tab 키로 멈추는 곳이 되는 것도 아닙니다. 그림 아래쪽의 예처럼 <div role="button">은 버튼이라는 역할 정보만 전할 뿐, 기본 버튼의 초점 이동과 Enter, Space 동작은 생기지 않습니다. 그래서 가능하면 처음부터 button을 씁니다.

시맨틱 HTML

시맨틱(semantic)은 ‘의미의’라는 뜻입니다. 시맨틱 HTML은 요소 자체가 내용의 의미를 분명히 전하도록 HTML을 쓰는 방식을 말합니다. 예를 들어 제목을 <div>로 만들고 CSS로 글씨를 키울 수도 있지만, <h1>을 쓰면 브라우저와 검색 엔진, 스크린 리더 모두 그 요소가 페이지의 가장 중요한 제목이라는 것을 알 수 있습니다.

시맨틱 HTML을 쓰면 다음과 같은 장점이 있습니다.

• 검색 엔진이 내용을 잘 파악합니다: 검색 엔진은 <h1>으로 페이지의 주제를, <nav>로 내비게이션 영역을 파악하므로 페이지의 구조와 중요한 내용을 더 정확히 이해합니다.
• 접근성이 좋아집니다: 스크린 리더는 시맨틱 요소로 페이지의 구조를 파악해 사용자에게 알려 줍니다. <table>은 표로, <header>는 머리글 영역으로 알려 주므로 사용자가 내용을 이해하고 이동하기 쉽습니다.
• 코드를 읽고 고치기 쉽습니다: <div>와 <span>만으로 된 코드보다 <nav>, <aside>, <article>로 구조를 나눈 코드가 다른 개발자나 나중의 나에게 훨씬 읽기 쉽습니다. 개발자 도구에서 구조를 볼 때나 CSS 선택자를 쓸 때도 마찬가지입니다.

주요 시맨틱 요소

HTML에는 페이지의 영역을 나타내는 여러 시맨틱 요소가 있습니다. <header>는 페이지나 섹션의 머리글로, 제목, 로고, 내비게이션 링크가 주로 들어갑니다.

<header>
    <h1>나의 블로그</h1>
    <nav>
        <a href="/">홈</a>
        <a href="/about">소개</a>
    </nav>
</header>

위 예에서는 사이트 이름인 <h1>과 메뉴인 <nav>가 함께 머리글을 이룹니다. <header>는 화면 맨 위라는 위치가 아니라 이어지는 내용을 소개하는 부분이라는 의미를 나타내므로, 화면의 어디에 보일지는 CSS로 따로 정합니다.

<nav>는 메뉴나 목차처럼 주요 내비게이션 링크를 묶는 영역입니다. 다음 예처럼 링크를 <ul>과 <li>로 감싸면 링크들이 나란한 항목의 목록이라는 구조도 함께 드러납니다. 페이지의 모든 링크를 <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 안에도 그 글의 header나 footer를 둘 수 있습니다.

<article>
    <h2>오늘의 뉴스: 웹 개발 동향</h2>
    <p>최근 웹 개발 분야에서는 새로운 기술들이 빠르게 등장하고 있습니다.</p>
    <footer>
        <p>작성자: 김웹 | 날짜: 2025-06-14</p>
    </footer>
</article>

<section>은 주제가 있는 한 묶음의 내용으로, 보통 <h2> 같은 제목으로 시작합니다. 아무 의미 없이 스타일을 위해 묶을 때는 <div>를 쓰고, 제목을 붙일 만한 주제 단위로 나눌 때 <section>을 씁니다.

<section>
    <h2>회사 비전</h2>
    <p>우리는 기술을 통해 세상을 더 좋게 만듭니다.</p>
</section>
<section>
    <h2>연혁</h2>
    <p>2020년: 회사 설립</p>
    <p>2022년: 첫 번째 제품 출시</p>
</section>

두 <section>이 각각 <h2> 제목으로 시작하므로, 제목만 훑어도 이 내용이 '회사 비전'과 '연혁' 두 부분으로 나뉜다는 것을 알 수 있습니다.

<aside>는 사이드바, 관련 링크, 광고처럼 주요 내용과 간접적으로 관련된 내용입니다. 다음의 인기 게시물 목록처럼 빼더라도 본문을 이해하는 데 지장이 없는 내용이 알맞습니다. 흔히 화면 옆에 배치하지만, 위치는 CSS가 정하고 <aside>는 의미만 나타냅니다.

<aside>
    <h3>인기 게시물</h3>
    <ul>
        <li><a href="#">HTML5 필수 태그</a></li>
        <li><a href="#">CSS Flexbox 완벽 가이드</a></li>
    </ul>
</aside>

<footer>는 페이지나 섹션의 바닥글로, 저작권, 연락처, 관련 링크가 들어갑니다. 다음 예의 ©는 저작권 기호 ©를 나타내는 문자 참조(character reference)로, 브라우저가 화면에 기호로 바꿔 보여 줍니다.

<footer>
    <p>&copy; 2026 나 혼자 웹 개발. 모든 권리 보유.</p>
    <p>문의: [email protected]</p>
</footer>

<figure>와 <figcaption>은 이미지, 다이어그램, 코드처럼 본문에서 참조하는 독립된 내용과 그 설명을 묶습니다. <figcaption>은 <figure>의 첫 번째나 마지막 자식으로 둡니다. 이미지의 alt가 이미지를 볼 수 없을 때 대신 읽히는 텍스트라면, <figcaption>은 모든 사람에게 화면에 보이는 설명이라는 점이 다릅니다.

<figure>
    <img src="code_example.png" alt="HTML 코드 예시">
    <figcaption>그림 1. 시맨틱 HTML 구조의 예시 코드</figcaption>
</figure>

이 밖에도 인용문을 나타내는 <blockquote>, 날짜와 시간을 나타내는 <time>, 강조 표시를 나타내는 <mark> 같은 요소가 있습니다. 중요한 것은 요소를 외우는 것이 아니라, 각 내용의 역할과 의미에 가장 알맞은 요소를 고르는 습관입니다.

더 깊이: 같은 header라도 랜드마크가 되지 않을 때

스크린 리더가 영역 사이를 바로 이동하게 해 주는 것은 요소의 이름 자체가 아니라, 브라우저가 그 요소에 붙이는 암묵적 ARIA 역할(implicit ARIA role)입니다. 그런데 이 역할은 요소가 놓인 위치에 따라 달라집니다. <header>는 body 바로 아래처럼 다른 구획 안에 있지 않을 때만 사이트 전체의 머리글을 뜻하는 banner 랜드마크가 되고, <article>, <aside>, <main>, <nav>, <section> 안에 들어가면 랜드마크가 아닌 역할이 됩니다. 이 역할을 MDN은 generic으로 적고 2026년 10월의 HTML-AAM 초안은 sectionheader로 적지만, 어느 쪽이든 랜드마크는 아닙니다. <footer>도 같은 규칙으로 구획 바깥에서는 contentinfo 랜드마크가 되고, 구획 안에서는 랜드마크가 아닌 역할(초안의 sectionfooter)이 됩니다.

그래서 article 안에 둔 <header>는 그 글의 제목과 소개를 묶는 머리말일 뿐, 스크린 리더의 랜드마크 목록에는 나타나지 않습니다. 이렇게 랜드마크가 아니게 된 <header>에는 aria-label로 이름을 붙여도 랜드마크가 되지 않습니다. 페이지 전체의 머리글과 바닥글은 이런 구획 요소와 main의 바깥에 두어야 랜드마크로 찾을 수 있다는 뜻입니다.

<section>도 조건이 있습니다. aria-label이나 aria-labelledby로 접근 가능한 이름(accessible name)을 붙여야 region 랜드마크가 되고, 이름이 없으면 generic으로 남습니다. 랜드마크로 이동하게 하고 싶은 중요한 구획이라면 <section aria-labelledby="vision-title">처럼 그 구획의 제목 id를 이름으로 연결합니다. 요소마다 정해진 역할은 MDN 각 요소 문서의 기술 요약에 있는 Implicit ARIA role 항목에서 확인할 수 있습니다.

웹 접근성: 모두를 위한 웹

웹 접근성은 장애가 있는 사람이나 고령자처럼 신체적, 인지적 제약이 있는 사용자를 포함해 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 하는 것입니다. 시각 장애가 있는 사용자는 화면의 내용을 음성으로 읽어 주는 스크린 리더를, 손을 쓰기 어려운 사용자는 키보드나 대체 입력 장치를 써서 웹을 이용합니다. 많은 나라가 공공 웹사이트의 접근성을 법으로 요구하고 있으며, 접근성을 고려해 만든 페이지는 이런 보조 기술이 내용을 올바르게 전달할 수 있게 합니다.

접근성의 많은 부분은 HTML을 올바르게 쓰는 것만으로 갖춰집니다.

• 시맨틱 요소를 씁니다: <header>, <nav>, <main>, <article>, <aside>, <footer>로 영역을 나누면 스크린 리더가 사용자에게 영역을 알려 주고 영역 사이를 바로 이동하게 합니다. 제목은 <h1>, <h2>로 계층을 맞추고, 목록은 <ul>, <ol>, <dl>로 씁니다.
• 이미지에 알맞은 alt를 줍니다: 텍스트, 링크, 이미지 다루기에서 본 것처럼, 정보를 전하는 이미지에는 <img src="sunset.jpg" alt="노을 지는 바닷가 풍경">처럼 그 내용을 설명하는 alt를 줍니다. 장식용 이미지는 alt=""로 비워 스크린 리더가 건너뛰게 합니다.
• 링크 글자로 목적지를 알립니다: 스크린 리더 사용자는 페이지의 링크만 모아 듣기도 하므로, “여기 클릭”이나 “더 보기”처럼 모호한 글자보다 <a href="product.html">아이폰 15 상세 정보 보기</a>처럼 목적지를 알 수 있는 글자를 씁니다.
• 입력 필드에 레이블을 연결합니다: 사용자가 값을 입력하는 필드에는 보이는 <label>을 두고, for 값과 입력의 id를 같게 해 연결합니다. 예를 들어 <label for="username">사용자 이름:</label><input type="text" id="username">처럼 씁니다. 그러면 스크린 리더가 입력에 초점이 갔을 때 레이블을 읽어 주고, 레이블을 클릭해도 입력에 초점이 갑니다. 제출 버튼은 버튼 안의 글자가 이름이 되므로 따로 레이블이 필요하지 않습니다.
• 키보드로 모두 쓸 수 있게 합니다: 링크, 버튼, 폼 필드 같은 대화형 요소는 마우스뿐 아니라 키보드로도 쓸 수 있어야 하며, HTML의 기본 대화형 요소는 이 기능을 자동으로 제공합니다. Tab 키를 누를 때 초점은 보통 문서의 순서대로 이동하므로, 화면에 보이는 순서와 초점의 순서가 자연스럽게 이어지는지 확인합니다. 라디오 버튼 그룹처럼 Tab으로 그룹에 들어간 뒤 방향키로 항목을 바꾸는 요소도 있습니다. tabindex 속성으로 순서를 바꿀 수 있지만 꼭 필요할 때만 쓰고, 양수 값은 쓰지 않습니다.
• 문서의 언어를 밝힙니다: <html lang="ko">처럼 lang 속성을 적으면 스크린 리더가 알맞은 언어의 발음으로 읽어 줍니다.

HTML 요소만으로 표현하기 어려운 탭 메뉴나 슬라이더 같은 복잡한 부품에는 ARIA(Accessible Rich Internet Applications) 속성으로 보조 기술에 정보를 더할 수 있습니다. 예를 들어 aria-label="메뉴 열기"는 이름을, aria-expanded="true"는 펼쳐진 상태를 알려 줍니다. 하지만 ARIA는 정보만 바꿀 뿐 동작은 만들지 않으므로, 잘못 쓰면 오히려 접근성을 해칩니다. 그래서 W3C는 필요한 의미와 동작을 가진 HTML 요소가 있다면 ARIA를 덧붙이기보다 그 요소를 먼저 쓰라고 권합니다. WAI-ARIA 작성 지침도 역할을 지정했다면 그 역할에 맞는 동작을 개발자가 직접 만들어야 한다고 설명합니다.

실습: 시맨틱 구조의 블로그 페이지

배운 내용으로 개인 블로그 페이지의 뼈대를 만들어 봅니다. web-dev-practice 폴더에 blog.html을 만들고 다음 코드를 씁니다. 이 글은 HTML 구조에 집중하므로, CSS는 각 영역을 색으로 구분해 볼 정도로만 넣었습니다.

<!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; /* padding이 너비에 포함되도록 */
        }
        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; }
        .post-meta { font-size: 0.9em; color: #666; margin-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>[여러분의 이름]의 웹 개발 블로그</h1>
            <p>프론트엔드 개발 학습 여정 기록</p>
        </header>

        <nav aria-label="주 메뉴">
            <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>
                    <p>오늘은 HTML5에서 새롭게 도입된 시맨틱 태그들의 중요성에 대해 알아보았습니다. <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;footer&gt;</code> 등의 태그들은...</p>
                    <p><a href="blog-post-1.html">‘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는 요소를 한 줄이나 한 열로 배치하는 CSS 레이아웃 모듈입니다. 메뉴나 카드 목록을 나란히 놓을 때 특히 유용합니다...</p>
                    <p><a href="blog-post-2.html">‘CSS Flexbox로 레이아웃 잡기’ 전체 글 읽기</a></p>
                </article>
            </section>
        </main>

        <aside id="categories">
            <h2>카테고리</h2>
            <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="#">팁 &amp; 트릭 (2)</a></li>
            </ul>
            <h2>최근 댓글</h2>
            <p>아직 댓글이 없습니다.</p>
        </aside>

        <footer id="contact">
            <p>&copy; 2026 [여러분의 이름]. 모든 권리 보유.</p>
            <a href="mailto:[email protected]">이메일로 문의하기</a>
        </footer>
    </div>
</body>
</html>

<nav>의 aria-label="주 메뉴"는 이 내비게이션 영역에 이름을 붙입니다. 스크린 리더는 이 영역을 “주 메뉴, 내비게이션”처럼 알려 주며, 한 페이지에 내비게이션이 여러 개 있을 때 서로 구분하는 데 쓰입니다. 두 게시물의 링크 글자에는 글 제목을 넣었으므로, 링크만 모아 들어도 어느 글로 가는지 알 수 있습니다. aside의 제목은 main 안의 h2와 같은 단계로 맞춰, 문서 전체의 제목 계층이 h1 아래에 h2가 오고 그 아래에 h3이 오도록 했습니다.

Live Server로 blog.html을 열고 메뉴의 최신 글, 카테고리, 소개, 문의 링크를 눌러 각 영역으로 이동하는지 확인합니다. 이동하지 않으면 href="#이름"과 목적지의 id="이름"이 같은지 확인합니다. 게시물의 상세 페이지인 blog-post-1.html과 blog-post-2.html은 이 예제에 들어 있지 않으므로 눌러도 열리지 않습니다. 맨 아래의 mailto: 링크는 사용자의 메일 프로그램을 여는 링크이며, 문의를 서버에 저장하는 기능은 아닙니다.

정리

• 시맨틱 HTML은 요소 자체로 내용의 의미를 전하며, 검색 엔진과 보조 기술, 다른 개발자가 문서의 구조를 이해하게 합니다.
• header, nav, main, article, section, aside, footer로 페이지의 영역을 나누고, main은 한 페이지에 하나만 둡니다.
• 정보 이미지에는 내용을 설명하는 alt를, 장식 이미지에는 빈 alt를 주고, 링크 글자로 목적지를 알립니다.
• 입력 필드에는 label을 연결하고, 모든 대화형 요소를 키보드로 쓸 수 있는지 Tab 키로 확인합니다.
• ARIA는 정보만 더할 뿐 동작은 만들지 않으므로, 필요한 의미와 동작을 가진 HTML 요소를 먼저 씁니다.

연습 문제

1. h1을 div로 바꾸면

블로그의 <h1>을 같은 글자 크기의 <div>로 바꿨습니다. 눈으로 보기에는 똑같습니다. 스크린 리더 사용자에게는 무엇이 달라질까요?

2. 키보드로 둘러보기

마우스를 쓰지 않고 블로그 페이지를 Tab 키와 Shift+Tab 키로 둘러봤습니다. 초점은 어떤 순서로 어떤 요소에 멈출까요? nav나 main 같은 영역 자체에도 멈출까요?

3. div에 role="button"

<div role="button" onclick="save()">저장</div>으로 저장 버튼을 만들었습니다. 마우스로 클릭하면 잘 동작합니다. 키보드 사용자와 스크린 리더 사용자에게는 어떤 문제가 있을까요?

다음 글 HTML5 신규 요소와 API에서는 오디오와 비디오, 새로운 입력 유형처럼 HTML5에서 추가된 요소와 기능을 다룹니다.