HTML5에서 "섹션"태그를 올바르게 사용하는 방법은 무엇입니까?

HTML5로 레이아웃을 만들려고하는데 여러 기사를 읽은 후 혼란스러워합니다. 어떻게 사용해야하는지에 대한 정보를 얻으려고합니다.

다음은 내가 앞뒤로 사용하는 변형입니다.

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

섹션 태그를 사용하여 컨테이너처럼 작동 할 수 있습니까?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

<section>태그 를 사용하는 올바른 방법은 무엇입니까 ?

대답은 현재 사양에 있습니다.

section 요소는 문서 또는 응용 프로그램의 일반 섹션을 나타냅니다. 이 컨텍스트에서 섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹입니다.

섹션의 예로는 장, 탭 대화 상자의 다양한 탭 페이지 또는 논문의 번호가 매겨진 섹션이 있습니다. 웹 사이트의 홈 페이지는 소개, 뉴스 항목 및 연락처 정보를위한 섹션으로 나눌 수 있습니다.

작성자는 요소의 콘텐츠를 신디케이트하는 것이 합리적 일 때 section 요소 대신 article 요소 를 사용하는 것이 좋습니다. .

섹션 요소는 일반적인 컨테이너 요소하지 않습니다 . 스타일링이나 스크립팅의 편의를 위해 요소가 필요한 경우 작성자는 대신 div 요소를 사용하는 것이 좋습니다. 일반적인 규칙은 섹션 요소는 요소의 내용이 문서의 개요에 명시 적으로 나열되는 경우에만 적절 하다는 것 입니다.

참고:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

참조 :

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

이 요소의 목적에 대해 많은 혼란이 있었던 것처럼 보이지만 합의 된 한 가지는 이것이 일반적인 래퍼 가 아니라는 것 <div>입니다. CSS 또는 JavaScript 후크가 아닌 의미 론적 목적으로 사용해야합니다 (확실히 스타일을 지정하거나 "스크립팅" 할 수 있음).

내 이해에서 더 나은 예는 다음과 같이 보일 수 있습니다.

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

그 참고 <div>완전히 비 - 의미있는,의 HTML 사양이 허용하지만, 필요하지 않다고 문서에 어디서나 사용할 수 있습니다.

에서 구조화 HTML5에 대한 W3 위키 페이지 , 그것은 말합니다 :

<section>: 서로 다른 기사를 서로 다른 목적 또는 주제로 그룹화하거나 단일 기사의 서로 다른 섹션을 정의하는 데 사용됩니다.

그런 다음 정리 한 이미지 를 표시 합니다.

<article>태그 를 사용하는 방법을 아는 것도 중요합니다 (위의 동일한 W3 링크에서).

<article>와 관련이 <section>있지만 분명히 다릅니다. <section>콘텐츠 또는 기능의 개별 섹션을 그룹화 하는 반면 , <article>은 개별 블로그 게시물, 비디오, 이미지 또는 뉴스 항목과 같은 관련 개별 ​​독립형 콘텐츠를 포함하기위한 것입니다. 이런 식으로 생각해보십시오. 콘텐츠 항목이 여러 개 있고 각 항목이 자체적으로 읽기에 적합하고 RSS 피드에서 개별 항목으로 신디케이트하는 것이 합리적이라면 <article>마크 업하는 데 적합합니다.

이 예에서는 <section id="main">블로그 항목을 포함합니다. 각 블로그 항목은 RSS 피드의 항목으로 신디케이트하는 데 적합하며 문맥을 벗어난 독자적으로 읽을 때 의미가 있으므로 <article>적합합니다.

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

간단 하죠? 기사 내부에 섹션을 중첩 할 수도 있지만 그렇게하는 것이 합리적입니다. 예를 들어, 이러한 각 블로그 게시물이 서로 다른 섹션의 일관된 구조를 가지고 있다면 기사 내부에도 섹션을 넣을 수 있습니다. 다음과 같이 보일 수 있습니다.

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

내 이해는 SECTION이 페이지 "흐름"의 중요한 부분 인 제목이있는 섹션을 보유하고 있다는 것입니다. SECTION은 장, 문서의 번호가 매겨진 부분 등입니다.

ARTICLE은 신디케이트 된 콘텐츠 (예 : 게시물, 뉴스 기사 등)를위한 것입니다. ARTICLE과 SECTION은 완전히 분리되어 있습니다. 사용 사례가 매우 다르기 때문에 다른 하나 없이도 사용할 수 있습니다.

SECTION의 또 다른 점은 페이지에 섹션이 하나만있는 경우에는 사용하지 않아야한다는 것입니다. 또한 각 섹션에는 제목 (H1-6, HGROUP, HEADING)이 있어야합니다. 제목은 SECTION으로 "범위 지정"됩니다. 예를 들어 메인 페이지 (섹션 외부)에서 H1을 사용하고 섹션 내부에서 H1을 사용하는 경우 후자는 H2로 처리됩니다.

사양 의 예 는 작성 시점에서 꽤 좋습니다.

따라서 첫 번째 예에서 ARTICLE로 설명 할 수없는 콘텐츠 섹션이 여러 개있는 경우 정확합니다. (스타일 후크에 대해 원하지 않는 한 #primary DIV가 필요하지 않다는 사소한 점이 있으면 P 태그가 더 좋습니다).

두 번째 예는 SECTION 태그를 모두 제거한 경우 정확합니다. 해당 문서의 데이터는 기사, 게시물 또는 이와 비슷한 것입니다.

SECTION은 컨테이너로 사용되어서는 안됩니다. DIV는 여전히 올바른 용도이며 다른 사용자 정의 상자를 만들 수 있습니다.

섹션 태그를 컨테이너로 확실히 사용할 수 있습니다. div 또는 html5 사양에서 말하는 것보다 더 의미 상 중요한 방식으로 콘텐츠를 그룹화합니다.

section 요소는 문서 또는 응용 프로그램의 일반 섹션을 나타냅니다. 이 컨텍스트에서 섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹입니다. http://www.w3.org/TR/html5/sections.html#the-section-element

올바른 방법은 # 2입니다. 섹션 태그를 사용하여 문서의 섹션을 정의했습니다. 사양 http://www.w3.org/TR/html5/sections.html에서 :

섹션 요소는 일반 컨테이너 요소가 아닙니다. 스타일링이나 스크립팅의 편의를 위해 요소가 필요한 경우 작성자는 대신 div 요소를 사용하는 것이 좋습니다.

그것은 단지 잘못된 것입니다 : 래퍼가 아닙니다. 요소는 문서 개요를 구성하는 데 도움이되는 콘텐츠의 의미 섹션을 나타냅니다. 제목이 있어야합니다. 페이지 래퍼 요소 (모든 HTML 또는 XHTML 용)를 찾고 있다면 Kroc Camen이 설명한대로 요소에 직접 스타일을 적용하는 것이 좋습니다. 스타일 지정을위한 추가 요소가 여전히 필요한 경우. Mike 박사가 설명했듯이 div는 죽지 않았으며 더 적절한 것이 없다면 CSS를 실제로 적용하고 싶은 곳일 것입니다.

당신은 이것을 확인할 수 있습니다 : http://html5doctor.com/avoiding-common-html5-mistakes/