HTML - 섹션과 메인 요소

섹션을 나누는 요소들은 흔히 시멘틱 태그라고 해서 HTML문서에 구조적인 의미를 줄 수 있는 태그들을 말한다. <div>도 비슷한 역할을 하지만 아무 의미가 없는 태그기 때문에 구조적인 의미를 갖고 있지 않아 성격적으로 다르다.

 

<header> : 머리말 (로고, 사이트 소개, 내비게이션 포함 가능)

<nav> : 내비게이션 (메뉴)

<main> : 문서의 주요 콘텐츠

<section> : 주제별 콘텐츠 구분

<article> : 독립적인 콘텐츠 (블로그 글, 뉴스 기사 등)

<aside> : 부가 정보 (사이드바, 광고 등)

<footer> : 바닥글 (저작권, 연락처 등)

 

간단한 예시로 살펴보면 아래와 같이 사용할 수 있다.

<header class="header">본문 헤더</header>
<nav class="navigation">내비게이션</nav>
<main class="content">
  <section class="card">
    <header>섹션 헤더</header>
    <p>...</p>
    <footer>섹션 푸터</footer>
  </section>
  <article class="product">
    <header>섹션 헤더</header>
    <p>...</p>
    <footer>섹션 푸터</footer>
  </article>
</main>
<aside class="sidebar">부가 콘텐츠</aside>
<footer class="footer">본문 푸터</footer>

---

 

위 사진은 컨테이너 요소와 섹션 요소의 차이점을 한눈에 볼 수 있도록 비교한 그림이다. 섹션 요소의 경우 각각의 의미가 담겨 있기 때문에 되도록 한 번만 사용할 것을 권장하지만 <header>와 <footer>의 경우 <main>이나 <article> 등 다양한 섹션 내에서 구조적으로 나누는 태그가 될 수도 있다.

 

섹션 요소를 사용할 때 중요하게 생각해야 할 것은 HTML문서를 기획할 때 구조적으로 어떻게 나눠야 웹 표준을 지킬 수 있는지, 웹접근성 이점을 높일 수 있는지 충분히 고민해야 한다는 것이다.