<main>

HTML <main> 요소는 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.

hidden 속성 없이는 문서에 하나보다 많은 <main> 요소가 존재해선 안됩니다.

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 플로우 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 요소. 단, 구조적으로 올바른 <main> 요소여야 합니다.
가능한 ARIA 역할 기본적으로 main 역할 포함, presentation 가능.
DOM 인터페이스 HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

<main> 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.

<main>은 요소 개요에 영향을 주지 않습니다. <body> 등의 요소나 <h2>와 같은 제목 요소와 달리 <main>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.

예제

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  
  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

<!-- other content -->

접근성 고려사항

랜드마크

<main> 요소는 main 랜드마크 역할과 동일하게 행동합니다. 랜드마크는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, role="main"보다 <main> 요소를 사용하세요.

건너뛰기 링크

건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.

<main> 요소에 id 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.

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

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

읽기 모드

브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 <main> 요소와 더불어 제목콘텐츠 구획 요소를 사용합니다.

명세

Specification Status Comment
HTML Living Standard
The definition of '<main>' in that specification.
Living Standard
HTML 5.1
The definition of '<main>' in that specification.
Recommendation No change from HTML5.
HTML5
The definition of '<main>' in that specification.
Recommendation Initial definition.

브라우저 호환성

대부분의 브라우저에서 <main> 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <main> 요소에 "main" ARIA 역할을 명시해 접근성을 확보하는 것이 좋습니다.

<main role="main">
  ...
</main>
Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mainChrome Full support 26Edge Full support 12Firefox Full support 21IE No support NoOpera Full support 16Safari Full support 7WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 21Opera Android Full support YesSafari iOS Full support 7Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

같이 보기