Saat HTML5 menyebar ke tempat kejadian beberapa tahun yang lalu, ia menambahkan sekelompok elemen penampang baru ke langauge, termasuk elemen SECTION . Sebagian besar elemen baru yang diperkenalkan HTML5 memiliki kegunaan yang jelas. Misalnya, elemen digunakan untuk menentukan artikel dan bagian utama dari sebuah halaman web, elemen tersebut digunakan untuk mendefinisikan konten terkait yang tidak penting untuk keseluruhan halaman, dan header, nav, dan footer cukup jelas.
Unsur SECTION baru ditambahkan, bagaimanapun, agak kurang jelas.
Banyak orang percaya bahwa elemen HTML SECTION dan benar-benar sama - elemen wadah generik yang digunakan untuk menampung konten di halaman web. Kenyataannya, bagaimanapun, adalah bahwa kedua elemen ini, sementara keduanya merupakan elemen wadah, tidak lain adalah generik. Ada alasan khusus untuk menggunakan elemen SECTION dan elemen DIV - dan artikel ini akan menjelaskan perbedaan tersebut.
BAGIAN DAN DIVS
Elemen SECTION didefinisikan sebagai bagian semantik dari halaman web atau situs yang bukan tipe lain yang lebih spesifik (seperti artikel atau samping). Saya cenderung menggunakan elemen ini saat menandai bagian yang berbeda dari halaman - bagian yang bisa dipindahkan 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 halaman yang ingin Anda bagi, tapi untuk tujuan selain semantik .
Saya akan membungkus area konten di divisi jika saya melakukannya dengan murni untuk memberi diri saya "kait" untuk digunakan dengan CSS. Ini mungkin bukan bagian konten yang berbeda berdasarkan semantik, tapi adalah sesuatu yang saya cari untuk mencapai tata letak yang saya inginkan untuk halaman saya.
INI SEMUA TENTANG SEMANTIK
Ini adalah konsep yang sulit untuk dipahami, namun satu-satunya perbedaan antara elemen DIV dan elemen BAGIANnya adalah semantik.
Dengan kata lain, itu adalah arti dari bagian kode yang Anda bagikan.
Konten apa pun yang terkandung di dalam elemen DIV tidak memiliki makna yang melekat. Hal ini paling baik digunakan untuk hal-hal seperti:
- Gaya dan kait CSS untuk gaya CSS
- Kontainer layout
- Kait JavaScript
- Divisi untuk HTML agar lebih mudah dibaca
Elemen DIV digunakan sebagai satu-satunya elemen yang kami miliki untuk menambahkan kait untuk menyesuaikan dokumen kami dan membuat kolom dan tata letak yang mewah. Karena itu, kami mengakhiri dengan HTML yang penuh dengan elemen DIV - yang mungkin disebut perancang web "divitis." Bahkan ada editor WYSIWYG yang menggunakan elemen DIV secara eksklusif. Saya telah benar-benar menjalankan HTML yang menggunakan elemen DIV bukan untuk paragraf!
Dengan HTML5, kita bisa mulai menggunakan elemen sectioning untuk membuat dokumen deskriptif semantik lebih banyak (menggunakan untuk navigasi dan untuk gambar deskriptif dan sebagainya) dan juga mendefinisikan gaya pada elemen tersebut.
BAGAIMANA DENGAN ELEMEN SPAN ?
Elemen lain yang dipikirkan kebanyakan orang saat memikirkan elemen DIV adalah elemennya. Elemen ini, seperti DIV , bukanlah elemen semantik. Ini adalah elemen inline yang dapat Anda gunakan untuk menambahkan kait untuk gaya dan skrip di sekitar blok konten inline (biasanya teks).
Dalam hal ini persis seperti elemen DIV , hanya elemen inline dan bukan elemen blok . Dalam beberapa hal, mungkin lebih mudah untuk memikirkan DIV sebagai elemen SPAN tingkat blok dan menggunakannya dengan cara yang sama seperti SPAN hanya untuk keseluruhan isi HTML.
Tidak ada elemen penyebutan inline yang sebanding di HTML5.
UNTUK VERSI LAMA INTERNET EXPLORER
Bahkan jika Anda mendukung versi IE yang lebih dramatis (seperti IE 8 dan yang lebih rendah) yang tidak andal mengenali HTML5, Anda tidak perlu takut untuk menggunakan tag HTML semantik yang benar. Semantik akan membantu Anda dan tim Anda mengelola halaman di masa depan (karena Anda akan tahu bahwa bagian itu adalah artikel jika dikelilingi oleh unsur ARTICLE ). Plus, browser yang mengenali tag tersebut akan mendukung mereka dengan lebih baik.
Anda masih bisa menggunakan elemen pelipatan HTML5 semantik dengan Internet Explorer, Anda hanya perlu menambahkan script dan mungkin beberapa elemen DIV sekitarnya untuk membuat mereka mengenali tag sebagai HTML.
MENGGUNAKAN ELEMEN DIV DAN SECTION
Jika Anda menggunakannya dengan benar, Anda dapat menggunakan elemen DIV dan SECTION bersama-sama dalam dokumen HTML5 yang valid. Seperti yang telah Anda lihat di artikel ini, Anda menggunakan elemen SECTION untuk menentukan bagian konten secara semantik dari disk, dan Anda menggunakan elemen DIV sebagai kait untuk CSS dan JavaScript serta menentukan tata letak yang tidak memiliki makna semantik.
Tidak ada komentar:
Posting Komentar