7 tag alternatif pengganti tag "div"
Di tahap awal belajar struktur HTML hampir semua orang mengalami "div soup", yaitu telalu sering menggunakan tag <div> dalam membuat konten pada halaman html. Pada dasarnya tidak masalah dengan cara penulisan html yang seperti ini. Browser masih bisa membaca markup mu dan menampilkanya. Masalah utamanya adalah terlalu banyak menggunakan tag <div> menjadikan penulisan HTML kurang semantik. Terus apa kelebihan HTML yang semantik? Kelebihan HTML yang semantik antara lain menjadikan lebih mudah terindex (SEO), menjadi mudah untuk di maintain dan masih banyak lagi kelebihan dari html yang semantik.
Menurut situs w3C:
Oke, jadi apa yang dimaksud "elemen yang sesuai" yang disebut w3c? ketika HTML5 dirilis pada 2014, mereka memperkenalkan bebrapa elemen baru dan pengelompokkan elemen yang dapat digunakan web developer untuk menjadikan markup mereka lebih semantik. Jadi "elemen yang sesuai" yang dimaksud adalah elemen yang menjadikan markup lebih semantik.
Mari kita cari beberapa elemen (tag) alternatif pengganti "div".
1. Tag <Main>
Tag <main> digunakan untuk membuat konten utama dalam sebuah dokumen. Konten di dalam tag <main> harus unik, dan tidak boleh berisi konten yang berulang, antara lain Sidebar, link navigasi, form pencarian. Dalam sebuah dokumen tidak boleh ada lebih dari satu tag <main>.
2. Tag <Section>
Tag <Section> digunakan untuk mengelompokkan konten berdasarkan tema dan merepresentasikan bagain dari sebuah dokumen. Sebagai contoh menu navigasi harus berada dalam tag <nav>, tetapi hasil pencarian tidak mempunyai elemen yang spesifik dan harus di taruh dalam tag <section>
3. Tag <Aside>
Tag <Aside> umumnya digunakan untuk mendeskripsikan bagian dokumen yang tidak langsung terkait dengan konten utama sebuah dokumen. Tag <Aside> biasanya digunakan sebagai menu sidebar.
4. Tag <Article>
Tag <Article> dapat digunakan untuk bagian konten yang dapat berdiri sendiri. Semisal postingan blog, berita artikel, dan kolom komentar, beberapa bagian tersebut sangat dianjurkan dibuat menggunakan tag <Article>.
5. Tag <Blockquote>
Tag <Blockquote> biasanya digunakan untuk mengutip tulisan/ kata-kata yang di ambil dari sumber luar ( Perorangan, berita, studi kasus dll ). Url sumber pengutipan biasanya menggunakan tag <cite> dalam penulisanya.
6. Tag <Nav>
Tag <Nav> digunakan untuk membuat tautan navigasi. Contoh utama penggunaan tag <nav> antara lain menu navigasi, daftar isi dan index artikel.
7. Tag <Footer>
Tag <footer> biasanya digunakan untuk membuat bagian yang berada di akhir (bawah) sebuah halaman web. tag <footer> baisanya digunakan dalam pembuatan, informasi tentang penulis, data copyright dan tautan yang berhubungan dengan halaman web.
Sekarang kita tahu beberapa tag semantik yang optimal sebagai pengganti tag <div>, tapi bagaimana kita tahu kapan menggunakanya? dan kapan kita boleh menggunakan tag <div> ke dalam mark-up kita?. HTML5 Doctor menyediakan flowchart untuk membantu kita dalam memilih elemen. kamu bisa lihat gambar dibawah ini.
Terima kasih telah membaca!
Sumber:
1. Medium
2. Firefox
Menurut situs w3C:
Elemen (tag) <div> tidak mempunyai arti yang khusus sama sekali, penulis biasanya melihat elemen div sebagai pilihan terakhir, ketika elemen lain tidak ada yang cocok. Gunakan elemen yang lebih sesuai ketimbang menggunakan elemen div, elemen yang sesuai mempermudah pengaksesan bagi pembaca dan mempermudah me-maintain bagi penulis.
Oke, jadi apa yang dimaksud "elemen yang sesuai" yang disebut w3c? ketika HTML5 dirilis pada 2014, mereka memperkenalkan bebrapa elemen baru dan pengelompokkan elemen yang dapat digunakan web developer untuk menjadikan markup mereka lebih semantik. Jadi "elemen yang sesuai" yang dimaksud adalah elemen yang menjadikan markup lebih semantik.
Mari kita cari beberapa elemen (tag) alternatif pengganti "div".
1. Tag <Main>
Tag <main> digunakan untuk membuat konten utama dalam sebuah dokumen. Konten di dalam tag <main> harus unik, dan tidak boleh berisi konten yang berulang, antara lain Sidebar, link navigasi, form pencarian. Dalam sebuah dokumen tidak boleh ada lebih dari satu tag <main>.
2. Tag <Section>
Tag <Section> digunakan untuk mengelompokkan konten berdasarkan tema dan merepresentasikan bagain dari sebuah dokumen. Sebagai contoh menu navigasi harus berada dalam tag <nav>, tetapi hasil pencarian tidak mempunyai elemen yang spesifik dan harus di taruh dalam tag <section>
3. Tag <Aside>
Tag <Aside> umumnya digunakan untuk mendeskripsikan bagian dokumen yang tidak langsung terkait dengan konten utama sebuah dokumen. Tag <Aside> biasanya digunakan sebagai menu sidebar.
4. Tag <Article>
Tag <Article> dapat digunakan untuk bagian konten yang dapat berdiri sendiri. Semisal postingan blog, berita artikel, dan kolom komentar, beberapa bagian tersebut sangat dianjurkan dibuat menggunakan tag <Article>.
5. Tag <Blockquote>
Tag <Blockquote> biasanya digunakan untuk mengutip tulisan/ kata-kata yang di ambil dari sumber luar ( Perorangan, berita, studi kasus dll ). Url sumber pengutipan biasanya menggunakan tag <cite> dalam penulisanya.
6. Tag <Nav>
Tag <Nav> digunakan untuk membuat tautan navigasi. Contoh utama penggunaan tag <nav> antara lain menu navigasi, daftar isi dan index artikel.
7. Tag <Footer>
Tag <footer> biasanya digunakan untuk membuat bagian yang berada di akhir (bawah) sebuah halaman web. tag <footer> baisanya digunakan dalam pembuatan, informasi tentang penulis, data copyright dan tautan yang berhubungan dengan halaman web.
Sekarang kita tahu beberapa tag semantik yang optimal sebagai pengganti tag <div>, tapi bagaimana kita tahu kapan menggunakanya? dan kapan kita boleh menggunakan tag <div> ke dalam mark-up kita?. HTML5 Doctor menyediakan flowchart untuk membantu kita dalam memilih elemen. kamu bisa lihat gambar dibawah ini.
Terima kasih telah membaca!
Sumber:
1. Medium
2. Firefox
Komentar
Posting Komentar