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 |
leftrightcenterjustify |
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;
}