<main>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

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

시도해 보기

<header>Gecko facts</header><main>  <p>    Geckos are a group of usually small, usually nocturnal lizards. They are    found on every continent except Antarctica.  </p>  <p>    Many species of gecko have adhesive toe pads which enable them to climb    walls and even windows.  </p></main>

header {  font:    bold 7vw Arial,    sans-serif;}

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

콘텐츠 카테고리	플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠	플로우 콘텐츠.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	플로우 콘텐츠를 허용하는 요소. 단,구조적으로 올바른`<main>` 요소여야 합니다.
가능한 ARIA 역할	기본적으로`main` 역할 포함,`presentation` 가능.
DOM 인터페이스	`HTMLElement`

특성

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

사용 일람

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

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

예제

html

<!-- 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 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.

html

<body>  <a href="#main-content">Skip to main content</a>  <!-- navigation and header content -->  <main>    <!-- main page content -->  </main></body>