Apa itu tag div dalam HTML?

div adalah salah satu elemen pada HTML yang berguna untuk membuat sebuah container atau mengelompokan

Nội dung chính Show

Apa Fungsi dari Tag Div ini ?
Bagaimana Cara Membuat Tag Div Dalam HTML
Apa itu div class dalam HTML?
Apa perbedaan dari tag div dan tag?
Apa itu div dan Section?

Diperbaharui: 18 October 2020

Div adalah salah satu elemen pada HTML yang berguna untuk membuat sebuah container atau wadah elemen dan memudahkan untuk mengelompokan elemen pada HTML. Div kepanjangan dari division, div sendiri sering disebut layout pada halaman web. Biasanya div sering ditambahkan atribut id atau class untuk memudahkan style pada css dan event pada javascript.

Kodewebsite akan membahas fungsi dari tag <div>, Serta bagaimana cara pembuatan tag div pada HTML. Tag ini sangat diperlukan dalam html, Karena tag div seringkali dipakai dalam design layout atau mempercantik halaman web dengan CSS.

Apa Fungsi dari Tag Div ini ?

Tag div berfungsi seperti struktur bangunan, membuat tembok atau penghalang untuk memisahkan bagian ruangan seperti kamar tidur, kamar mandi, atau ruangan tamu.

Jika Digambarkan Seperti ini :

<div>Kamar tidur</div>
<div>kamar mandi</div>
<div>Ruang Tamu</div>

Bagaimana Cara Membuat Tag Div Dalam HTML

Seperti pada kode diatas bahwa tag div diawali dengan kode “<div>” dan diakhiri dengan kode “</div>”.

Pada kode tag div terdapat atribut penting yaitu “id” atau “class”, Penggunaan id lebih tinggi dari class. Artinya yaitu jika kita pasang properti “id” untuk kamar tidur, Maka “class = bantal/kasur/ranjang”.

Jadi class adalah bagian dari id, Berikut ini contoh penulisan atribut id dan class :

<div id=”kamar_tidur”>
<div class=”bantal”>Bantal</div>
<div class=”kasur”>Kasur</div>
<div class=”ranjang”>ranjang</div>
</div>

Tag div ini sering dipakai untuk menghubungkan CSS dan HTML. Maka dari itu Pemakaian tag div, akan mempermudah mendesign halaman website. Lalu bagaimana menerapkan tag div dalam File HTML ?, Silahkan ketikan kode berikut dalam notepad atau text editor yang kamu punya :

<html>
<head>
<title>Membuat tag div</title>
</head>
<body>
Berikut penggunaan div id untuk kamar tidur dan ruang tamu disertai classnya<br/>
<div id="kamar_tidur">
    <div class="bantal">Ini Bantal</div>
    <div class="kasur">Ini Kasur</div>
    <div class="ranjang">Ini Ranjang</div>
</div>

<div id="ruang_tamu">
    <div class="kursi">Ini kursi</div>
    <div class="meja">ini meja</div>
</div>

<br/><br/>
Berikut penggunanan div id untuk rumah dan classnya<br/>
<div id="Rumah">
    <div class="km_tidur">Kamar tidur</div>
    <div class="km_mandi">kamar Mandi</div>
    <div class="rg_tamu">ruang Tamu</div>
</div>

<br/><br/><br/>
Nama class atau id bisa sama, digunakan agar kode css yang digunakan lebih sedikit. Namun penggunaan ini hanya boleh dipakai jika design layout sama persis<br/>
<div id="kamar">
    <div class="keren">Kamar tidur</div>
    <div class="keren">kamar Mandi</div>
    <div class="keren">ruang Tamu</div>
</div>

</body>
</html>

See also Mengubah text menjadi tebal dengan CSS (cascadding style sheet)

Ketikan Kode tersebut maka hasilnya akan tampak seperti berikut :

Hasil gambar screanshot diatas, semuanya tampak biasa dan tidak ada perubahan. Tapi perhatikan lebih jelas, setelah membuat tag div, kalimat menjadi garis baru. Agar fungsi div ini maksimal, maka kita perlu menggunakan kode css di dalamnya. Mari kita tambahkan kode css dalam tag head html :

<style type="text/css">
#kamar_tidur {border:1px solid black;margin:2px;padding:10px;overflow:hidden;}
.bantal {border:2px solid blue;padding:2px;margin:2px;width:50px;float:left;}
.kasur {border:2px solid red;padding:2px;margin:2px;width:50px;float:left;}
.ranjang {border:2px solid yellow;padding:2px;margin:2px;width:50px;float:left;}
</style>

Masukan kode tersebut dalam html antara tag <head> sperti gambar berikut :

Pada kode diatas, kita hanya menambahkan kode css untuk id kamar_tidur. Berikut hasilnya :

Kita juga dapat menggunakan nama id atau class yang sama misanya seperti berikut :

<div class=kamar>kamar tidur</div>
<div class=kamar>kamar mandi</div>

Sehingga kita hanya perlu menggunakan satu fitur css saja. misalnya :

.kamar {…..fitur css…..}

dengan cara seperti ini maka seluruh class dengan nama kamar, akan tampil dengan bentuk yang sama sesuai dengan fitur css yang dimasukan. Sekian semoga bermanfaat

Apa itu div class dalam HTML?

Fungsi div pada HTML biasanya untuk mengelompokkan elemen atau tag-tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan id atau class dari css. Fungsi div pada HTML lainnya yang sering digunakan oleh para programmer adalah untuk membatasi bagian satu dengan bagian yang lain.

Apa perbedaan dari tag div dan tag?

Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag. Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua kita hanya menggunakan tag div dan span. Efek penebalan dan garis miring dari tulisan kita ubah melalui CSS.

Apa itu div dan Section?

div sendiri tidak punya arti khusus, dia hanya elemen kosong. Untuk section secara "arti" dia adalah bagian tertentu dari website kamu. misalnya bagian artikel bisa pakai section. Tidak ada yang wajib dipakai.