섹션(Section) 요소 - BODY, HEADER, NAV,ARTICLE,ASIDE

티스토리 뷰

Web Client/HTML

섹션(Section) 요소 - BODY, HEADER, NAV,ARTICLE,ASIDE

미쁘다♥ 2019. 1. 14. 02:31

HTML5 구조 관련 복습 중, 괜찮은 내용의 블로그를 찾아서 공유합니다.

출처는 아래 명시해 뒀습니다.

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

BODY 요소

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

HEADER 요소

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

HTML

<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에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역이다.

HTML

<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에 새롭게 추가된 요소로서, 섹션을 표시한다.

HTML

<section>
  <article>
    <h1>제목</h1>
    <p>본문</p>
  </article>
</section>

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

지원 현황

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

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

지원 현황

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

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 요소로 구성된 것을 검색엔진은 무시하고 본문 위주로 색인을 진행할 수 있고 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 곧바로 다른 영역으로 이동할 수도 있다.

지원 현황

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

FOOTER 요소

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

지원 현황

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

출처: http://webdir.tistory.com/310 [WEBDIR]

저작자표시 비영리 변경금지

'Web Client > HTML' 카테고리의 다른 글

[Markdown] 마크다운 문법 - 깃허브 위키 (0)	2018.03.08
HTML/CSS 구글 폰트 사용 및 설정 (0)	2017.10.06
Favicon & App Icon 파비콘 코딩 방법 (0)	2017.10.04

공지사항

IT 개발자 문철우입니다.

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

코딩의 아름다움

티스토리 뷰