Sectioning Elements

content sectioning elements | MDN

 

전체 웹 페이지의 구조를 만들어 나갈 때, 페이지를 이루고 있는 요소를 하나 하나씩 나누기 보다는, 서로 관련 있는 요소들을 묶어 전체적인 틀을 잡는 것, 즉 구획으로 나누는 것이 중요하다. <div> 태그도 구획을 나누는 태그이긴 하지만, 그 구획이 어떤 의미를 갖지는 못한다.

이 때 사용할 수 있는 것이 sectioning 태그이고, section, article, nav, aside 4가지로 나누어 볼 수 있다. ??? 이 네가지 태그에는 heading 태그를 자식요소로 반드시 포함해야 한다. 

 

1. section

독립적인 구획을 나타내는 태그로, generic한 편이지만 div를 사용하는 것보다는 훨씬 낫다.

 

<section>
  <h1>title</h1>
  <form></form>
</section>

 

2. article | 기사

하나의 독립적인 컨텐츠를 제공하는 요소를 article 태그로 묶을 수 있다. article은 그 자체만으로 독립적인 정보를 나타낼 때 사용되고, article을 section으로, 또는 하나의 section을 여러 article로 나누어서 표현할 수도 있다.

 

3. nav | navigation 

문서 간의 이동을 할 수 있는 태그를 포함하는 구획에 nav 태그를 이용할 수 있다.

 

<nav>
 <h1>Menu</h1>
 <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Explore</a></li>
   <li><button type="button">More</button></li>
   <!-- ... -->
 </ul>
</nav>

 

4. aside

main과는 직접적으로 관련이 없는 section을 마크업 할 때 사용하는 태그이다. 예를 들어 modal 창이나, 트위터의 실시간 trend가 있다. 

 

+) more 

header | 전체 페이지의 도입부, 또는 섹션의 최상부, 제목 역할을 한다.

 

<header>
    <h1>
       <a href="#">
         <img src="" alt="twitter logo">
       </a>
    </h1>
    <nav>
      <!-- nav items... -->
    </nav>
</header>

 

main | 하나의 html에 하나의 main 태그만을 사용할 수 있다. 웹 페이지 전체에서 가장 핵심적인 요소를 묶어주는 태그로, 다른 태그의 자식요소로 사용되지 않는다.

 

<main>
   <header>
      <h1>Home</h1>
      <button type="button"></button>
   </header>
  <article>
    <section></section>
  </article>
  <aside></aside>
</main>

 

footer | 전체 페이지의 하단부, 또는 한 섹션의 마무리 역할을 한다.