Programming/HTML CSS
HTML5 에서 헤더구조에 사용되는 태그는 다음과 같습니다.

1. header

헤더의 전체적인 구조를 나타냅니다. 헤더는 header로 시작해 header로 끝납니다.

2. hgroup

헤더에서 사이트의 제목이나 슬로건이 담겨지는 부분입니다.

3. nav

사이트의 메뉴를 이루는 부분입니다. 메뉴는 사이트의 전체메뉴이거나 특정한 상황에서만 보여지는 메뉴일 수 있으며 필요하다면 header안에서 2개 이상의 nav요소가 사용될 수 있습니다.

4. section

이 태그안에는 화면에 보여일 웹페이지의 주요 컨텐츠를 담아둡니다. 일종의 본문에 해당합니다.

5. article

section 안에서 주제별로 구분되는 본문을 배치합니다.

6. aside

화면의 좌, 우측에 보여지는 컨텐츠를 포함하는 영역입니다.
 
7. footer

사이트의 하단부분을 구성하는 영역입니다.
<body>
 <header>
  <hgroup>
   <h1>CLIEL</h1>
  </hgroup>
  <nav>
   <ul>
    <li>HOME</li>
    <li>MENU1</li>
    <li>MENU2</li>
   </ul>
  </nav>
 </header>
 <div>
  <section>
   <article>A couple of days ago I returned from my trip to the U.S.</article>
   <article>We had traveled on business to Phoenix, AZ.</article>
   <article>Although there were no arrangements to do any flying, I had decided to bring a flight suit with me. I figured, you never know… </article>
  </section>
  <aside>
   How I Flew a Huey in Arizona
  </aside>
 </div>
 <footer>
  HTML5
 </footer>
</body>
위에서 말씀드린 태그는 사이트의 구조에서 각각의 부분이 어떤 역활을 하고 있는지 명확하게 구분하기 위한 목적이 강합니다. 소스상에서 구분(정확히는 검색엔진등에서)되는 용도이므로 태그가 실제 웹 브라우저에서 표시될때 어떤 특별한 처리가 이루어 지지는 않습니다.

그냥 각 태그에 의미를 부여 해놓은 형태인데 이것은 '시멘틱 웹'이라 표현합니다.

실제로 header나 hgroup, nav 태그를 제거해도 브라우저에 표시되는 모양새는 태그를 사용한 경우와 별반 다르지 않습니다. 따라서 필요하다면 개발자나 디자이너가 직접 CSS를 정의하여 목적에 맞게 디자인을 입혀야 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
0 0