HTML5 <main> 태그란?
HTML5에서 새롭게 도입된 <main> 태그는 문서 또는 웹 애플리케이션에서 핵심이 되는 주요 콘텐츠 영역을 지정합니다. 이 태그로 감싸인 내용은 해당 페이지에만 존재하는 고유한 정보여야 하며, 사이트 전체에서 반복되는 로고, 내비게이션 메뉴, 검색 폼, 저작권 정보 등은 포함하지 않습니다.
주요 사용 규칙
- 한 페이지에서 <main> 요소는 단 한 번만 사용할 수 있습니다.
- <article>, <aside>, <footer>, <header>, <nav> 요소의 하위(descendant)로 배치할 수 없습니다.
- 스크린 리더가 'main' 랜드마크로 인식하기 때문에 웹 접근성 향상에도 도움이 됩니다.
예제
다음 코드를 실행하면 HTML 문서에서 주요 콘텐츠를 표시하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <main> <h1>학습</h1> <p>배움을 통해 경험을 쌓고, 자신의 지식을 다른 사람들과 나누어 보세요.</p> <article> <h3>웹 개발 튜토리얼</h3> <p>2학기 시험 대비를 위한 CSS, HTML, PHP 튜토리얼로 구성되어 있습니다.</p> </article> <article> <h3>학술 튜토리얼</h3> <p>1학기 시험 대비를 위한 컴퓨터 기초, 컴퓨터 네트워크 튜토리얼로 구성되어 있습니다.</p> </article> </main> </body> </html>
정리
<main> 태그는 문서의 구조를 명확하게 만들어 주고, 검색 엔진 최적화(SEO)와 스크린 리더 기반의 접근성 측면에서도 유리합니다. Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 잘 지원되므로, 페이지의 본문 콘텐츠를 감쌀 때 적극적으로 활용하는 것이 좋습니다.