2011.09.27 08:30

<SECTION> 태그는 문서 내에서 같은 의미의 구역을 나눌 때 사용합니다. 여기서 주의해야 할 것이 구역을 나누는 기준은 콘텐츠이지 레이아웃은 아닙니다. 즉 내용이 같은 묶음을 만들어 낼 때 사용하는 것이 <SECTION>이라고 할 수 있습니다. 하나의 웹 문서는 여러개의 <SECTION>으로 구성할 수 있으며 이떻게 <SECTION>을 잘 나누어 주게 되면 나중이 해당 문서를 다양하게 활용하거나 각종 디바이스의 소프트웨어가 적절히 이용하기 좋아지는 장점이 있습니다.

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>

<section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>

  <section>
  <h1>Sweet</h1>
  <p>Red apples are sweeter than green ones.</p>
  </section>

</section>

<section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>
</body>


<SECTION>위의 예처럼 중첨해서 사용할 수도 있지만 권장하지는 않습니다. 이렇게 중첩이 많이 된다면 나중에 이 문서를 이해하는데 어려움이 있을 수 있기 때문에 가급적이면 중첩된 구조는 만들지 않는 것이 좋습니다.

 어떻게 보면 이런거 없이도 지금껏 웹 문서를 잘 만들고 활용해 왔는데 왜 갑자기 귀찬하게 의미를 나누는지 궁금해 질 수도 있지만 시맨틱 웹의 장점은 약간의 귀찮음 보다 더 많이 있기 때문에 꼭 의미 있는 집합을 <SECTION>으로 나누어 주면 좋을 듯 합니다.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록

  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고