<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.
HTML <main>
요소는 문서 <body>
의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
시도해보기
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 Standard # the-main-element |
브라우저 호환성
BCD tables only load in the browser
대부분의 브라우저에서 <main>
요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <main>
요소에 "main"
ARIA 역할을 명시해 접근성을 확보하는 것이 좋습니다.
html
<main role="main">...</main>