본문으로 바로가기

웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아봅니다.

BODY 요소

<body> 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body 요소는 브라우저가 렌더링해야 할 범위를 알려준다.

HEADER 요소

HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다.

<header>
  <h1>LOGO</h1>
  <h2>검색</h2>
  <input type="text">
</header>
  • 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으로 구성된다.
  • 과거에는 <div id="header">와 같이 사용했었다.
  • 문서나 각 section, article 의 헤더 부분에 사용가능하며, 그것들의 제목이나 간단한 소개 콘텐츠를 담을 수 있다.
  • 브라우저가 헤더영역을 인식할 수 있게되면 스크린리더의 내비게이션과 검색엔진의 색인에 도움을 줄 수 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5, iOS4 CH7, An2.1 O11

NAV 요소

HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역이다.

<nav>
  <h1>메인 내비게이션</h1>
  <ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
  </ul>
</nav>
  • 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크와 메뉴(카테고리) 성격의 링크인지 확인이 가능하다.
  • ul, li, a 요소들을 여전히 함께 사용해야 한다.
  • 브라우저가 네비게이션 영역을 알 수 있게 되면 스크린리더의 내비게이션과 검색엔진의 색인에도 도움을 줄 수 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5, iOS4 CH7, An2.1 O11

SECTION 요소

HTML5에 새롭게 추가된 요소로서, 섹션을 표시한다.

<section>
  <article>
    <h1>제목</h1>
    <p>본문</p>
  </article>
</section>
  • 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도이다.
  • 같은 성격의 내용, 즉 관련있는 내용을 section 요소로 묶어 표시한다.
  • 뉴스와 광고 섹션 처럼 서로 다른 성격을 지닌 것들을 section 요소로 표시하면 영역 구분이 아주 명확해진다.
  • 탭과 같은 상위 주제 아래에 하위 주제로 엮인 탭 방식의 구성일때 각각의 탭을 section 요소로 표시할 수 있다.
  • 섹션은 독립적인 영역이라 섹션 내에도 헤더(header)와 푸터(footer)를 둘 수 있다. 이것은 섹션마다 나름의 제목 체계를 가질 수 있다는 것을 의미하며, 섹션마다 H1 요소를 가질 수 있게 되었다.
  • 스크린리더 사용자는 섹션 단위로 이동할 수 있으므로 문서 내 내비게이션이 좀 더 수월해지고 검색엔진은 특정 섹션 중심으로 색인 활동을 할 수 있으므로 검색엔진의 효율성을 높일 수 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라

IE9

FF4 SF5, iOS4 CH7, An2.1 O11

ARTICLE 요소

HTML5에 새롭게 추가된 요소로서, 독립적으로 구성된 글을 표시한다.

<article>
  <header>
    <h1>HTML5 구조</h1>
    <p>Published On <time datetime="2013-01-22">2013년1월22일</time></p>
  </header>

  <p>본문 내용</p>

  <footer>Posted in unclepapa</footer>

  <article> <!-- 코멘트 시작 -->
    <header>
        작성자:<a href="">나그네</a> at <time datetime="2013-01-22T08:45">2013년1월22일 08:45</time>
    </header>

    <p>코멘트 내용</p>
  </article> <!-- 코멘트 끝 -->
</article>
  • 본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용할 수 있다.
  • 게시판의 게시물, 블로그 포스트, 댓글, 위젯에 담긴 콘텐츠등이 article에 해당한다.
  • 일반적인 상황에서는 section 요소가 article 요소를 포함한다. 하지만 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 article 요소가 section 요소를 포함할 수도 있다.
  • section 요소가 관련 있는 내용을 묶는 역할이라면 article 요소는 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할이다.
  • article 영역 내에 헤더(header)와 푸터(footer)를 둘 수 있다.
  • article 요소안에 article 요소가 들어갈 경우, 밖의 요소의 내용과 안쪽의 요소의 내용이 관련이 있는 내용이라는 것을 의미한다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5, iOS4 CH7, An2.1 O11

MAIN 요소

HTML5 권고후보에 main요소가 추가되었다.http://www.w3.org/html/wg/drafts/html/CR/

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

<!-- other content -->
  • 문서내 main요소가 나오는 것은 1번만 허용
  • 콘텐츠모델은 Flow content
  • 단, main요소를 article, aside, footer, header, nav요소의 하위로 사용하지 않음
  • 섹션 콘텐츠가 아니기 때문에 아웃라인 생성하지 않음

main 요소는 ARIA(Accessible Rich Internet Applicaitons)의 role=”main”에 매핑되지만, 사용자에이전트가 이 매핑을 포함할 때까지는 main요소와 role=”main”을 같이 사용하는 것을 추천하고 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
미지원 지원 지원 지원 지원

ASIDE 요소

HTML5에 새롭게 추가된 요소로서, 페이지 전체 내용과는 어느정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.

<aside>
  <section>
    <h3>최근글</h1>
    <ul>
      <li>목록1</li>
      <li>목록2</li>
    </ul>
  </section>
</aside>
  • 흔히 사이드바라고 부르는 영역으로 배너, 용어 설명, 관련 상품 등 본문 내용과 직접적인 관련성이 적거나 없는 내용으로 구성된다.
  • aside 요소로 구성된 것을 검색엔진은 무시하고 본문 위주로 색인을 진행할 수 있고 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 곧바로 다른 영역으로 이동할 수도 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5, iOS4 CH7, An2.1 O11

FOOTER 요소

HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 아래쪽에 있으며 저작권, 연락처등으로 구성된 영역이다.

<footer>
  <address>  
    연락처 : <a href="mailto:webmaster@somedomain.com">help@example.com</a>.<br>  
    모질라 재단, 1981 Landings Drive Building K Mountain View, CA 94043-0801 USA  
  </address>
  <small>Copyright &copy; 2013 Mozila</small>
</footer>
  • 푸터는 바닥 영역 또는 꼬리말을 지칭하는데, 저작권, 연락정보 등 본문과의 관련성은 있지만 본문에는 담기 어려운 내용을 담는다.
  • 일반적으로 푸터 영역은 한 문서 내에서 한 번만 제공되지만 section 요소나 article 요소 내에 있는 footer 요소는 해당 영역에 관한 꼬리말을 표시할 수 있다.
  • 맨위로 가기 링크나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5, iOS4 CH7, An2.1 O11

TEMPLATE

섹션 요소는 아니지만 새로 생긴 요소중에 하나를 소개한다. http://www.html5rocks.com/ko/tutorials/webcomponents/template/



댓글을 달아 주세요

  1. BlogIcon wallel 2015.11.03 12:34 신고

    질문있습니다.

    aside 요소도 중복 사용 가능한가요?

    예를들면 사이드바를 2개 표현할 때

    <aside>
    sidebar1
    </aside>

    <aside>
    sidebar2
    </aside>

    이런 식으로요.

  2. BlogIcon 흉내쟁이 2015.11.03 14:08 신고

    네 실제로 다른 제한을 두지않고 있고 우측 사이드바, 푸터의 페이지하단의 추가정보등을 마크업할때도 중복되서 쓰이는 경향이 있습니다..

  3. 간지띠롱 2016.03.02 17:53 신고

    정리너무잘해놓으셨네요 댓글단적 한번도 없었는데 처음으로 댓글달아봅니다. 퍼가도될까요?

  4. gore 2017.03.19 11:57 신고

    정리가 잘 되어 있어서 보기 좋네요.
    그런데 시맨틱 태그들은 HTML5부터 나온걸로 알고 있는데요.
    section 요소가 IE6부터 지원된다고 써져 있길래 여쭈어 봅니다.

  5. 궁금합니다 2017.04.29 16:33 신고

    문의드립니다/ section사용을 잘 모르겠어서요 ~ ;; 제가 작업하는 사이트형태가 위 그림 형태와 비슷한데요
    상단에 100%짜리 광고영역이있어서 그부분을 section으로 묶고 그아래 컨텐츠영역을 그림처럼 좌측은 <section>으로 묶고 우측은 페이지마다 늘있는 배너부분이라<aside>로 마크업을했는데요..

    이 <section>과<aside>를 묶어주는 div를 만들어서 중앙정렬을 햇습니다 이경우 섹션과 div가 막 섞인 느낌이 들어서 제가 제대로 작업한것인지 궁금합니다

    <section>가로 100%짜리 광고영역</section>

    <div 너비 100%>
    <div 너비1050 : 컨텐츠와 광고를 묶어 화면 중앙정렬하기 위한..>
    <section>좌측 본문 컨텐츠 들</section>
    <aside>우측광고배너영역</aside>
    </div>

    </div>

    이렇게요... 이렇게 작업되는게 지금 맞게 쓰여진건지,,, 너무 알고싶어요 ㅠ

    • BlogIcon 흉내쟁이 2017.04.29 17:27 신고

      위에서 설명하는 요소들은 내부적으로 의미를 지닌 구조를 만들어 줄 뿐입니다. 이를 활용하여 다른 애플리케이션을 제작하거나 할때 공통의 구조라면 접근하기 쉬어지는 이유가 큽니다.

      뉴스 애플리케이션을 제작한다면 article 을 수집해 받아올 수 있겠죠.

      의미를 지닌 구조를 만드는 것과 일반 div를 섞어쓰는 것은 필연적입니다. 의미를 지니지 않고 디자인을 부여하기 위해서는 div를 추가할 수 밖에 없지요.

      HTML5의 구조를 깊이 활용하는 것도 좋지만 실무에서는 여전히 div만을 이용하는 곳도 많으니 너무 개의치 않으셔도 됩니다.

      다만 습관이 되신다면 각각의 의미부여를 위해 구조를 생성하는 요소들을 활용하고 <h1>~<h6> 태그를 활용하여 제목을 붙여주시면 HTML 5 Outliner 를 통해 내부적으로 생성된 구조를 확인해보며 작업을 진행할 수 있을겁니다.

티스토리 툴바