Elemen <div> (division) adalah elemen HTML yang digunakan untuk mengelompokkan unit-unit elemen HTML menjadi satu unit yang independen. Elemen <div> sering dibuat sebagai wadah atau pembungkus bagi konten-konten yang ada di dalam elemen tersebut. Elemen <div> dapat memiliki sub-sub <div> yang terletak di dalam elemen <div> utama. Elemen <div> juga dapat digunakan sebagai penampung elemen lainnya seperti <p> (paragraf), <ol> <ul> (daftar list), <table>, ataupun gabungan dari berbagai elemen HTML lainnya.
Elemen div ditulis dengan tag pembuka <div> dan ditutup dengan tag </div>. Hampir semua browser modern mendukung elemen <div> ini. Elemen <div> dapat digunakan bersama dengan CSS untuk menata tampilan halaman web. Secara default, sebuah halaman web yang berisi <div> akan memberikan line break sesudah elemen tersebut diciptakan. Kadang jarak antar <div> satu dengan lainnya terlalu jauh ataupun terlalu dekat. Untuk menatanya Anda dapat menggunakan CSS dengan memodifikasi nilai margin bottom-nya.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen Tag HTML DIV (division)</title>
<style>
.my_div {
color : #D75281;
font-family : Helvetica;
}
</style>
</head>
<body>
<h3>Belajar Menggunakan Elemen TAG HTML DIV</h3>
<div class="my_div">
<p>Judul Artikel</p>
<p>Paragraf ini akan menjadi konten dari halaman.</p>
<p>Ini adalah konten selanjutnya.</p>
</div>
</body>
</html>
Jika dijalankan akan menghasilkan seperti gambar sebagai berikut:
Elemen Tag Div Di Dalam Elemen Tag DIV :
Suatu elemen tag HTML Div dapat memiliki satu atau lebih elemen tag Div di dalam elemen tersebut. Hal ini sering disebut sebagai elemen sub-division. Elemen <div> yang berada didalam elemen div yang lainnya akan mewarisi sifat-sifat elemen induknya. Sebagai contoh jika elemen induk memiliki warna "navy" dan jenis huruf "helvetica", maka elemen didalamnya juga memiliki warna dan jenis huruf yang sama.
HTML
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
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen Tag HTML DIV (division)</title>
<style>
.my_div {
color : #B93160;
font-family : Helvetica;
}
</style>
</head>
<body>
<h3>Belajar Menggunakan Elemen div HTML</h3>
<div class="my_div">
<div class="sub_div1">
<h3>Sub judul1</h3>
<p>Paragraf ini akan menjadi konten dari halaman.</p>
<p>Ini adalah konten artikel yang lainnya.</p>
</div>
<div id="sub_div2" style="color:green;">
<h3>Sub judul2</h3>
<p>Paragraf ini akan menjadi konten dari halaman.</p>
<p>Ini adalah konten artikel yang lainnya.</p>
</div>
</div>
</body>
</html>
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <div> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <div> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML.
Event Attributes :
Tag <div> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web.. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <div> pada HTML :
CSS
1
2
3
Previous Pagediv{
display : block;
}
Catatan : Elemen <div> tidak memiliki arti khusus / "semantic meaning" tertentu. Elemen ini hanya mendefiniskan konten dengan tampilan blok yang dapat berdiri sendiri atau sebagai induk bagi elemen HTML lainnya saja, tidak lebih. Jadi anda bebas menciptakan elemen ini dimanapun pada halaman HTML. Elemen HTML yang memiliki arti semantik di antaranya : <header>, <nav>, <article>, <main>, <aside>, <footer>, <section>.
Halaman Terkait
 | Elemen P (Paragraf) Pada HTML html |
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
