HTML5의 섹션 요소(Sectioning Group)

August 04, 2022

Sectioning Group은 <article>, <aside>, <nav>, <section>이 속하며, 모두 HTML5에서 새롭게 추가된 요소들로 Sectioning Group에 속하는 요소들은 Heading Group과 함께 HTML의 정보구조를 구성(outline)하는 역할을 한다.

이러한 관점에서 본다면 <aritcle>, <aside>, <nav>, <section>은 <div>보다는 <h1~6>, <hgroup>과 더 긴밀한 연관성이 있다고 볼 수 있다.

Html4에서 문서의 구조를 만들때, div,span 요소를 id,class와 함께 사용
문서의 구조를 나타내는 요소가 풍부하지 않아서 복잡,중첩된 div 사용.
Html5에서는 구조를 만드는 새로운 개념과 요소들이 추가되어 보다 구조적인 문서
Section, Nav, Article, Aside, Hgroup, Header, Footer

🟡 <header>

→ 기본적으로 h태그 또는 nav태그가 들어가기 때문에 별도의 outline을 만들지는 않음

사이트 전체에 대한 머리말일 경우 <header>태그 안에서 <h1~6>태그를 사용해 사이트 제목으로 사용 할 수 있고 <img>태그를 사용해 사이트 로고를 적용.
<form>태그를 사용해 검색창을 삽입.
글로벌 네비게이션 삽입등을 할 수 있다

<header>
  <h1><a href="#">Logo View</a></h1>
  <h2>글로벌네비게이션</h2>
  <nav>
    <ul>
      <li><a href="#">1depth menu1</a></li>
      <li><a href="#">1depth menu2</a></li>
      <li><a href="#">1depth menu3</a></li>
    </ul>
  </nav>
</header>

🟡 <hgroup>

header태그는 문단을 나누는 태그로서의 기능이고
hgroup은 제목을 묶어 표현하는데 사용한다.
outline을 생성 = > h1~h6헤딩 태그가 반드시 존재해야 한다.(없을 시 에러)
활용도가 매우 낮은 태그임.

<div id="content">
  <div class="line_map">
    <span>HOME&gt;</span>
    <span>&nbsp;그린카드소개&nbsp;&gt;</span>
    <strong>그린카드소개</strong>
  </div>
  <hgroup>
    <h1>그린카드소개</h1>
    <h2>당신의 녹색실천! 그린카드가 실천합니다.</h2>
  </hgroup>
</div>

🟡 <section>

책에서 소제목을 붙여놓는 것을 하나의 섹션화를 했다고 하는데 그와 같이 문단등의 컨텐츠를 하나의 그룹으로 만드는 역할.
section 은 웹에서 재배포되어서는 안될 컨텐츠를 지정할 때도 사용. 단순 스타일을 적용하기 위해선 <div>를 사용하고 맥락이 비슷한 내용을 그룹핑의 요소로 묶을때만 <section>을 사용한다.
본문의 제목을 가지고 있는 경우에 사용. 아닐 시 <div>.

<section>
  <h3>그린카드란</h3>
  <ul>
    <li>
      온국민의 녹색생활과 녹색소비를 지원하고 기후변화에 대응하기 위해
      환경부에서 새롭게 도입하는 제도입니다.
    </li>
    <li>
      신용카드의 포인트 제도를 활용하여 에너지 절약, 녹색제품 구매 등 녹색생활
      실천 시 정부, 지자체, 기업 등에서 포인트를 지급하여 국민의 친환경생활
      문화를 정착시키고자 합니다.
    </li>
    <li>
      제도의 기획 및 운영은 환경부에서 주관하며, 비씨카드사는 환경부의 그린카드
      주 운영사로 계약을 체결함으로써 2011년 7월 중순부터 전국 주요은행에서
      발급이 시작되었습니다
    </li>
  </ul>
</section>
<section>
  <h3>제도의 특징</h3>
  <p>
    녹색생활 실천에 대한 실질적인 인센티브가 제공됩니다. 에너지 절약, 녹색제품
    구매, 대중교통 이용 및 카드 사용시 그린포인트(에코머니)를 적립 받을 수 있고,
    전국 공공시설 무료입장/할인서비스를 받으실 수 있습니다.
  </p>
</section>

🟡 <nav>

<nav>태그를 사용하면 문서 어디에서든 네비게이션이라는 요소를 빨리 파악 할 수 있고 구조적으로도 안정적이다.
<nav>태그는 문서 어디에도 존재가능한 위치 독립적인 요소다.
어떤 요소의 안에도, 독립적으로도 위치할 수 있다.
그냥 nav만 사용하면 'Untitled NAV'라고 표기되므로 <h2~h6>태그를 함께 사용해 outline을 잡아주어야 한다.
<nav>태그는 GNB에만 사용하자!

<nav>
  <ul>
    <li>
      <a href="#">1depth menu01</a>
      <ul>
        <li><a href="#">2depth menu01</a></li>
        <li><a href="#">2depth menu02</a></li>
        <li><a href="#">2depth menu03</a></li>
      </ul>
    </li>
    <li><a href="#">1depth menu02</a></li>
    <li><a href="#">1depth menu03</a></li>
  </ul>
</nav>

🟡 <article>

<article>의 사전적의미가 신문 또는 잡지의 기사인 것처럼 웹상의 실제의 내용을 말한다.
<aritcle>은 신문기사처럼 문단화 되어 독립적인 문서로서 배포가능한 문단을 말함. 검색엔진은 배포가능한 컨텐츠로 인식한다.(블로그의 포스트, 웹사이트의 내용, 사용자가 등록한 코멘트등…)

<article>
  <p>
    기업이 추구하는 가치에 도달하기 위해선 먼저 올바른 전략을 설정하고, 이에
    부합된 사업전략과 기능전략을 유기적인 관계 속에서 일관되게 추진해야 합니다.
  </p>
  <section>
    <h1>스피드경영</h1>
    <p>
      스피드경영에 있어 가장 중요한 것은 ‘Time Line’의 개념입니다. 조직 내에서
      속도를 저하시키는 최대의 장애 요인인 불분명한 지시와 초점 없는 결정, 단선
      커뮤니케이션 등을 지양해야 합니다. 빠르게 변화하는 경쟁 사회에서 속도는
      승자와 패자를 가르는 유일한 변수이기 때문입니다.
    </p>
  </section>
  <section>
    <h1>변화경영</h1>
    <p>
      기업환경은 끊임없이 변화하고 있습니다. 단지 어디에서 어떻게 그 변화가
      영향을 미치고 있는지를 신속하게 인식하지 못하는 것 뿐입니다.
    </p>
  </section>
</article>

🟡 <main>

본문 영역을 감쌀 수 있도록 새로 생김!
outline을 생성하지 않는다.(아직 보편화되지 않았기 때문에 현재로서는 <article>태그를 우선적으로 사용한다.)

<main role="main">본문콘텐츠영역</main>

🟡 <aside>

실제 내용이 담겨지는 영역외에 기타 부수적인 내용을 담는 영역에 사용된다.
최근글 보기, 다녀간 블로거 보기, 최근댓글이 달린글 등 사이드바에 담길만한 내용 등을 담는 곳에 사용된다.
말그대로 필수 요소가 아니기 때문에 사용하지 않아도 상관없다.

<section>
  <h1>현대카드 스탬프가맹점이란?</h1>
  <p>
    스탬프가맹점에서 소정금액 이상 결제 시 자동으로 스탬프가 적립되고, 3회
    적립시 쿠폰이 발행되는 새로운 신용카드 서비스입니다.
  </p>
</section>
<section>
  <h1>현대카드 스탬프가맹점 이용방법</h1>
  <ul>
    <li>스탬프가맹점에서 소정금액 이상 결제합니다.</li>
    <li>휴대폰 SMS를 통해 스탬프 적립내역 및 쿠폰내역이 통보됩니다.</li>
  </ul>
</section>
<aside>
  <img src="images/side.jpg" alt="개인정보안심 서비스 신청/문의:1588-3483" />
</aside>

🟡 <footer>

→ outline을 별도로 만들지 않음, 그저 영역을 나타내기 위한 태그일 뿐이다.

관습적으로 사용되어진 위치를 나타내던 footer가 직접적인 태그명으로 지정되었다.
footer태그 안에는 어떤 요소든 포함할 수 있다.
저자나 편집자의 연락처는 footer 안에 address 요소로 표현
대부분 섹션의 마지막에 위치하지만 반드시 그럴 필요는 없다.

<footer>
  <address>
    서울시 영등포구 의사당대로 3 현대캐피탈 빌딩 대표이사 정태영 사업자등록번호
    000-00-00000
  </address>
  <p>CopyRight &copy; MRI.inc. All Right Reserved.</p>
  <ul>
    <li>
      <a href="#"><img src="images/twitter.jpg" alt="트위터" /></a>
    </li>
    <li>
      <a href="#"><img src="images/facebook.jpg" alt="페이스북" /></a>
    </li>
  </ul>
</footer>