<main> 태그의 정의 및 사용법

<main> 태그는
HTML 문서의 주요 내용(dominant contents)을 나타냅니다.

  • 주요 내용은 문서의 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 내용으로 구성됩니다.
  • HTML 문서에는 hidden 속성이 지정되지 않은 두 개 이상의 <main> 요소가 없어야 합니다.
HTML hidden 속성
HTML 
<!DOCTYPE html>
<html>
    <head>
        <title>웹 페이지 제목</title>
    </head>
    <body>
        <header>
            <!-- 웹 페이지 헤더 내용 -->
        </header>
        <nav>
            <!-- 네비게이션 메뉴 -->
        </nav>
        <main>
            <!-- 웹 페이지의 주요 콘텐츠 영역 -->
            <h1>주요 제목</h1>
            <p>주요 내용...</p>
            <!-- 기타 콘텐츠 -->
        </main>
        <footer>
            <!-- 웹 페이지 푸터 내용 -->
        </footer>
    </body>
</html>

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

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

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

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

HTML 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>

접근성 고려사항

랜드마크

HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다. 웹 페이지를 이해하고 탐색하는 데 도움을 주며, 스크린 리더 및 다른 보조 기술을 사용하는 사용자에게 페이지의 레이아웃 및 구조를 전달하는 데 중요한 역할을 합니다.

ARIA Landmarks Example을 참조하시기 바랍니다.

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

HTML role 속성

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

HTML <div> 태그 - 올바른 이해와 사용 방법
HTML 
<div role="main">
    <h1메인 콘텐츠 제목</h1>
    .... 메인 콘텐츠 영역 ....
</div>

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

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

네비게이션 건너뛰기 링크

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

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

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

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

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

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

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

브라우저 호환성

main 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<main> 26 12 21 7

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

main 태그의 명세서 사양
명세서 사양
<main> HTML Standard
#the-main-element

참고문헌

같이 보기