html/css 독학하기

코스 전체목록

닫기

section

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 인터페이스를 구현한다.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 지원 4.0 (2.0) 9.0 11.0 4.0
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원   4.0 (2.0)      

참고

댓글

댓글 본문
  1. eluticaa
    div, section, article 헷갈리네요.
    div - 스타일을 위한 목적으로만 사용한다.section - 유사한 정보를 그룹화해서 일반적으로 헤딩으로 시작하는 특정 주제로 재사용은 안한다. 안에 article을 포함할 수 있으며 신문에서 하나의 기사에 해당한다.article - 그 자체로 하나의 개별 컨텐츠로 다른 기사나 블로그를 포함 할 경우 사용하며 재사용할 수 있다.
    정리해도 무슨 말인지 잘... ㅋㅋ
  2. engfordev
    오오.. 추가적인 예제도 넣으시고, 용어 설명도 넣으시고.. 좋은데요?
    노란색 부분에 대해서 좀 생각해보고 댓글로 의견 드릴게요 ^.^
버전 관리
김나솔
현재 버전
선택 버전
graphittie 자세히 보기