main element - by. UXKM

2024-07-30

main element 설명

<main> 요소는 문서나 앱 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적으로 연관된 콘텐츠들로 이루어집니다.
<main> 요소는 대부분의 인터넷 익스플로러 11 이하를 제외한 브라우저에서 지원합니다.
따라서 "main" ARIA role 속성을 <main> 요소에 추가해 인터넷 익스플로러에서도 접근성을 확보하는 편이 좋습니다.

<main> 요소의 콘텐츠는 사이드 바나, 내비게이션 링크, 저작권 정보, 사이트 로고, (문서의 주요 기능이 검색 폼이 아닐 경우)검색 폼과 같은 모든 문서에 반복적으로 있는 어떠한 콘텐츠라도 제외되어야 하며 문서 안에 가장 유일한 요소여야 합니다.
한 문서에 반복적으로 사용하는 경우 hidden 속성으로 표시하여 사용해야 합니다.
hidden 속성 없이는 문서에 하나보다 많은 <main> 요소가 존재해선 안됩니다.

main 요소를 하나 이상 사용할 때 올바른 예

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

							<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>

							<main>...</main>
							<main hidden>...</main>
							<main hidden>...</main>

main 요소를 하나 이상 사용할 때 잘못된 예

							<main>...</main>
							<main>...</main>
							<main>...</main>