Komentar: HTML5 membawa serangkaian elemen baru, dua elemen baru berikut: Artikel dan bagian cukup membingungkan. Kita sering menyebutkan keadaan apa kita harus menggunakan elemen -elemen ini. Selanjutnya, kami akan memperkenalkan aplikasi keduanya. Mereka yang tertarik dapat merujuknya.
HTML5 membawa serangkaian elemen baru dan akan banyak digunakan di masa depan. Namun, beberapa elemen mudah bingung saat digunakan, termasuk dua elemen baru berikut: <carticle> dan <section>.
Pertanyaan yang paling umum adalah: Dalam keadaan apa kita harus menggunakan elemen -elemen ini? Dan bagaimana kita harus menggunakan elemen -elemen ini dengan benar?
Elemen bagian
Ini adalah elemen yang paling ambigu. Apa perbedaan antara itu dan elemen <div>? Kami telah menggunakan <div> untuk membagi paragraf, jadi kecuali untuk <div>, kapan kami menggunakan elemen ini? Kami mengutip dokumentasi resmi untuk mengilustrasikannya. Menurut dokumentasi WhatWG, deskripsi berikut dibuat untuk elemen <section>:
<section> elemen mewakili paragraf umum dalam dokumen atau aplikasi - whatwg
Dari deskripsi, kita dapat melihat bahwa fungsi elemen <section> adalah segmentasi, lebih atau kurang mirip dengan <div>. Tapi masih memiliki kasus khusus. Dalam dokumen, pernyataan khusus ditambahkan:
Ketika suatu elemen hanya digunakan untuk gaya atau untuk kenyamanan skrip, kami mendorong penulis untuk menggunakan <div>. <section> elemen cocok untuk ketika konten elemen perlu terdaftar secara eksplisit. - Whatwg
Berdasarkan hal ini, kita dapat meringkas dua poin berikut:
Pertama, meskipun elemen bagian secara teknis bergaya, kami masih merekomendasikan menggunakan elemen div ketika ada gaya atau skrip yang kompleks.
Kedua, mirip dengan elemen <li>, elemen bagian digunakan untuk menyebutkan konten.
Jadi dalam contoh yang realistis, alasan untuk menggunakan elemen <section> adalah untuk menyusun konten blog, kodenya adalah sebagai berikut:
<div>
<section>
<h2> Judul posting blog </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O. </p>
</section>
<section>
<h2> Judul posting blog </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O. </p>
</section>
<section>
<h2> Judul posting blog </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O. </p>
</section>
</div>
Ini hanyalah sebuah contoh, dan elemen <section> juga dapat digunakan untuk tujuan lain.
Elemen artikel
Dari namanya, itu telah menafsirkan dirinya dengan baik, tetapi kita masih harus melihat bagaimana itu dijelaskan dalam dokumentasi resmi:
Bagian terpisah pada dokumen, halaman, aplikasi atau situs dan umumnya, dapat dialokasikan atau digunakan kembali secara independen, misalnya saat publikasi. Ini dapat berupa posting forum, majalah atau berita, entri blog, komentar yang diterapkan pengguna, widget atau widget interaktif, atau konten untuk proyek mandiri lainnya.
Dari deskripsi di atas, kami dapat meringkas bahwa elemen <cart Artikel> didedikasikan untuk artikel terstruktur, terutama yang ingin kami terbitkan, seperti blog, konten halaman atau posting forum.
Contoh berikut menunjukkan cara membangun posting blog menggunakan <Artikel>.
<martikel>
<Header>
<h1> Ini adalah judul posting blog </h1>
<div>
<ul>
<li> Nama Penulis </li>
<li> Simpan dalam kategori </li>
</ul>
</div>
</teader>
<div>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart Pudding Wijen Snaps.
Biskuit bubuk jelly-o buah faworki chocolate bar. Oat puding
Cake Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Permen karet
Halvah Gummies Biskuit Denmark berlaku Gingerbread Jelly-O Pastry.
</div>
</artikel>
Selain itu, elemen <Artikel> juga dapat dikombinasikan dengan elemen bagian. Saat dibutuhkan, Anda dapat menggunakan elemen <section> untuk membagi artikel menjadi beberapa paragraf, seperti yang ditunjukkan dalam contoh berikut.
<martikel>
<Header>
<h1> Ini adalah judul posting blog </h1>
<div>
<ul>
<li> Nama Penulis </li>
<li> Simpan dalam kategori </li>
</ul>
</div>
</teader>
<div>
<section>
<H2> Ini adalah sub-heading </h2>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart Pudding Wijen Snaps.
Biskuit bubuk jelly-o buah faworki chocolate bar. Kue oat puding
Tootsie roll wijen snaps lollipop gingerbread bonbon. Gummies Halvah
Gummies Danish Biscuit Ajukan Gingerbread Jelly-O Pastry.
</section>
<section>
<h3> Ini adalah sub-heading lain </h3>
Topping Cheesecake Sweet Pie Carrot Cake Sweet Roll. Gummi Bears Lemon Drops
toffee wijen snaps tart topping chupa chups apple pie gummies. Cokelat Wafer
kue. Sugar Plum Chocolate Bar Topping Ice Cream Wortel Cake Denmark Bonbon.
Cheesecake Gummi Bears Dragée Jujubes Dragée Dragée Brownie Jelly Biscuit. Bubuk croissant jelly beans pastry.
</section>
</div>
</artikel>
Meringkaskan
Seperti yang diprediksi oleh pendiri World Wide Web dan direktur W3C, semua elemen baru yang dibuat oleh HTML5 adalah untuk tujuan membuat struktur jaringan lebih semantik. Masih ada perdebatan antara pengembang web dan desainer bagaimana menerapkan elemen -elemen ini dengan benar.
Tidak peduli apa, jangan membingungkan sudut pandang. Seperti yang saya sebutkan sebelumnya, selama itu adalah situasi yang masuk akal dan Anda melihat bahwa menggunakannya membuat struktur bermakna, silakan gunakan.