본문 바로가기

퍼블리싱/HTML5

html5 새로운 요소들의 적절한 사용

<header>
  • 소개와 내비게이션에 도움이 되는 것의 모임
  • 대개 <div id="header">의 안에 포함시키던 내용
  • 페이지당 한번만 사용해야한다는 제한이 없다. 대신, 콘텐츠의 각 섹션을 소개하기 위해 새로운 header요소를 포함시킬수있다.
  • 위치와 무관함



<section>

  • 문서나 애플리케이션의 일반적인 섹션을 나타낸다. 여기서 섹션은 전형적으로 제목을 가지고 있으면서 한 가지 주제와 관련된 콘텐츠의 모임을 의미한다.
  • 단지 스타일링이나 스크립팅 목적만을 위한 컨테이너로 사용하면 안됨, 이럴땐 div를 쓰면됨
  • section안에 여러개의 section이 들어갈수있다. 중첩가능
  • section은 일반적이다. 그러므로 좀 더 구체적인 의미적 요소(article, aside, nav같은)가 적절하다면 대신 그것을 사용한다.
  • section에는 의미적인 의미가 있다. 이것은 section이 포함하고 있는 콘텐츠가 어떤 식으로든 서로 관련이 있다는 사실을 암시한다. 하나의 section에 넣으려고 하는 모든 콘텐츠를 단지 몇 단어로 간결하게 설명할 수 없다면 평범한 div같이 의미적으로 중립적인 컨테이너가 필요하다고 볼 수 있다.

<article>
  • 문서, 페이지, 애플리케이션, 사이트내의 자립적인 글을 나타내며, 이론상 독립적으로 배포하거나 재사용할 수 있다.
  • 블로그의 글, 게시판의 글, 기사 같은 것
  • article안에 여러개의 article이 들어갈수있다. 또한 section을 article안에 감쌀 수도 있고 그 반대도 가능


<nav>
  • 다른 페이지나 동일 페이지 내에서 이동할 수 있게 해주는 내비게이션 링크의 그룹이다
  • 어떤 경우든 nav요소는 핵심적인 내비게이션을 하는데 사용해야 한다. 그러므로 예를 들어 footer내에 있는링크로 구성된 짧은 목록에 nav를 사용하는 것은 자제해야 한다.


<aside>
  • 요소 주변의 콘텐츠와 거의 관계가 없고 심지어 그 콘텐츠에서 분리됐다고 여겨질 수 있는 페이지의 일부를 표시한다.
  • 사이브바, 보조 링크 리스트, 광고블록 등


<footer>
  • header처럼 한 페이지에 여러개의 footer가 있을수있음
  • 보통 저작권 정보, 관련링크목록, 저자 정보 그리고 일반적으로 콘텐츠블록이 마지막에 올 것으로 예상할수 있는 콘텐츠를 포함함
  • 위치와 무관함, 순서상 맨 위에 있어도 footer에 들어가는 내용이면 footer임

- 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다!



'퍼블리싱 > HTML5' 카테고리의 다른 글

disabled와 readonly 속성의 차이  (0) 2015.02.23
required 속성  (0) 2015.02.23
html5 규칙과 이전버전 규칙의 혼합  (0) 2015.02.23
HTML5 기본템플릿  (0) 2015.02.23
IE9이하 버전에서 HTML5 태그 대응하기  (0) 2014.11.04