main 태그

HTML의 <main> 태그는 웹 페이지의 주요 콘텐츠를 나타내는 시맨틱(의미론적) 요소입니다. 이 태그는 문서 내에서 핵심적인 콘텐츠만을 감싸며, 페이지의 다른 부분들(예: 헤더, 푸터, 사이드바 등)과 구분됩니다. <main> 태그를 사용하면 페이지의 중심적인 내용을 명확하게 정의할 수 있어, 검색 엔진 최적화(SEO)와 웹 접근성을 개선하는 데 도움이 됩니다.

주요 특징:

1. 주요 콘텐츠 구분: <main> 태그는 페이지의 핵심 콘텐츠를 구분짓는 역할을 합니다. 예를 들어, 블로그 글, 기사, 제품 설명 등이 그에 해당합니다.
2. 단 한 번만 사용: 하나의 HTML 문서 내에서는 <main> 태그를 한 번만 사용하는 것이 권장됩니다. 페이지의 주요 콘텐츠를 구분하는 용도로만 사용되므로, 여러 번 사용할 필요가 없습니다.
3. 시맨틱(의미론적) HTML: <main> 태그는 문서의 주요 콘텐츠가 어디에 있는지 명확히 표현합니다. 이를 통해 검색 엔진이나 스크린 리더는 페이지의 중요한 부분을 이해할 수 있습니다.
4. 다른 콘텐츠와 구분: <header>, <footer>, <nav>, <aside>와 같은 다른 시맨틱 태그들과 구분되어 사용됩니다. 이들은 모두 페이지의 부가적인 콘텐츠를 다루며, <main>은 핵심 콘텐츠에만 해당됩니다.

사용 예시:

<main>
  <article>
    <h1>웹 페이지의 주요 콘텐츠</h1>
    <p>이 글은 이 페이지의 중요한 내용을 담고 있습니다.</p>
  </article>
  
  <section>
    <h2>추가 섹션</h2>
    <p>여기는 다른 중요한 내용을 다룬 추가 섹션입니다.</p>
  </section>
</main>

설명:

• <article>: 페이지 내에서 독립적으로 의미를 갖는 콘텐츠 블록입니다. 예를 들어, 블로그 글, 뉴스 기사 등입니다.
• <section>: 콘텐츠를 논리적으로 구분하는 부분입니다. 예를 들어, 페이지 내의 여러 섹션을 <section>으로 나누어 중요한 내용을 구체적으로 설명할 수 있습니다.

주의할 점:

1. 기타 구조적 태그와 함께 사용: <main> 태그는 헤더, 네비게이션, 사이드바, 푸터 등과는 다른 역할을 하므로, 그에 맞는 다른 시맨틱 태그들과 함께 사용해야 합니다.
2. 중복 사용 지양: HTML 문서에서 <main> 태그는 한 번만 사용해야 하며, 페이지 내에서 핵심 콘텐츠를 정의하는 역할을 명확히 해야 합니다. 예를 들어, 사이드바나 네비게이션 메뉴는 <main> 태그 안에 포함되지 않습니다.

결론:

<main> 태그는 웹 페이지에서 주요 콘텐츠를 정의하는 중요한 시맨틱 요소입니다. 이를 통해 콘텐츠가 명확하게 구분되고, 검색 엔진 최적화(SEO)와 웹 접근성 측면에서 유리한 효과를 기대할 수 있습니다. HTML 문서에서 중요한 정보를 감쌀 때 <main>을 사용하여 콘텐츠를 잘 구조화하는 것이 좋은 웹 표준을 따르는 방법입니다.