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

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

And then displays an image that I cleaned up:

It's also important to know how to use the <article> tag (from the same W3 link above):

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up.

In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

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

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

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

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

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

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

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

---

My understanding is that SECTION holds a section with a heading which is an important part of the "flow" of the page (not an aside). SECTIONs would be chapters, numbered parts of documents and so on.

ARTICLE is for syndicated content -- e.g. posts, news stories etc. ARTICLE and SECTION are completely separate -- you can have one without the other as they are very different use cases.

Another thing about SECTION is that you shouldn't use it if your page has only the one section. Also, each section must have a heading (H1-6, HGROUP, HEADING). Headings are "scoped" withing the SECTION, so e.g. if you use a H1 in the main page (outside a SECTION) and then a H1 inside the section, the latter will be treated as an H2.

The examples in the spec are pretty good at time of writing.

So in your first example would be correct if you had several sections of content which couldn't be described as ARTICLEs. (With a minor point that you wouldn't need the #primary DIV unless you wanted it for a style hook - P tags would be better).

The second example would be correct if you removed all the SECTION tags -- the data in that document would be articles, posts or something like this.

SECTIONs should not be used as containers -- DIV is still the correct use for that, and any other custom box you might come up with.

---

You can definitely use the section tag as a container. It is there to group content in a more semantically significant way than with a div or as the html5 spec says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. http://www.w3.org/TR/html5/sections.html#the-section-element

---

The correct method is #2. You used the section tag to define a section of your document. From the specs http://www.w3.org/TR/html5/sections.html:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead

---

that’s just wrong: is not a wrapper. The element denotes a semantic section of your content to help construct a document outline. It should contain a heading. If you’re looking for a page wrapper element (for any flavour of HTML or XHTML), consider applying styles directly to the element as described by Kroc Camen. If you still need an additional element for styling, use a . As Dr Mike explains, div isn’t dead, and if there’s nothing else more appropriate, it’s probably where you really want to apply your CSS.

you can check this : http://html5doctor.com/avoiding-common-html5-mistakes/

참고URL : https://stackoverflow.com/questions/7183132/how-to-correctly-use-section-tag-in-html5