HTML의 <main> 요소는 웹 페이지에서 가장 핵심적인 콘텐츠를 담는 컨테이너입니다. 이 글에서는 <main> 태그의 역할, 사용 규칙, 그리고 다른 시맨틱 요소와의 차이점까지 자세히 알아보겠습니다.
<main> 요소란 무엇인가?
HTML <main> 요소는 <body> 내부에서 문서의 주요 콘텐츠, 즉 페이지의 중심이 되는 부분을 나타내는 컨테이너로 사용됩니다. 브라우저와 스크린 리더는 이 요소를 통해 "여기가 이 페이지의 핵심 내용"임을 인식할 수 있습니다.
다음은 <main> 요소가 실제로 어떻게 배치되는지 보여주는 기본적인 예시입니다.
<body>
<header><!-- 헤더 콘텐츠 --></header>
<main>
<article>
<h3>Google Chrome</h3>
<p>단락</p>
</article>
<article>
<h3>제목</h3>
<p>단락</p>
</article>
<article>
<h3>제목</h3>
<p>단락</p>
</article>
</main>
<footer><!-- 푸터 콘텐츠 --></footer>
</body><header>, <footer>와의 차이점
<main> 요소에는 문서의 주제와 직접 관련된 핵심 콘텐츠만 들어갑니다. 반면 <header>와 <footer>에도 콘텐츠(주로 로고나 링크)가 포함되지만, 이들은 사이트의 본문이라고 할 수 없습니다. 그렇기 때문에 이 두 요소는 <main> 요소의 바깥쪽에 배치해야 합니다.
<main>은 한 문서에 하나만 사용한다
<article>처럼 콘텐츠를 감싸는 컨테이너 역할을 하는 요소들과 달리, <main> 요소는 하나의 HTML 문서 안에서 오직 한 번만 사용해야 한다는 중요한 규칙이 있습니다.
예를 들어 블로그 게시물 하나를 마크업할 때는 다음과 같이 작성할 수 있습니다.
<main>
<article>
<h1>게시글 제목</h1>
<p>단락</p>
<p>단락</p>
<img src="your-image.jpg" alt="이미지 설명" />
<p>단락</p>
<p>단락</p>
</article>
</main>지금 읽고 계신 이 웹사이트 역시 비슷한 HTML 구조를 따르고 있습니다. 직접 확인하고 싶다면 웹페이지에서 마우스 오른쪽 버튼을 클릭한 후 검사(Inspect)를 선택해 개발자 도구를 열어보세요.
함께 알아두면 좋은 HTML 컨테이너 요소들
<main> 태그는 콘텐츠 영역을 정의하는 여러 HTML 컨테이너 요소 중 하나입니다. 실무에서 가장 많이 사용되는 대표적인 컨테이너 요소는 다음과 같습니다.
<section>: 주제별로 구분된 콘텐츠 그룹<article>: 독립적으로 배포 가능한 콘텐츠 단위<header>: 소개 콘텐츠 또는 내비게이션 영역<footer>: 저작권 정보, 관련 링크 등 하단 영역<form>: 사용자 입력을 받는 폼 영역<div>: 위 어느 것도 해당하지 않을 때 사용하는 범용(generic) 컨테이너
이처럼 각 요소의 의미를 정확히 이해하고 상황에 맞게 사용하면, 검색 엔진 최적화(SEO)와 웹 접근성 측면에서도 큰 도움이 됩니다.