웹페이지의 주인공 무대, <main> 태그란?
1. <main> 태그의 정체, 대체 뭘까?
<main> 태그는 HTML 문서 안에서 가장 핵심적인 ‘본문 콘텐츠’를 담는 용도로 사용돼요. 여기서 말하는 본문은 **페이지의 중심 주제**와 **핵심 내용을 의미**하죠.
예를 들어 블로그라면 글 본문, 쇼핑몰이라면 상품 목록, 뉴스 사이트라면 기사 내용이 바로 <main>에 들어갑니다. 반대로 **로고, 메뉴, 사이드바, 푸터**처럼 반복되는 UI 요소는 <main> 바깥에 있어야 해요.
비유 💡
<main>은 무대의 중심!
헤더는 커튼, 내비게이션은 출입문, 사이드바는 소품실, 푸터는 퇴장 통로라고 생각해보면 구조가 더 잘 보입니다.
2. 올바른 위치와 구조
<main> 태그는 페이지당 단 한 번만 사용할 수 있으며, <header>, <nav> 등을 제외한 나머지 핵심 콘텐츠만 담아야 해요.
<body>
<header>사이트 상단 영역</header>
<nav>내비게이션</nav>
<main>
<h1>오늘의 추천 레시피</h1>
<article>
<h2>김치찌개 만들기</h2>
<p>재료: 김치, 돼지고기, 두부...</p>
</article>
</main>
<footer>사이트 하단 정보</footer>
</body>
3. 검색엔진이 좋아하는 구조
<main> 태그는 시맨틱 태그 중 하나로, 의미 중심의 마크업을 완성하는 데 핵심 역할을 해요. 검색엔진이나 스크린 리더는 이 태그를 통해 페이지의 주제 영역을 파악하고, 더 정확하게 콘텐츠를 분석할 수 있습니다.
Tip 💡
시맨틱 구조는 SEO에 유리하고, 접근성 향상에도 효과적입니다.
검색엔진은<main>안의 콘텐츠를 “이 페이지에서 가장 중요한 내용”으로 간주해요.
4. 반드시 기억할 규칙
<main>은<body>안에서 단 한 번만 등장해야 함- 다른 시맨틱 태그들과 혼용 가능:
<section>,<article>,<aside>등 <main>안에<header>나<footer>를 중첩하지 않는 게 일반적
5. 마무리하며
<main> 태그는 단순히 콘텐츠를 담는 용기를 넘어, 페이지의 중심 메시지를 전달하는 진짜 ‘주인공 무대’입니다. 구조를 명확히 하면서도 사용자와 검색엔진 모두에게 신뢰감을 주는 설계가 가능해지죠.
앞으로 HTML 문서를 작성할 때, 가장 중요한 내용을 <main>에 담아 의미 있는 웹페이지를 구성해보세요!