Bagaimana cara menggunakan tag "bagian" dengan benar di HTML5?

Saya mencoba membangun tata letak di HTML5 dan setelah membaca beberapa artikel berbeda, saya hanya bingung. Saya mencoba untuk mendapatkan beberapa masukan tentang bagaimana itu harus digunakan.

Di bawah ini adalah variasi yang saya bolak-balik:

1)

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

Dapatkah Anda menggunakan tag bagian untuk bertindak seperti wadah?

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>

Apa metode yang benar untuk menggunakan <section>tag?

Jawabannya ada di spesifikasi saat ini:

Elemen bagian mewakili bagian umum dari dokumen atau aplikasi. Bagian, dalam konteks ini, adalah pengelompokan konten tematik, biasanya dengan tajuk.

Contoh bagian adalah bab, berbagai halaman tab dalam kotak dialog bertab, atau bagian bernomor dari tesis. Halaman beranda situs web dapat dibagi menjadi beberapa bagian untuk pendahuluan, item berita, dan informasi kontak.

Penulis didorong untuk menggunakan elemen artikel alih-alih elemen bagian jika memungkinkan untuk mensindikasikan konten elemen .

The Bagian unsur bukan unsur wadah generik . Ketika sebuah elemen diperlukan untuk tujuan gaya atau sebagai kemudahan untuk pembuatan skrip, penulis didorong untuk menggunakan elemen div sebagai gantinya. Aturan umumnya adalah elemen bagian hanya sesuai jika konten elemen akan dicantumkan secara eksplisit dalam kerangka dokumen .

Referensi:

• 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

Lihat juga:

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

Sepertinya ada banyak kebingungan tentang tujuan elemen ini, tetapi satu hal yang disepakati adalah bahwa ini bukan pembungkus umum, seperti <div>adanya. Ini harus digunakan untuk tujuan semantik, dan bukan pengait CSS atau JavaScript (meskipun tentunya dapat diberi gaya atau "dituliskan").

Contoh yang lebih baik, dari pemahaman saya, mungkin terlihat seperti ini:

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

Perhatikan bahwa <div>, karena sepenuhnya non-semantik, dapat digunakan di mana saja dalam dokumen yang diizinkan oleh spesifikasi HTML, tetapi tidak diperlukan.

Di halaman wiki W3 tentang penataan HTML5 , dikatakan:

<section>: Digunakan untuk mengelompokkan artikel yang berbeda ke dalam tujuan atau subjek berbeda, atau untuk menentukan bagian berbeda dari satu artikel.

Dan kemudian menampilkan gambar yang saya bersihkan:

Penting juga untuk mengetahui cara menggunakan <article>tag (dari tautan W3 yang sama di atas):

<article>terkait dengan <section>, tetapi sangat berbeda. Sedangkan <section>untuk mengelompokkan bagian berbeda dari konten atau fungsionalitas, <article>adalah untuk berisi bagian konten mandiri terkait, seperti posting blog individu, video, gambar atau item berita. Anggap saja seperti ini - jika Anda memiliki sejumlah item konten, yang masing-masing akan cocok untuk dibaca sendiri, dan akan masuk akal untuk disindikasikan sebagai item terpisah dalam umpan RSS, maka item <article>tersebut cocok untuk menandainya.

Dalam contoh kami, <section id="main">berisi entri blog. Setiap entri blog akan cocok untuk disindikasi sebagai item dalam umpan RSS, dan akan masuk akal saat dibaca sendiri, di luar konteks, oleh karena <article>itu sempurna untuk mereka:

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

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

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

Sederhana ya? Ketahuilah bahwa Anda juga dapat melapisi bagian di dalam artikel, jika masuk akal untuk melakukannya. Misalnya, jika setiap postingan blog ini memiliki struktur bagian yang berbeda secara konsisten, Anda juga dapat meletakkan bagian di dalam artikel Anda. Ini bisa terlihat seperti ini:

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

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

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

Pemahaman saya adalah bahwa BAGIAN memegang bagian dengan judul yang merupakan bagian penting dari "aliran" halaman (bukan samping). BAGIAN akan menjadi bab, bagian dokumen yang dinomori, dan seterusnya.

ARTICLE adalah untuk konten bersindikasi - mis. Posting, berita, dll. ARTICLE dan SECTION benar-benar terpisah - Anda dapat memiliki satu tanpa yang lain karena kasus penggunaannya sangat berbeda.

Hal lain tentang SECTION adalah Anda tidak boleh menggunakannya jika halaman Anda hanya memiliki satu bagian. Selain itu, setiap bagian harus memiliki judul (H1-6, HGROUP, HEADING). Judul "dibatasi" dengan BAGIAN, jadi misalnya jika Anda menggunakan H1 di halaman utama (di luar BAGIAN) dan kemudian H1 di dalam bagian, yang terakhir akan diperlakukan sebagai H2.

Contoh dalam spesifikasi cukup bagus pada saat penulisan.

Jadi dalam contoh pertama Anda akan benar jika Anda memiliki beberapa bagian konten yang tidak dapat dijelaskan sebagai ARTICLE. (Dengan titik kecil bahwa Anda tidak memerlukan #primer DIV kecuali Anda menginginkannya untuk pengait gaya - tag P akan lebih baik).

Contoh kedua akan benar jika Anda menghapus semua tag SECTION - data dalam dokumen itu adalah artikel, posting atau sesuatu seperti ini.

SECTION tidak boleh digunakan sebagai wadah - DIV masih digunakan dengan benar untuk itu, dan kotak kustom lainnya yang mungkin Anda buat.

Anda pasti dapat menggunakan tag bagian sebagai wadah. Itu ada untuk mengelompokkan konten dengan cara yang lebih signifikan secara semantik daripada dengan div atau seperti yang dikatakan spesifikasi html5:

Elemen bagian mewakili bagian umum dari dokumen atau aplikasi. Bagian, dalam konteks ini, adalah pengelompokan konten tematik, biasanya dengan tajuk. http://www.w3.org/TR/html5/sections.html#the-section-element

Metode yang benar adalah # 2. Anda menggunakan tag bagian untuk menentukan bagian dari dokumen Anda. Dari spesifikasi http://www.w3.org/TR/html5/sections.html :

Elemen bagian bukanlah elemen penampung umum. Ketika sebuah elemen diperlukan untuk tujuan gaya atau sebagai kemudahan untuk pembuatan skrip, penulis didorong untuk menggunakan elemen div sebagai gantinya

itu salah: bukan pembungkus. Elemen tersebut menunjukkan bagian semantik dari konten Anda untuk membantu membuat kerangka dokumen. Ini harus berisi sebuah heading. Jika Anda mencari elemen pembungkus halaman (untuk rasa HTML atau XHTML), pertimbangkan untuk menerapkan gaya langsung ke elemen seperti yang dijelaskan oleh Kroc Camen. Jika Anda masih membutuhkan elemen tambahan untuk penataan, gunakan. Seperti yang dijelaskan Dr Mike, div tidak mati, dan jika tidak ada yang lebih sesuai, mungkin di situlah Anda benar-benar ingin menerapkan CSS Anda.

Anda dapat memeriksa ini: http://html5doctor.com/avoiding-common-html5-mistakes/