tRikSonic
Tema

HTML div Tag

Terakhir diperbarui : 24 Mei 2018 - 11.13

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.
background html
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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <div>, biasanya mempunyai nilai default :
div {
    display: block;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.