Introduced in HTML 5
HTML5 에서 도입
설명
The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
HTML Section 요소(<section>)는 문서의 일반적인 구획을 나타낸다. 대체로 (h요소로 표현된) 소제목을 포함하여 특정 주제로 의미있게 그룹화될 수 있는 컨텐츠를 포함한다. 컨텐츠(내용), 전형적인 머리말과 같은 유사한 정보를 그룹화 한다(이전 번역). heading을 머리말로 번역하셨네요. 문맥상 heading은 h 요소들, 그러니까 제목을 의미한다고 보는게 맞을 것 같습니다. "대체로 소제목을 가지고 있는" 문서의 소그룹 정도가 좋지 않을까요? - 네 h요소를 의미합니다. 흠.. 머리말보다는 소제목이 적당하네요. 다시 고쳤습니다. 사실 이거 가지고 일하는 내내 고민했어요 ㅡ.ㅡ;;
Usage notes:
•If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.
•Do no use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
사용 시 주의사항 :
• 만약 <section> 요소의 컨텐츠가 독립적으로 분리되어 다른 곳에서도 그대로 사용될 수 있다면, (독립적으로 분리될 수 있는 신디케이트를 의미한다면,(이전 번역) <section> 요소 대신 <article> 요소를 사용할 수 있다. 여기서 신디케이트는 발행하다의 의미로 쓰인것 같습니다. 다시 말해서, 독립적으로 다른 웹싸이트나 서비스에 발행될 수 있는 내용이라면 <article> 요소를 사용하라 는 취지인 것 같습니다. (전에 번역하신 분이 열심히 부가 자료를 첨부해서 어떻게 할까 고민 중입니다. 그냥 article 의 개념을 염두에 두고 의역하면 "독립적으로 분리되어 다른 곳에서도 그대로 사용할 수 있다면," 정도가 좋을 것 같습니다.)
•<section> 요소는 일반적인 컨테이너로서 사용하지 마라. 특히, 문서의 영역을 오직 스타일을 위한(기능적인) 목적으로 사용할 때에는 <div> 요소를 사용할 수 있다. 염두에 두어야 할 점은, section이 문서의 개요 혹은 윤곽을 논리적으로 나타내야 한다는 것이다. (중요한 법칙은 section은 문서의 형식 안에서 논리적인 내용을 표현 해야 한다는 것이다.(이전번역)
용어 설명 : (용어에 대한 설명을 추가 해 놓았어요)
• 컨텐츠 신디케이션(Content Syndication) : 사이트 컨텐츠의 일부 또는 전체를 다른 서비스에서 이용할 수 있도록 해주는 것을 말한다 .
• 출처 : http://cuijizhe.blogspot.com/2007/06/blog-post_9004.html
• 컨테이너 : 웹페이지에서 레이아웃 기능을 가지고 있고 다른 요소도 자식으로 포함시킬 수 있는 태그들
<section>와 <article>의 관계 : (sectoin과 article과 연관관계가 있는 것 같아서 다른 투토리얼글을 옮겨놓았어요)
• <section> 태그가 <article> 태그를 포함할 수 있는 것처럼 <article> 태그는 <section> 태그를 포함할 수 있다. <section> 태그는 유사한 정보를 그룹화하는 데 사용되어야 하고, <article> 태그는 컨텐츠의 의미에 영향을 주지 않고 새 컨텍스트에서 제거되고 위치 지정될 수 있는 기사 또는 블로그와 같이 정보에 대해 사용되어야 한다.
출처 : http://www.ibm.com/developerworks/kr/library/wa-html5fundamentals/
Usage Context
| Permitted content | Flow content |
| Tag omission | None, both the start tag and the end tag are mandatory |
| Permitted parent elements |
Any element that accepts flow content. Note that a <section> element must not be a descendant of an <address> element. |
| Normative document | HTML5, section 4.4.2 |
속성
이 요소는 전역속성을 지원한다.
예제
<section> <h1>Heading</h1> <p>Bunch of awesome content</p> </section>
다른 투토리얼에서 section과 arcticle에 대한 예제를 추가했어요.
<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>
DOM Interface
This element implements the HTMLElement interface.
이 요소는 HTMLElement 인터페이스를 구현한다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 지원 | 4.0 (2.0) | 9.0 | 11.0 | 4.0 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 4.0 (2.0) |
