1 2 3 4 |
<div style="color:#ffffff"> <h3>Judul Halaman</h3> <p>Contoh paragraf.</p> </div> |
Definisi dan Penggunaan
Elemen HTML div
(<div>
) mendefinisikan sebuah divisi atau bagian dalam dokumen HTML. Elemen HTML ini merupakan tipe block level yang akan memulai blok atau baris baru seperti elemen paragraf, elemen ini pada dasarnya tidak merepresentasikan apa-apa atau tidak ada makna semantik.
Berbeda dengan elemen paragraf, elemen HTML div
digunakan untuk mengelompok-kan beberapa elemen untuk tujuan style dengan menggunakan atribut class
atau id
, bisa juga langsung dengan memberikan style dengan menggunakan atribut style
. Elemen HTML div
sangat sering digunakan bersama-sama dengan CSS melalui atribut class
atau id
untuk tata letak halaman web.
Gunakan elemen HTML div
ini ketika kita sudah tidak menemukan elemen semantik yang cocok seperti elemen HTML nav
atau article
, karena elemen ini tidak memberikan makna semantik dan juga sekarang HTML sudah sampai versi 5 yang mana pada versi ini sudah menghadirkan beberapa elemen dengan memberikan makna semantik.
Dukungan Browser
Elemen | |||||
---|---|---|---|---|---|
<div> | Ya | Ya | Ya | Ya | Ya |
Latihan Elemen HTML div
Sebagai latihan membuat elemen HTML div
mari kita membuat satu file halaman HTML dengan nama index.html
, setelah kita membuat file tersebut selanjutnya kita ketikkan skrip berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Contoh elemen div</title> </head> <body> <!-- divisi navigasi web --> <div id="navigasi"> <ul> <li> Navigasi 1 </li> <li> Navigasi 2 </li> <li> Navigasi 3 </li> </ul> </div> <!-- divisi konten web --> <div id="konten"> <h1>Judul Halaman Nyekrip</h1> <p>Contoh isi paragraf</p> </div> </body> </html> |
Perhatikan gambar diatas yang merupakan hasil running skrip HTML, dalam elemen HTML div
diatas terdapat elemen HTML ul
, li
, h1
dan p
. Elemen HTML div
dapat mengandung elemen dengan tipe inline atau blok-level, sehingga kita bebas memilih elemen apapun dalam elemen div
.
Happy Nyekrip!