main 태그란 무엇이며 왜 사용하는가?

웹 개발을 하다 보면 <div> 태그로 거의 모든 구조를 만들 수 있습니다. 그런데 왜 굳이 <main> 같은 태그를 쓸까요? 그 이유는 웹의 시맨틱 구조와 관련이 깊습니다.

시맨틱 태그란?

시맨틱 태그는 HTML 요소에 의미를 부여하는 태그입니다. 예를 들어 <header>, <footer>, <article>, <main> 등이 여기에 해당합니다. 이들은 단지 모양이 아니라 콘텐츠의 역할을 명확히 알려주는 목적을 가지고 있어요.

`<main>` 태그의 역할

<main> 태그는 페이지의 주요 콘텐츠 영역을 감싸는 데 사용됩니다. 일반적으로 헤더, 네비게이션, 사이드바 같은 반복 요소를 제외한 중심 내용을 의미하죠.

예시 코드

<body>
  <header>사이트 헤더</header>
  <main>
    <h1>블로그 글 제목</h1>
    <p>본문 내용...</p>
  </main>
  <footer>푸터 정보</footer>
</body>

이렇게 <main> 태그를 사용하면 검색 엔진과 보조 기술(스크린 리더 등)이 페이지 구조를 더 잘 이해할 수 있습니다.

SEO에서의 장점

검색 엔진은 <main> 태그 내부의 내용을 더 중요하게 인식할 수 있어요.
콘텐츠의 핵심을 명확히 구분할 수 있기 때문에, 크롤러가 페이지의 주요 정보를 더 빠르게 파악할 수 있습니다.

접근성 향상

스크린 리더는 <main> 영역을 자동으로 감지하고, 사용자가 본문으로 바로 이동할 수 있도록 도와줍니다.
이는 웹 접근성을 높이는 데 큰 도움이 됩니다.

`<div>`와의 차이점

<div>는 의미 없는 박스입니다. 구조는 만들지만 역할은 설명하지 못해요.
<main>은 시각적으로는 똑같지만 의미가 있는 태그이기 때문에 검색엔진, 접근성 도구, 분석툴에 친화적입니다.

정리

<main> 태그는 단순한 대체재가 아닌, 검색엔진 최적화와 웹 접근성 향상에 꼭 필요한 HTML5의 핵심 요소입니다.
이제부턴 아무 데나 <div> 대신, 적절한 시맨틱 태그를 사용하는 습관을 들여보세요.

마무리 퀴즈

<main> 태그는 웹 페이지에서 어떤 영역을 의미하나요?
- a) 사이트 전체
- b) 네비게이션 메뉴
- c) 주요 콘텐츠 영역
- d) 푸터
시맨틱 태그를 사용하는 가장 큰 이유는?
- a) 스타일을 적용하기 위해
- b) 더 빠른 렌더링을 위해
- c) 의미를 명확히 전달하고 SEO/접근성을 높이기 위해
- d) 자바스크립트와 충돌을 피하기 위해
<div>와 <main>의 가장 큰 차이점은 무엇인가요?