HTML 시맨틱 태그, main 태그란? SEO와 웹 접근성을 위해 반드시 지켜야 할 규칙

HTML 구조를 설계할 때 웹페이지의 의미^Semantics를 결정하는 중요한 태그들을 하나씩 정리해볼까 한다.

일단 첫 번째로 오늘은 main 태그에 대해서 정리해 보겠다.

HTML 독학에 효율적인 방법 (feat. 생활코딩)

HTML을 독학으로 공부하고 싶은 사람들을 위해서 그 방법을 안내하는 글입니다.

이전에 HTML을 독학하는 방법을 소개하면서 생활코딩의 HTML 수업 영상을 링크했었다.

그 재생 목록의 31번째 영상으로 다음과 같은 영상이 있다.

이 영상에서 간략하게 소개했던 시맨틱 태그^{Semantic Tags}들, 혹은 미처 소개하지 못한 시맨틱 태그들을 하나씩 정리해 보겠다.

시맨틱 태그를 잘 사용하는 것은 SEO(검색 엔진 최적화)의 가장 기본적이면서도 강력한 전략 중 하나이기 때문에 하나씩 제대로 배워보자.

main 태그

이번에 정리할 태그는 <main> 태그다.

main 태그는 문서에서 가장 중심이 되는 컨텐츠를 정의하는 태그다.

일단 이 블로그에 적용되어 있는 템플릿(스킨)에 main 태그가 적절하게 사용되고 있기 때문에, 알기 쉽에 이미지를 먼저 첨부해 보겠다.

개발자 도구를 통해서 확인해 보면, 내 블로그에서는 캡처한 이미지처럼 포스트의 제목과 카테고리가 표시된 부분에서 main 태그가 시작된다.

그리고 포스트의 댓글까지 포함하고 main 태그가 끝이 난다.

main 태그는 해당 문서의 주요 콘텐츠(Main Content)를 감싸는 역할을 한다.

한 페이지에 단 한 번만 사용하는 것이 원칙이다. (마치 <h1> 태그처럼..)

그 외 특징들은 다음과 같다.

1. main 태그 안에 포함되어야 하는 것

해당 웹 페이지의 핵심 주제와 직접적으로 관련된 콘텐츠가 들어간다.

• 독자적인 정보: 블로그의 본문 기사, 쇼핑몰의 상품 상세 설명, 뉴스 사이트의 뉴스 내용 등.
• 핵심 기능: 검색 결과 페이지의 결과 리스트, 로그인 페이지의 로그인 폼 등.
• 중요 상호작용 요소: 해당 페이지의 목적을 달성하기 위한 버튼 (예: 로그인 버튼), 비디오 플레이어 등.

2. main 태그에서 반드시 제외되어야 하는 것

여러 페이지에서 공통적으로 반복되는 요소들은 <main> 밖에 두어야 한다.

• 사이트 로고 및 헤더: 보통 <header> 태그 안에 위치하며 페이지마다 반복된다.
• 탐색 링크(Navigation): 메뉴 바, 카테고리 목록 등. (<nav>)
• 사이드바: 광고, 연관 링크, 프로필 요약 등. (<aside>)
• 사이트 하단 정보: 저작권 고지, 연락처, 이용약관 링크 등. (<footer>)
• 검색창: 사이트 전체에서 공통으로 사용되는 검색바 (단, '검색 결과 페이지' 자체는 main에 포함됨)

3. main 태그 사용 시 주의할 핵심 규칙

중요한 내용이라 미리 한번 언급했는데, 한 페이지에 단 하나!

<main> 태그는 오직 하나여야 한다.

그리고 main 태그는 다음 태그들의 자식 요소가 될 수 없다.

• <header>
• <nav>
• <aside>
• <footer>
• <article>

header, nav, aside, footer 태그들은 main 태그와 대등한 위치에 있어야 하고, article 태그는 main 태그 안에 위치한다.

<main> 태그를 올바르게 사용하면, 시각 장애인이 사용하는 스크린 리더에서 '본문으로 바로 건너뛰기' 기능을 이용할 수 있다.

반복되는 메뉴를 매번 읽지 않고 바로 핵심 내용으로 이동할 수 있게 돕는 아주 중요한 역할을 하기도 한다.

다음 포스트

HTML 시맨틱 태그, 독립적인 콘텐츠를 위한 article 태그

HTML 시맨틱 태그 시리즈 두 번째! 독립적인 콘텐츠 단위인 article 태그의 특징과 사용 규칙을 정리합니다. main 태그와의 계층 구조 차이부터 사이드바·푸터에서의 재사용 사례까지, SEO에 최적화된 올바른 HTML 설계 방법을 실제 예시와 함께 알아봅니다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.