Memahami Elemen HTML5 SECTION
Ketika HTML5 menyusup ke layar beberapa tahun yang lalu, itu menambahkan sekelompok elemen sectioning baru ke langauge, termasuk elemen SECTION. Sebagian besar elemen baru yang diperkenalkan HTML5 memiliki penggunaan yang jelas. Misalnya, elemen digunakan untuk menentukan artikel dan bagian utama dari halaman web, elemen digunakan untuk menentukan konten terkait yang tidak penting untuk sisa halaman, dan header, nav, dan footer cukup jelas. Elemen SECTION yang baru ditambahkan, bagaimanapun, sedikit kurang jelas.
Banyak orang percaya bahwa elemen HTML SECTION dan benar-benar sama - elemen penampung generik yang digunakan untuk memuat konten di laman web. Kenyataannya, bagaimanapun, adalah bahwa kedua elemen ini, sementara keduanya menjadi elemen wadah, sama sekali tidak generik. Ada alasan khusus untuk menggunakan elemen SECTION dan elemen DIV - dan artikel ini akan menjelaskan perbedaan-perbedaan itu.
Bagian dan Div
Elemen SECTION didefinisikan sebagai bagian semantik dari halaman web atau situs yang bukan tipe yang lebih spesifik (seperti artikel atau disisihkan). Saya cenderung menggunakan elemen ini ketika saya menandai bagian halaman yang berbeda - sebuah bagian yang dapat dipindah dan digunakan pada halaman atau bagian lain dari situs. Ini adalah bagian konten yang berbeda, atau "bagian" konten, jika Anda mau.
Sebaliknya, Anda menggunakan elemen DIV untuk bagian-bagian halaman yang ingin Anda bagi, tetapi untuk tujuan selain semantik . Saya akan membungkus suatu area konten dalam sebuah divisi jika saya melakukannya dengan murni untuk memberikan diri saya "hook" untuk digunakan dengan CSS. Ini mungkin bukan bagian yang berbeda dari konten berdasarkan semantik, tetapi adalah sesuatu yang saya mendikte untuk mencapai tata letak yang saya inginkan untuk halaman saya.
Semua Tentang Semantik
Ini adalah konsep yang sulit untuk dipahami, tetapi satu-satunya perbedaan antara elemen DIV dan elemen SECTION adalah semantik. Dengan kata lain, itu adalah arti dari bagian kode yang Anda bagi.
Setiap konten yang terkandung di dalam elemen DIV tidak memiliki makna yang melekat. Paling baik digunakan untuk hal-hal seperti:
- Gaya dan kait CSS untuk gaya CSS
- Layout kontainer
- Pengait JavaScript
- Divisi untuk HTML agar lebih mudah dibaca
Elemen DIV digunakan untuk menjadi satu-satunya elemen yang kami miliki untuk menambahkan pengait guna menata dokumen kami dan membuat kolom dan tata letak yang mewah. Karena itu, kami berakhir dengan HTML yang penuh dengan elemen DIV — apa yang mungkin para perancang web sebut "divitis." Bahkan ada editor WYSIWYG yang menggunakan elemen DIV secara eksklusif. Saya sebenarnya telah menjalankan HTML yang menggunakan elemen DIV, bukan untuk paragraf!
Dengan HTML5, kita dapat mulai menggunakan elemen sectioning untuk membuat lebih banyak dokumen semantis deskriptif (menggunakan untuk navigasi dan untuk angka-angka deskriptif dan sebagainya) dan juga mendefinisikan gaya pada elemen-elemen tersebut.
Bagaimana dengan Elemen SPAN?
Unsur lain yang dipikirkan kebanyakan orang ketika mereka memikirkan elemen DIV adalah elemen. Elemen ini, seperti DIV, bukanlah elemen semantik. Ini adalah elemen inline yang dapat Anda gunakan untuk menambahkan pengait untuk gaya dan skrip di sekitar blok konten sebaris (biasanya teks). Dalam arti itu persis seperti elemen DIV, hanya sebaris daripada elemen blok . Dalam beberapa hal, mungkin lebih mudah untuk memikirkan DIV sebagai elemen SPAN blok-level dan menggunakannya dengan cara yang sama dengan SPAN hanya untuk seluruh blok konten HTML.
Tidak ada elemen pembagian garis yang sebanding dalam HTML5.
Untuk Versi Lama Internet Explorer
Bahkan jika Anda mendukung versi IE yang lebih tua secara dramatis (seperti IE 8 dan lebih rendah) yang tidak dapat mengenali HTML5, Anda tidak perlu takut untuk menggunakan tag HTML semantis yang benar. Semantik akan membantu Anda dan tim Anda mengelola halaman di masa mendatang (karena Anda akan tahu bahwa bagian itu adalah artikel jika dikelilingi oleh elemen ARTICLE). Plus, peramban yang mengenali tag tersebut akan mendukungnya lebih baik.
Anda masih dapat menggunakan elemen pembagian semantik HTML5 dengan Internet Explorer, Anda hanya perlu menambahkan scripting dan mungkin beberapa elemen DIV sekitarnya untuk membuat mereka mengenali tag sebagai HTML.
Menggunakan DIV dan SECTION Elements
Jika Anda menggunakannya dengan benar, Anda dapat menggunakan kedua elemen DIV dan SECTION bersama dalam dokumen HTML5 yang valid. Seperti yang Anda lihat di artikel ini, Anda menggunakan elemen SECTION untuk menentukan bagian konten yang semu secara menyimpang, dan Anda menggunakan elemen DIV sebagai pengait untuk CSS dan JavaScript serta menentukan tata letak yang tidak memiliki makna semantik.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 3/15/17