fungsi div class dan id html5
pada tutorial ini kita akan belajar mengenal fungsi div class dan div id pada html5.
Sebelumnya kita telah belajar membuat link di html, pada tutorial tersebut terdapat div yang digunakan. dan apa itu div ?
Deskripsi
div adalah sebuah tag divisi atau bagian dalam dokumen HMTL.
elemen div digunakan sebagai wadah untuk elemen HTML lainnya, artinya segala jenis konten dapat dimasukkan ke dalam tag <div>.
div singkatan dari division, elemen ini tidak memiliki arti khusus atau lebih dikenal dengan elemen yang tidak memiliki arti semantik.
tag ini dalam pembuatan web digunakan untuk mengatur style dengan CSS dan memanipulasi div dengan Javascript.
Contoh penggunaan div
tag div ditulis dengan tag pembuka <div> dan ditutup dengan tag </div>.
contoh penerapan div menggabungkan beberapa elemen html seperti paragraf <p> dan judul <h3> di dalam tag div. coba kita terapkan style ke semua paragraf dan judul menggunakan style CSS
<html> <head> <title> Belajar tag div pada html </title> </head> <body> <div style="color:blue;font-size:20px"> <h3>thohirdev.com/tutorial</h3> <p> Selamat datang di tutorial thohirdev </p> <p> Belajar tag div pada html </p> </div> </body> </html>
Code language: HTML, XML (xml)hasilnya
Atribut
tag div memiliki beberapa atribut yaitu class dan id.
perbedaan atribut class dan id adalah bahwa id dapat digunakan untuk mengidentifikasi satu elemen, sedangkan class dapat digunakan untuk mengidentifikasi lebih dari satu.
contoh penggunaan class
penggunaan class bisa lebih dari satu dan dipisahkan nama class dengan spasi
<div class="class1 class2"></div>
Code language: HTML, XML (xml)nama class yang sama akan mengalami perubahan yang sama oleh style css yang diberikan pada class tersebut.
<div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div>
Code language: HTML, XML (xml)jika angka dalam class item dirubah warna merah oleh CSS maka nomor 1,2,3,4 akan berubah warnanya menjadi merah.
untuk lebih lengkapnya kita coba script dibawah ini.
<html> <head> <title> Belajar atribut class pada html </title> <style> .item { color: red; } </style> </head> <body> <div class="header"> berisi menu website </div> <div class="body"> berisi konten pada website <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> </div> <div class="footer"> berisi copyright website </div> </body> </html>
Code language: HTML, XML (xml)hasilnya
contoh penggunaan id
id memiliki fungsi khusus dibrowser yang tidak ada pada class, misal yang sudah kita gunakan pada tutorial sebelumnya membuat link di html digunakan dalam atribut href untuk menuju div id.
Baca juga : belajar tag dan elemen
jika kita memiliki URL seperti //thohirdev.com/#komen, browser akan mencoba menemukan elemen dengan id komen dan secara otomatis akan menggulir ke halaman id untuk menampilkan elemen tersebut.
kita juga bisa menggunakan div id dan div class dalam satu elemen misal pada html komen
<li id="komen-9998" class="item"></li> <li id="komen-9999" class="item"></li> <li id="komen-9999" class="item"></li>
Code language: HTML, XML (xml)nama id tidak boleh sama karena didalam sebuah halaman website hanya diperbolehkan memiliki nama id satu, sedangkan class bisa memiliki banyak nama yang sama.
syarat untuk nilai id sebagai berikut.
- harus unik ( nama tidak sama dengan yang lain ) dalam dokumen HTML.
- tidak boleh mengandng karakter spasi
- harus mengandung setidaknya satu karakter
contoh dibawah ini yang valid digunakan
<div id="container"> ... </div> <div id="999"> ... </div> <div id="[]"> ... </div> <div id="{}"> ... </div> <div id="©"> ... </div>
Code language: HTML, XML (xml)ini yang tidak valid :
<div id=" "> ... </div>
Code language: HTML, XML (xml)ini juga tidak valid digunakan jika didalam dokumen terdapat nama id yang sama
<div id="nama-id"> ... </div> <div id="nama-id"> ... </div>
Code language: HTML, XML (xml)Pencarian di thohirdev:
- fungsi div class pada html
- html class, class html, id vs class html
- cara memanggil id di html
- macam macam div class
- perbedaan selector html selector class dan selector ID
- fungsi atribut id pada html