HTML <main>: 주요 콘텐츠 영역 요소

ALATTA

HTML <main>: 주요 콘텐츠 영역 요소

HTML <main> 요소는 문서의 주요 콘텐츠 영역을 나타냅니다. 주요 콘텐츠 영역은 문서의 주제와 직접 연관되거나 주제를 확장하는 콘텐츠일 수도 있고, 애플리케이션의 주요 기능 영역일 수도 있습니다.

<header>
  <h1>딸기의 종류</h1>
  <p>아무개 지음</p>
  <header>
    <main>
      <article>
        <h2>설향</h2>
        <p>설향은 한국의 대표적인 딸기 품종입니다.</p>
        <p>...</p>
      </article>
      <article>
        <h2>매향</h2>
        <p>매향은 국내에서 수출용으로 많이 재매하는 품종입니다.</p>
        <p>...</p>
      </article>
    </main>
  </header>
</header>

main {
  background: #f6f6f6;
  color: #000;
  padding: 8px 16px;
}
article {
  background: #fff;
  border: 1px solid #ccc;
  margin: 16px 0;
  padding: 8px;
}
h1,
h2 {
  margin: 0;
}

라이브 에디터 (편집 가능)

    • 불러오는 중...

    특성

    전역 특성만 포함합니다.

    사용 일람

    • <main> 요소의 콘텐츠는 문서에 고유해야 합니다. 사이드바, 탐색 링크, 로고 등 다른 문서나 같은 문서의 다른 구획에서 반복해 나타날 수 있는 콘텐츠는 포함해서는 안됩니다. 검색 창과 같은 것도 해당하는 내용이지만, 페이지의 주요 기능이 검색인 경우 <main> 안에 배치할 수 있습니다.

    접근성

    랜드마크

    <main> 요소는 main 랜드마크 역할과 같이 동작합니다. 접근성 보조 기술은 랜드마크를 이용해 문서의 큰 구획을 식별하고 탐색할 수 있습니다. 구형 브라우저를 지원해야 하는 경우가 아니면 role="main" 특성보다는 <main> 요소를 사용하세요.

    스킵 내비게이션

    스킵 내비게이션은 보조 기술 사용자가 탐색 바, 정보 배너 등 중요하지 않은 콘텐츠를 건너뛰고, 페이지의 주요 내용으로 빠르게 이동할 방법을 제공하는 기법입니다. <main> 요소에 id 특성을 지정해서 스킵 내비게이션 대상으로 지정하세요.

    <body>
  <a href="#main-content">Skip to main content</a>

  <!-- 탐색 및 헤더 콘텐츠 -->

  <main id="main-content">
    <!-- 페이지의 주 콘텐츠 -->
  </main>
</body>

    읽기 모드

    브라우저의 “읽기 모드” 기능은 콘텐츠의 헤딩, 구획 요소와 함께 <main> 요소의 존재 여부를 고려해 읽기 뷰로 변환합니다.

    명세

    HTML Standard

    브라우저 호환성

    MDN browser-compat-data
    데스크톱모바일
    iOSAndroid
    SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
    main

    같이 보기