Memahami HTML5 SECTION Element
Apabila HTML5 meletup ke tempat kejadian beberapa tahun yang lalu, ia menambahkan sekumpulan unsur seksyen baru ke dalam ruang, termasuk elemen SEKSYEN. Kebanyakan elemen baru yang memperkenalkan HTML5 mempunyai kegunaan yang jelas. Sebagai contoh, elemen digunakan untuk menentukan artikel dan bahagian utama laman web, elemen digunakan untuk menentukan kandungan yang berkaitan yang tidak kritikal kepada seluruh halaman, dan header, nav, dan footer cukup jelas. Unsur BAHAGIAN yang baru ditambahkan, bagaimanapun, sedikit kurang jelas.
Ramai orang percaya bahawa elemen HTML SEKSYEN dan benar-benar hanya unsur-unsur kontena generik yang sama digunakan untuk mengandungi kandungan pada halaman web. Walau bagaimanapun, realiti adalah bahawa kedua-dua elemen ini, manakala kedua-dua elemen kontena, adalah apa-apa tetapi generik. Terdapat sebab-sebab tertentu untuk menggunakan elemen SECTION dan elemen DIV - dan artikel ini akan menjelaskan perbezaan tersebut.
Bahagian dan Divs
Elemen SECTION ditakrifkan sebagai seksyen semantik pada halaman web atau tapak yang bukan jenis yang lebih spesifik (seperti artikel atau diketepikan). Saya cenderung untuk menggunakan elemen ini apabila saya menandakan bahagian yang berbeza dari halaman - satu bahagian yang boleh diborongkan untuk digerakkan dan digunakan pada laman atau bahagian lain laman web. Ia adalah sekeping kandungan yang berbeza, atau "seksyen" kandungan, jika anda mahu.
Sebaliknya, anda menggunakan elemen DIV untuk bahagian-bahagian halaman yang anda mahu dibahagikan, tetapi untuk tujuan selain daripada semantik . Saya akan membungkus kawasan kandungan di bahagian jika saya melakukannya semata-mata untuk memberikan diri saya "cangkuk" untuk digunakan dengan CSS. Ia mungkin bukan seksyen kandungan yang berbeza berdasarkan semantik, tetapi merupakan sesuatu yang saya dictate untuk mencapai susun atur yang saya inginkan untuk halaman saya.
Semua Tentang Semantik
Ini adalah konsep yang sukar difahami, tetapi satu-satunya perbezaan antara elemen DIV dan elemen SECTION adalah semantik. Dalam erti kata lain, itu bermakna bahagian kod yang anda sedang membahagikan.
Mana-mana kandungan yang terkandung di dalam elemen DIV tidak mempunyai makna yang wujud. Ia lebih baik digunakan untuk perkara-perkara seperti:
- Gaya CSS dan cangkuk untuk gaya CSS
- Bekas susun atur
- Cangkuk JavaScript
- Bahagian untuk HTML untuk menjadikannya lebih mudah dibaca
Elemen DIV digunakan untuk menjadi satu-satunya elemen yang kita ada untuk menambah cangkuk untuk menyusun dokumen kami dan membuat lajur dan susun atur mewah. Oleh itu, kami telah mengakhiri dengan HTML yang penuh dengan elemen DIV-apa yang mungkin disebut pereka web "divitis." Terdapat juga editor WYSIWYG yang menggunakan elemen DIV semata-mata. Saya sebenarnya berjalan di seluruh HTML yang menggunakan elemen DIV dan bukan untuk perenggan!
Dengan HTML5, kita boleh mula menggunakan elemen seksyen untuk menghasilkan lebih banyak dokumen deskriptif yang semantik (menggunakan untuk navigasi dan untuk angka deskriptif dan sebagainya) dan juga menentukan gaya pada elemen tersebut.
Apa Mengenai Elemen SPAN?
Unsur lain yang difikirkan oleh kebanyakan orang apabila mereka memikirkan unsur DIV adalah elemen. Unsur ini, seperti DIV, bukan unsur semantik. Ia adalah elemen sebaris yang boleh anda gunakan untuk menambah cangkuk untuk gaya dan skrip di sekitar blok sebaris kandungan (biasanya teks). Dalam erti kata itu ia betul-betul seperti unsur DIV, hanya sebaris dan sebaliknya unsur blok . Dalam beberapa cara, mungkin lebih mudah untuk memikirkan DIV sebagai unsur SPAN peringkat blok dan menggunakannya dengan cara yang sama anda akan SPAN hanya untuk keseluruhan blok kandungan HTML.
Tiada unsur seksyen sebaris sebanding dalam HTML5.
Untuk Versi Lama Internet Explorer
Walaupun anda menyokong versi IE secara mendadak (seperti IE 8 dan lebih rendah) yang tidak dapat mengiktiraf HTML5 dengan pasti, anda tidak perlu takut untuk menggunakan teg HTML secara semantik. Semantik akan membantu anda dan pasukan anda menguruskan halaman di masa depan (kerana anda akan tahu bahawa bahagian itu adalah artikel jika ia dikelilingi oleh unsur ARTIKEL). Tambahan pula, pelayar yang mengenali teg tersebut akan menyokong mereka dengan lebih baik.
Anda masih boleh menggunakan elemen seksyen semantik HTML5 dengan Internet Explorer, anda hanya perlu menambah skrip dan mungkin beberapa elemen DIV yang mengelilingi untuk mengenali tag sebagai HTML.
Menggunakan Bahagian DIV dan SECTION
Jika anda menggunakannya dengan betul, anda boleh menggunakan kedua-dua elemen DIV dan SECTION bersama-sama dalam dokumen HTML5 yang sah. Seperti yang anda lihat di sini dalam artikel ini, anda menggunakan elemen SECTION untuk mentakrifkan bahagian-bahagian yang diskrit secara semantik dari kandungan, dan anda menggunakan elemen DIV sebagai kait untuk CSS dan JavaScript serta menentukan susun atur yang tidak mempunyai makna semantik.
Artikel asal oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 15/03/17