HTML/CSS 베이스캠프

Sections 태그

Sections 태그는 HTML 문서를 의미적으로 구분하는 태그들로, 문서의 구조와 내용을 더욱 명확하게 표현할 수 있도록 도와줍니다. 대표적인 Sections 태그로는 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등이 있습니다. 이 태그들을 적절히 사용하면 검색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.

<div> 태그와 마찬가지로 CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 영향을 주지 않습니다.

1. header

<header> 태그는 일반적으로 웹 페이지의 상단에 위치하며, 사이트의 제목, 로고, 검색창, 네비게이션 등의 요소를 포함할 수 있습니다. <head> 태그와 혼동하지 않도록 주의해야 합니다. <head> 태그는 문서의 메타데이터를 포함하는 반면, <header> 태그는 문서의 내용 중 소개 부분을 나타냅니다.

<header> 태그는 중첩해서 사용할 수 없으며, 안에 <footer> 태그를 포함할 수도 없습니다. 하지만 HTML 문서가 여러 섹션으로 구성되어 있을 때, 각 섹션의 시작 부분에 <header>를 사용하여 해당 섹션의 소개 부분을 나타낼 수 있습니다.

<!-- 잘못된 예 -->
<header>
  <header></header>
</header>
 
<header>
  <footer></footer>
</header>

<!-- 잘못된 예 -->
<header>
  <header></header>
</header>
 
<header>
  <footer></footer>
</header>

2. nav

<nav> 태그는 navigation의 약자로, 웹 페이지 내에서 현재 페이지나 다른 페이지로 이동할 수 있는 링크들을 모아 놓은 섹션을 나타냅니다. 이 태그는 주로 메뉴, 목차, 브레드크럼(breadcrumb) 등으로 사용됩니다.

메뉴로 사용할 때는 일반적으로 <ul> 태그와 함께 사용하여 각 메뉴 아이템을 <li> 태그로 나타냅니다. 브레드크럼으로 사용할 때는 <ol> 태그와 함께 사용하여 현재 페이지의 위치를 나타내는 계층 구조를 표현합니다.

스타일링을 하지 않은 메뉴

스타일링을 한 메뉴

메뉴와 브레드크럼(breadcrumb)으로 사용되는 예제입니다.

메뉴

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

브레드크럼

<nav>
  <ol>
    <li><a href="#">위니브</a></li>
    <li><a href="#">캐릭터소개</a></li>
    <li>라이캣</li>
  </ol>
</nav>

<nav>
  <ol>
    <li><a href="#">위니브</a></li>
    <li><a href="#">캐릭터소개</a></li>
    <li>라이캣</li>
  </ol>
</nav>

<nav> 태그 안에는 반드시 문서의 모든 링크가 포함될 필요는 없습니다. 이 태그는 페이지의 주요 탐색 링크를 위한 것으로, 하나의 웹페이지에 여러 개의 <nav> 태그를 사용할 수 있습니다. 예를 들어, 하나는 사이트 전체 탐색용으로, 다른 하나는 현재 페이지 내 탐색용으로 사용할 수 있습니다.

<nav> 태그를 사용하면 문서의 구조와 의미를 더욱 명확하게 전달할 수 있으며, 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 더 나은 접근성을 제공할 수 있습니다.

3. main

<main> 태그는 문서의 주요 콘텐츠를 나타냅니다. 웹 페이지에서 한 번만 사용할 수 있으며, 보통 아래와 같은 형식으로 구성됩니다.

다만 <main> 태그는 인터넷 익스플로러에서는 지원되지 않으므로 인터넷익스플로러를 지원해야 하는 경우에는 <div> 태그로 대체하여 사용할 수 있습니다.

main 태그 사용 가능 브라우저

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
    <aside></aside>
  </main>
  <footer></footer>
</body>

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
    <aside></aside>
  </main>
  <footer></footer>
</body>

4. footer

footer는 웹 페이지의 하단에 위치하며, 페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담습니다. 아래 예시는 위니북스의 footer입니다.

<footer>
  <h2>
    <span class="a11y-hidden">wenivooks</span>
  </h2>
  <p>Copyright © 2023 WENIV All Rights Reserved</p>
  <!-- 생략... -->
</footer>

<footer>
  <h2>
    <span class="a11y-hidden">wenivooks</span>
  </h2>
  <p>Copyright © 2023 WENIV All Rights Reserved</p>
  <!-- 생략... -->
</footer>

여러 페이지의 footer들이 어떻게 구성되었는지 확인해보세요.

footer 예시

5. section

<section> 태그는 문서 내에서 특정한 섹션을 정의하는 데 사용됩니다. 이 태그는 일반적으로 주제나 컨텐츠를 구분짓기 위해 사용되며, 뉴스의 사회면 / 연예면 각각의 부분을 나타낼 수 있습니다.

<section> 태그는 자식 요소로 제목 요소(heading)를 포함해야 합니다. 비록 사용자에게 보이지 않는 텍스트라고 할지라도 스크린 리더 사용자에게는 중요한 정보가 됩니다.

6. article

<article> 태그는 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행합니다.

아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지입니다. 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용됩니다. 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영됩니다.

<article> 태그는 <section> 태그와 비슷해 보일 수 있지만, <section>은 주제별로 구분하고 <article>은 독립적인 콘텐츠를 구분합니다. <article>은 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등에 사용됩니다.

<article> 태그도 자식 요소로 제목 요소(heading)를 포함하여야 합니다.

article vs section

둘 중 어떤 것을 사용할지 고민될 때는 일단 <article> 사용을 우선 고민해보세요. 독립적으로 사용한다면 <article> 사용하시고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 <section>을 사용하세요. 단순 스타일링이 목적이라면 div 요소를 사용합니다.

7. aside

aside 태그는 문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다. 이 태그로 묶인 콘텐츠는 문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간입니다.

웹 페이지에서 사이드바, 광고, 관련 링크, 삽화, 인용구, 작은 웹 어플리케이션 등을 표시할 수 있습니다. aside 태그 내에는 nav 태그를 사용하여 관련 링크를 제공할 수도 있습니다.