Jak poprawnie używać tagu „sekcja” w HTML5?

Próbuję zbudować układ w HTML5 i po przeczytaniu kilku różnych artykułów jestem po prostu zdezorientowany. Próbuję uzyskać informacje na temat tego, jak powinno być używane.

Poniżej znajdują się odmiany, z którymi się poruszam:

1)

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

Czy możesz użyć tagu sekcji, aby zachowywać się jak kontener?

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>

Jaka jest poprawna metoda używania <section>tagu?

Odpowiedź znajduje się w aktualnej specyfikacji:

Element section reprezentuje ogólną sekcję dokumentu lub aplikacji. Sekcja w tym kontekście to tematyczna grupa treści, zazwyczaj z nagłówkiem.

Przykładami sekcji byłyby rozdziały, różne strony z zakładkami w oknie dialogowym z zakładkami lub numerowane sekcje pracy. Stronę główną witryny sieci Web można podzielić na sekcje zawierające wprowadzenie, wiadomości i informacje kontaktowe.

Zachęca się autorów do używania elementu article zamiast elementu section, jeśli miałoby sens syndykowanie zawartości elementu .

Element sekcji nie jest ogólnym elementem kontenera . Gdy element jest potrzebny do stylizacji lub dla ułatwienia pisania skryptów, autorzy są zachęcani do używania zamiast niego elementu div. Ogólna zasada mówi, że element sekcji jest odpowiedni tylko wtedy, gdy zawartość elementu byłaby wyraźnie wymieniona w konspekcie dokumentu .

Odniesienie:

• 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

Zobacz także:

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

Wygląda na to, że było dużo zamieszania o celu tego pierwiastka, ale jedna rzecz, która jest uzgodniona jest to, że nie rodzajowe otoki, jak <div>jest. Powinien być używany do celów semantycznych, a nie jako haczyk CSS lub JavaScript (chociaż z pewnością można go określić stylem lub „za pomocą skryptu ”).

Lepszy przykład, z mojego zrozumienia, może wyglądać mniej więcej tak:

<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>

Zwróć uwagę, że <div>będąc całkowicie niesemantycznym, można go używać w dowolnym miejscu dokumentu, na który zezwala specyfikacja HTML, ale nie jest to konieczne.

Na stronie wiki W3 o tworzeniu struktury HTML5 jest napisane:

<section>: Służy do grupowania różnych artykułów według różnych celów lub tematów albo do definiowania różnych sekcji jednego artykułu.

A następnie wyświetla obraz, który wyczyściłem:

Ważne jest również, aby wiedzieć, jak używać <article>tagu (z tego samego linku W3 powyżej):

<article>jest powiązany <section>, ale jest wyraźnie inny. Natomiast <section>służy do grupowania odrębnych sekcji treści lub funkcji, <article>służy do zawierania powiązanych pojedynczych, niezależnych elementów treści, takich jak pojedyncze posty na blogu, filmy, obrazy lub wiadomości. Pomyśl o tym w ten sposób - jeśli masz wiele elementów treści, z których każdy byłby odpowiedni do samodzielnego czytania i miałby sens syndykowanie jako oddzielne elementy w kanale RSS, wtedy <article>nadaje się do oznaczania ich.

W naszym przykładzie <section id="main">zawiera wpisy na blogu. Każdy wpis na blogu byłby odpowiedni do syndykowania jako element w kanale RSS i miałby sens, gdy byłby czytany samodzielnie, poza kontekstem, dlatego <article>jest dla nich idealny:

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

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

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

Proste, prawda? Pamiętaj jednak, że możesz także zagnieżdżać sekcje w artykułach, jeśli ma to sens. Na przykład, jeśli każdy z tych postów na blogu ma spójną strukturę odrębnych sekcji, możesz umieścić sekcje również w swoich artykułach. Może to wyglądać mniej więcej tak:

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

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

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

Rozumiem, że SECTION zawiera sekcję z nagłówkiem, który jest ważną częścią „przepływu” strony (a nie bokiem). Sekcje to rozdziały, numerowane części dokumentów i tak dalej.

ARTYKUŁ jest przeznaczony dla treści dystrybuowanych - np. Postów, wiadomości itp. ARTYKUŁ i SEKCJA są całkowicie oddzielne - możesz mieć jeden bez drugiego, ponieważ są to bardzo różne przypadki użycia.

Inną rzeczą dotyczącą SECTION jest to, że nie powinieneś go używać, jeśli twoja strona ma tylko jedną sekcję. Ponadto każda sekcja musi mieć nagłówek (H1-6, HGROUP, HEADING). Nagłówki są „ograniczone” w obrębie SEKCJI, więc np. Jeśli używasz H1 na stronie głównej (poza SEKCJĄ), a następnie H1 wewnątrz sekcji, ta ostatnia będzie traktowana jako H2.

Przykłady w specyfikacji są całkiem dobre w momencie pisania.

Tak więc Twój pierwszy przykład byłby poprawny, gdybyś miał kilka sekcji treści, których nie można opisać jako ARTYKUŁÓW. (Z drobną uwagą, że nie potrzebujesz #primary DIV, chyba że chcesz go jako haka stylu - znaczniki P byłyby lepsze).

Drugi przykład byłby poprawny, gdybyś usunął wszystkie tagi SECTION - dane w tym dokumencie byłyby artykułami, postami lub czymś podobnym.

SEKCJI nie powinny być używane jako pojemniki - DIV jest nadal właściwym zastosowaniem do tego i każdego innego niestandardowego pudełka, które możesz wymyślić.

Zdecydowanie możesz użyć tagu sekcji jako kontenera. Służy do grupowania treści w bardziej znaczący semantycznie sposób niż w przypadku elementu div lub zgodnie ze specyfikacją html5:

Element section reprezentuje ogólną sekcję dokumentu lub aplikacji. Sekcja w tym kontekście to tematyczna grupa treści, zazwyczaj z nagłówkiem. http://www.w3.org/TR/html5/sections.html#the-section-element

Prawidłowa metoda to nr 2. Użyłeś znacznika sekcji, aby zdefiniować sekcję dokumentu. Ze specyfikacji http://www.w3.org/TR/html5/sections.html :

Element sekcji nie jest ogólnym elementem kontenera. Gdy element jest potrzebny do stylizacji lub dla ułatwienia pisania skryptów, autorzy są zachęcani do używania zamiast niego elementu div

to po prostu nie tak: nie jest opakowaniem. Element oznacza semantyczną sekcję treści, aby pomóc w tworzeniu konspektu dokumentu. Powinien zawierać nagłówek. Jeśli szukasz elementu opakowującego stronę (dla dowolnego stylu HTML lub XHTML), rozważ zastosowanie stylów bezpośrednio do elementu, zgodnie z opisem Kroc Camen. Jeśli nadal potrzebujesz dodatkowego elementu do stylizacji, użyj pliku. Jak wyjaśnia dr Mike, div nie jest martwy, a jeśli nie ma nic bardziej odpowiedniego, prawdopodobnie jest to miejsce, w którym naprawdę chcesz zastosować swój CSS.

możesz to sprawdzić: http://html5doctor.com/avoiding-common-html5-mistakes/