HTML5에서는 웹페이지의 구조를 더 명확하게 표현하기 위해 다양한 시맨틱 태그를 사용합니다.
그중에서도 중요한 역할을 하는 태그가 바로 main 태그입니다.
main 태그는 이름 그대로 웹페이지의 핵심 콘텐츠 영역을 의미합니다.
하지만 실제로 언제 사용해야 하는지, 다른 태그와 어떻게 구분해야 하는지 헷갈리는 경우가 많습니다.
이번 글에서는 main 태그의 역할, 언제 사용해야 하는지, 그리고 사용 방법까지 쉽게 정리해보겠습니다.
main 태그란 무엇인가?
main 태그는 웹페이지에서 가장 중요한 콘텐츠를 포함하는 영역을 의미합니다.
즉, 사용자가 해당 페이지에 방문했을 때 핵심적으로 확인해야 하는 내용이 들어가는 부분입니다.
예를 들어 블로그 페이지에서는 게시글 내용, 쇼핑몰에서는 상품 목록이나 상세 정보가 main 영역에 해당합니다.
<main>
<h2>블로그 글 제목</h2>
<p>글 내용</p>
</main>
이처럼 main 태그는 페이지의 중심 콘텐츠를 담는 역할을 합니다.
main 태그는 언제 사용해야 할까?
페이지의 핵심 콘텐츠를 감쌀 때
main 태그는 페이지에서 가장 중요한 콘텐츠를 감싸는 용도로 사용합니다.
사용자에게 전달하고자 하는 주요 정보는 모두 main 영역 안에 들어가야 합니다.
예를 들어 다음과 같은 경우에 사용합니다.
- 블로그 글 본문
- 상품 상세 페이지
- 뉴스 기사 내용
- 서비스 소개 콘텐츠
하나의 페이지에 한 번만 사용
main 태그는 일반적으로 한 페이지에 한 번만 사용하는 것이 원칙입니다.
이는 HTML 문서 구조를 명확하게 만들기 위함입니다.
페이지에는 여러 개의 section이나 article이 있을 수 있지만, main은 전체 콘텐츠를 대표하는 하나의 영역만 존재해야 합니다.
main 태그와 다른 태그의 차이
header와의 차이
header 태그는 페이지의 상단 영역으로, 로고나 메뉴 같은 공통 요소를 포함합니다.
반면 main 태그는 페이지마다 달라지는 핵심 콘텐츠를 포함합니다.
footer와의 차이
footer 태그는 페이지 하단의 보조 정보를 포함합니다.
main은 중심 콘텐츠, footer는 보조 정보라는 점에서 차이가 있습니다.
section과의 차이
section은 콘텐츠를 주제별로 나누는 태그이며, main은 전체 콘텐츠를 감싸는 태그입니다.
main 태그 사용 예시
일반적인 웹페이지 구조는 다음과 같이 구성할 수 있습니다.
<header>
사이트 로고 및 메뉴
</header>
<main>
<section>
<h2>서비스 소개</h2>
<p>내용</p>
</section>
<section>
<h2>고객 후기</h2>
<p>내용</p>
</section>
</main>
<footer>
사이트 정보
</footer>
이 구조는 HTML5에서 권장하는 시맨틱 구조입니다.
main 태그를 사용할 때 주의할 점
header나 footer 안에 넣지 않기
main 태그는 독립적인 영역이기 때문에 header나 footer 내부에 포함되면 안 됩니다.
반복 콘텐츠 포함하지 않기
메뉴, 사이드바, 광고처럼 반복되는 요소는 main이 아닌 다른 태그를 사용하는 것이 좋습니다.
접근성을 고려하기
main 태그는 스크린리더에서 중요한 영역으로 인식됩니다. 따라서 핵심 콘텐츠만 포함하는 것이 중요합니다.
main 태그가 중요한 이유
main 태그를 사용하는 것은 단순한 구조 문제가 아니라 다음과 같은 장점을 제공합니다.
- 콘텐츠 구조 명확화
- 검색엔진 이해도 향상
- 웹 접근성 개선
- 코드 가독성 향상
특히 시맨틱 태그를 올바르게 사용하면 SEO 측면에서도 긍정적인 영향을 줄 수 있습니다.
마무리
main 태그는 HTML5에서 매우 중요한 시맨틱 태그로, 웹페이지의 핵심 콘텐츠를 정의하는 역할을 합니다.
정리하면 다음과 같습니다.
- main 태그는 페이지의 핵심 콘텐츠 영역이다
- 한 페이지에 한 번만 사용하는 것이 원칙이다
- header, footer와 구분해서 사용해야 한다
웹페이지를 제작할 때 main 태그를 올바르게 활용하면 더 명확하고 구조적인 HTML 문서를 만들 수 있습니다. 이는 사용자 경험과 SEO 모두에 긍정적인 영향을 줍니다.