Kapan Menggunakan Elemen HTML5 BAGIAN

Dan Kapan Menggunakan ARTICLE, ASIDE, dan DIV

Elemen HTML5 SECTION yang baru bisa agak membingungkan. Jika Anda telah membuat dokumen HTML sebelum HTML5, kemungkinan Anda sudah menggunakan elemen untuk membuat divisi struktural dalam halaman Anda dan kemudian menata halaman dengan mereka. Jadi mungkin tampak seperti hal yang alami untuk sekadar mengganti elemen DIV Anda yang ada dengan elemen SECTION. Tapi ini secara teknis tidak benar. Jadi jika Anda tidak hanya mengganti elemen DIV dengan elemen SECTION, bagaimana Anda menggunakannya dengan benar?

Elemen SECTION adalah Elemen Semantik

Hal pertama yang harus dipahami adalah bahwa elemen SECTION adalah elemen semantik . Ini berarti bahwa itu memberikan arti kepada agen pengguna dan manusia tentang apa isi yang terlampir - khususnya bagian dari dokumen.

Ini mungkin tampak seperti deskripsi semantik yang sangat umum, dan itu karena itu. Ada elemen HTML5 lain yang memberikan lebih banyak perbedaan semantik ke konten Anda yang harus Anda gunakan terlebih dahulu sebelum Anda menggunakan elemen SECTION:

Kapan Menggunakan Elemen SECTION

Gunakan elemen ARTIKEL ketika konten adalah bagian independen dari situs yang dapat berdiri sendiri dan disindikasikan seperti artikel atau posting blog. Gunakan elemen ASIDE ketika konten secara tangensial terkait dengan konten halaman atau situs itu sendiri, seperti sidebars, anotasi, catatan kaki, atau informasi situs terkait. Gunakan elemen NAV untuk konten yang navigasi.

Elemen SECTION adalah elemen semantik generik. Anda menggunakannya ketika tidak ada elemen wadah semantik lainnya yang sesuai. Anda menggunakannya untuk menggabungkan bagian-bagian dokumen Anda bersama-sama ke dalam unit diskrit yang dapat Anda gambarkan sebagai terkait dalam beberapa cara. Jika Anda tidak bisa menggambarkan elemen di bagian dalam satu atau dua kalimat, maka Anda mungkin tidak seharusnya menggunakan elemen.

Sebagai gantinya, Anda harus menggunakan elemen DIV. Elemen DIV di HTML5 adalah elemen kontainer non-semantik. Jika konten yang Anda coba gabungkan tidak memiliki makna semantik, tetapi Anda masih perlu mengkombinasikannya untuk styling, maka elemen DIV adalah elemen yang tepat untuk digunakan.

Bagaimana Elemen SECTION Bekerja

Bagian dokumen Anda dapat muncul sebagai wadah luar untuk artikel dan elemen ASIDE. Ini juga dapat berisi konten yang bukan bagian dari ARTICLE atau ASIDE. Elemen SECTION juga dapat ditemukan di dalam ARTICLE, NAV, atau ASIDE. Anda bahkan dapat menumpuk bagian untuk menunjukkan bahwa satu kelompok konten adalah bagian dari kelompok konten lain yang merupakan bagian dari artikel atau halaman secara keseluruhan.

Elemen SECTION membuat item di dalam garis besar dokumen. Dan dengan demikian, Anda harus selalu memiliki elemen header (H1 hingga H6) sebagai bagian dari bagian. Jika Anda tidak bisa mendapatkan judul untuk bagian tersebut, maka lagi elemen DIV mungkin lebih tepat. Ingat, jika Anda tidak ingin judul bagian muncul di halaman, Anda selalu dapat menutupinya dengan CSS.

Kapan Tidak Menggunakan Elemen SECTION

Di luar saran di atas untuk menggunakan elemen semantik yang lebih spesifik terlebih dahulu, ada satu area tertentu yang tidak boleh Anda gunakan elemen SECTION: hanya untuk gaya.

Dengan kata lain, jika satu-satunya alasan Anda meletakkan elemen di tempat itu adalah melampirkan properti gaya CSS, Anda tidak boleh menggunakan elemen SECTION. Temukan elemen semantik atau gunakan elemen DIV sebagai gantinya.

Pada akhirnya itu Bukan Tidak Penting

Kesulitan dalam menulis semantik HTML adalah bahwa apa yang semantik bagi saya dapat menjadi omong kosong bagi Anda. Jika Anda merasa bahwa Anda dapat membenarkan penggunaan elemen SECTION di dokumen Anda, maka Anda harus menggunakannya. Sebagian besar agen pengguna tidak peduli dan akan menampilkan halaman seperti yang Anda harapkan apakah Anda memiliki DIV atau SECTION.

Untuk desainer yang suka semantik, menggunakan elemen SECTION dengan cara semantik yang valid adalah penting. Untuk desainer yang hanya ingin halaman mereka berfungsi, itu tidak sepenting itu. Saya percaya bahwa menulis HTML yang semantik valid adalah praktik yang baik dan membuat laman lebih kedap suara di masa depan. Tetapi pada akhirnya terserah Anda.