Penjelasan HTML div
:
Html div
Tag - Belajar html <div>
, Element html <div>
kependekan dari divison yang mempunyai makna sebuah divisi atau bagian. Element <div>
biasa digunakan untuk membungkus beberapa element lainnya sehingga membuat sebuah group element.
Element
<div>
sering digunakan untuk penambahan style atau CSS. Attribute yang paling umum disematkan pada element ini adalah attribut class
dan ID
.
secara default tanpa css atau style element
<div>
tidak mempuyai perubahan tampilan pada tampilan browser. Penerapan style dan css sangat dianjur kan pada element <div>
.
Contoh 1 html element <div>
:
<div>
saya bangga menjadi warga negara Indonesia.
</div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <div> saya bangga menjadi warga negara Indonesia. </div> </body> </html>
Contoh 2 html element <div>
:
Contoh berikut dengan menyematkan attribute class
.
<div class="red">
saya bangga menjadi warga negara Indonesia.
</div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> .red { color :red; } </style> </head> <body> <div class="red"> saya bangga menjadi warga negara Indonesia. </div> </body> </html>
Contoh 3 html element <div>
:
Contoh berikut untuk penerapan bertumpuk.
<div class="div-1">
<div class="div-2">
<div class="div-3">
ini text untuk div-3
</div>
</div>
</div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> .div-1 { padding :10px; background-color : red; } .div-2 { padding :10px; background-color : green; } .div-3 { padding :10px; background-color : yellow; } </style> </head> <body> <div class="div-1"> <div class="div-2"> <div class="div-3"> ini text untuk div-3 </div> </div> </div> </body> </html>
Contoh 4 html element <div>
:
Contoh element
<div>
yang dikontrol dengan javascript
.<button onclick="tesDemo();">Klik saya</button>
<div id="test">
Teks ini berwarna biru
</div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> div { color :blue; } </style> </head> <body> <button onclick="tesDemo();">Klik saya</button> <div id="test"> Teks ini berwarna biru </div> <script> function tesDemo() { var element = document.getElementById("test"); element.innerHTML = "Teks ini berwarna MERAH"; element.style.color = "red"; } </script> </body> </html>
Attributes :
Attribute | Value | Deskripsi |
---|---|---|
align |
left right center justify |
Menentukan keselarasan/Penjajaran konten yang berada di dalam element <div>
Attribute ini tidak berlaku lagi pada penggunaan
HTML5 .
|
Global Attributes:
Element
<div>
mencakup Global Attributes HTML.
Event Attributes:
Element
<div>
mencakup Event Attributes HTML.
Browser Support :
Desktop
Chrome | Ya |
---|---|
Safari | Ya |
Firefox | Ya |
Opera | Ya |
IE | Ya |
Edge | Ya |
Mobile
Android Webview | Ya |
---|---|
Chrome Android | Ya |
Edge Mobile | Ya |
Firefox Android | Ya |
Opera Android | Ya |
iOs Safari | Ya |
Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<div>
, biasanya mempunyai nilai default :
div {
display: block;
}