<main>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
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 |
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
예제
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 -->
접근성 고려사항
랜드마크
건너뛰기 링크
건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.
<main>
요소에 id
요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.
html
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
읽기 모드
명세
Specification |
---|
HTML # the-main-element |
브라우저 호환성
대부분의 브라우저에서 <main>
요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <main>
요소에 "main"
ARIA 역할을 명시해 접근성을 확보하는 것이 좋습니다.
html
<main role="main">...</main>