HTML <main> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

<main> 태그는
문서의 메인 영역을 나타냅니다.

이 태그는 문서의 핵심 주제나 애플리케이션의 주요 기능 등 주요 콘텐츠(dominant content)를 포함하는 영역을 의미합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>웹 페이지 제목</title>
    </head>
    <body>
        <header>
            <!-- 웹 페이지 헤더 내용 -->
        </header>
        <nav>
            <!-- 네비게이션 메뉴 -->
        </nav>
        <main>
            <!-- 웹 페이지의 주요 콘텐츠 영역 -->
            <h1>주요 제목</h1>
            <p>주요 내용...</p>
            <!-- 기타 콘텐츠 -->
        </main>
        <footer>
            <!-- 웹 페이지 푸터 내용 -->
        </footer>
    </body>
</html>

<main> 태그의 내용은 문서 고유의 내용이어야 하며, 사이드바, 네비게이션 링크, 저작권 정보, 사이트 로고, 검색 양식 등 문서 또는 문서 섹션 전체에 걸쳐 반복되는 내용은 검색 양식이 페이지의 주요 기능이 아닌 한 포함되지 않아야 합니다.

주의할 점

문서에는 hidden 속성이 지정되지 않은 <main> 태그가 두 개 이상 있어서는 안 됩니다.

명세에 따르면 <main>는 문서 내에서 한 번만 사용해야 합니다.
이 규칙은 문서의 구조를 명확하게 유지하고 웹 페이지를 올바르게 해석하기 위해 따라야 하는 중요한 규칙 중 하나입니다.

만일 SPA(단일 페이지 애플리케이션)을 자바스크립트로 서버의 왕복 없이 콘텐츠를 구현하기 위해서 <main> 태그 여러 개를 미리 마크업할 경우에는 현재 보여지는 콘텐츠가 아닌 <main> 요소는 hidden 속성을 사용해서 숨겨야 합니다.

다음 예제를 참조하시기 바랍니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>단일 페이지 애플리케이션</title>
        <link rel="stylesheet" href="spa.css">
        <script src=spa.js async></script>
    </head>
    <body>
        <nav>
            <!-- 링크를 클릭하면
            자바스크립트로 서버의 왕복 없이
            관련 main 콘텐츠를 동적으로 구현 -->
            <a href=/>Home</a>
            <a href=/about>About</a>
            <a href=/contact>Contact</a>
        </nav>
        <main>
            <h1>Home</h1>
            …
        </main>
        <main hidden>
        <h1>About</h1>
            …
        </main>
        <main hidden>
        <h1>Contact</h1>
            …
        </main>
    </body>
</html>

올바른 구문 구조

<main> 태그는 주요 콘텐츠(dominant content)를 포함하는 영역을 나타내므로, HTML 문서 내에서도 이 주요 콘텐츠가 잘 드러나도록 올바른 위치에 있어야 합니다.

<main> 태그가 올바른 위치에 있지 않으면 HTML 문서 전체의 의미론적인 측면에서 구조의 파악 등에 문제가 될 수 있습니다. 이러한 이유로 인해서 <main> 태그는 다음과 같은 HTML 계층 구조에 위치해야 합니다.

<html>, <body>, <div>, <form> 등의 제한적인 부모 요소 아래에만 위치해야 합니다.
독립적인 사용자 정의 태그(Autonomous custom elements)를 부모 요소로 사용할 수 있습니다.
이들 부모 요소는 의미론적 측면에서 그 태그 고유의 의미를 바꾸는 WAI-ARIA(role 속성으로)을 가지고 있지 말아야 하는 것을 원칙으로 합니다.

접근성 고려 사항

HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다.
이러한 랜드마크 요소들은 웹 페이지 내 특정 영역(예: 헤더, 메인, 푸터, 사이드바 등)을 정의하는 특별한 시멘틱 역할을 가지며, 웹 페이지를 이해하고 탐색하기 쉽게 만들고, 스크린 리더 및 기타 보조 기술을 사용하는 사용자에게 페이지의 레이아웃과 구조를 전달하는 데 중요한 역할을 합니다.

좀 더 자세한 내용은 ARIA Landmarks Example을 참조하시기 바랍니다.

<main> 태그는 페이지의 주요 콘텐츠 영역을 나타내며, 페이지 내의 핵심 내용을 포함합니다. role 속성의 값은 main입니다.

다음은 <main> 태그를 사용하지 않고 <div> 태그에 role="main"를 사용해서 메인에 해당하는 랜드마크로 사용되는 예입니다.

HTML 제목(<h1>~<h6>) 태그

브라우저 호환성 문제로 <main> 태그를 사용할 수 없는 경우를 제외하고, role="main" 사용 보다는 <main> 태그를 사용하세요.

네비게이션 건너뛰기 링크

대부분의 페이지에서 키보드 및 스크린 리더 사용자는 메인 콘텐츠에 도달하기 전에 탐색 링크 및 기타 요소의 긴 목록을 탐색해야 합니다. 이는 일부 형태의 운동 장애가 있는 사용자에게 특히 어려울 수 있습니다. 메인 콘텐츠에 도달하기 전에 사용자가 여러 번 동작을 수행하도록 요구하는 것은 접근성 장벽이 됩니다.

물론 마우스를 사용하는 시각이 있는 사람들은 이와 같은 웹 페이지에 아무런 문제가 없습니다. 그들은 거의 즉시 페이지를 훑어보고 주요 콘텐츠가 어디에 있는지 확인할 수 있습니다.

네비게이션 건너뛰기 링크는 화면 리더와 키보드 사용자에게 주요 콘텐츠로 바로 이동하는 기능을 제공합니다.

HTML

<body>
    <a href="#main-content">네비게이션 건너뛰기</a>

    <!-- 네비게이션과 header 콘텐츠 -->

    <main id="main-content">
        <!-- 메인 콘텐츠 내용 -->
    </main>
</body>

이를 통해 사용자는 페이지의 주요 내용에 더 빨리 액세스할 수 있습니다.