Apa itu div di html?

div adalah salah satu elemen dalam HTML yang berguna untuk membuat wadah atau pengelompokan

Table of Contents Show

Apa fungsi dari tag div ini?
Cara Membuat Tag Div Di HTML
Wadah Div untuk apa?
Apa fungsi tag div dan SPAN?
Apa itu div dan Bagian?
Apa perbedaan antara div dan SPAN?

Diperbarui. 18 Oktober 2020

Div adalah salah satu elemen dalam HTML yang berguna untuk membuat container atau wadah elemen dan mempermudah pengelompokan elemen dalam HTML. Div adalah singkatan dari division, div sendiri sering disebut layout pada halaman web. Biasanya div sering ditambahkan dengan atribut id atau class untuk mempermudah styling di css dan event di javascript

Kodewebsite akan membahas fungsi dari tag

, 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 dinding atau penghalang untuk memisahkan bagian ruangan seperti kamar tidur, kamar mandi, atau ruang tamu

Jika Digambarkan Seperti Ini

Kamar Tidur
kamar mandi
Ruang Keluarga

Cara Membuat Tag Div Di HTML

Seperti pada kode diatas bahwa tag div diawali dengan kode “

” dan diakhiri dengan kode “

”.

Pada kode tag div terdapat atribut penting yaitu “id” atau “class”, Penggunaan id lebih tinggi dari class. Artinya jika kita memasang properti "id" untuk kamar tidur, maka "class = pillow/mattress/bed"

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

Bantal
Mattress
tempat tidur

Tag div ini sering digunakan untuk menautkan CSS dan HTML. Oleh karena itu, penggunaan tag div akan memudahkan dalam mendesain halaman website. Lalu bagaimana cara menerapkan tag div pada file HTML? Silakan ketikkan kode berikut di notepad atau editor teks Anda

<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>

Lihat juga Yang Perlu Diketahui Sebelum Mengonversi PSD ke WordPress

Ketikkan kode tersebut dan akan muncul hasil seperti berikut

Hasil screenshot di atas, semuanya terlihat normal dan tidak ada perubahan. Namun perhatikan lebih jelas, setelah membuat tag div, kalimat tersebut menjadi baris baru. Untuk memaksimalkan fungsi div ini, kita perlu menggunakan kode css di dalamnya. Mari tambahkan kode css di tag html head

<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 sperti gambar berikut :

Pada kode diatas kita hanya menambahkan kode css untuk bedroom_id. Inilah hasilnya

Kita juga bisa menggunakan id atau nama kelas yang sama sebagai berikut

kamar tidur
kamar mandi

Jadi kita hanya perlu menggunakan satu fitur css saja. Misalnya

kamar {…. fitur cs…. }

dengan cara ini, seluruh kelas dengan nama ruangan, akan muncul dengan bentuk yang sama sesuai fitur css yang dimasukkan. Semoga bermanfaat

Wadah Div untuk apa?

Div adalah salah satu elemen dalam HTML yang berguna untuk membuat container atau wadah elemen dan memudahkan pengelompokan elemen dalam HTML .

Apa fungsi tag div dan SPAN?

Sebenarnya penggunaan kedua tag ini hampir sama, yaitu untuk memberikan format pada teks yang diblok dengan CSS . Perbedaannya disini adalah tag menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf. menyediakan baris baru di akhir paragraf sedangkan tag tidak menyediakan baris baru di akhir paragraf.

Apa itu div dan Bagian?

div sendiri tidak memiliki arti khusus, hanya elemen kosong. Untuk bagian dalam "arti" dia adalah bagian tertentu dari situs web Anda. misalnya bagian artikel bisa menggunakan bagian . Tidak ada yang wajib.

Apa perbedaan antara div dan SPAN?

Tag div termasuk dalam tipe block-line, sedangkan tag span termasuk dalam tag in-line . Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua kita hanya menggunakan tag div dan span.