logo

한국어

출처: https://webdir.tistory.com/310


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


261BFE435539390B1B.png




BODY 요소

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

HEADER 요소

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

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

지원 현황

인터넷익스플로우파이어폭스사파리크롬오페라
IE9FF4SF5, iOS4CH7, An2.1O11

NAV 요소

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

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

지원 현황

인터넷익스플로우파이어폭스사파리크롬오페라
IE9FF4SF5, iOS4CH7, An2.1O11

SECTION 요소

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

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

지원 현황

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

IE9

FF4SF5, iOS4CH7, An2.1O11

ARTICLE 요소

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

HTML
<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 요소가 들어갈 경우, 밖의 요소의 내용과 안쪽의 요소의 내용이 관련이 있는 내용이라는 것을 의미한다.

지원 현황

인터넷익스플로우파이어폭스사파리크롬오페라
IE9FF4SF5, iOS4CH7, An2.1O11

MAIN 요소

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

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

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

지원 현황

인터넷익스플로우파이어폭스사파리크롬오페라
IE9FF4SF5, iOS4CH7, An2.1O11

FOOTER 요소

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

HTML
<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 요소는 해당 영역에 관한 꼬리말을 표시할 수 있다.
  • 맨위로 가기 링크나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다.

지원 현황

인터넷익스플로우파이어폭스사파리크롬오페라
IE9FF4SF5, iOS4CH7, An2.1O11

TEMPLATE

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