HTML DIV, Span, ID dan Class

by

Kamu telah belajar dasar-dasar HTML di postingan sebelumnya.

Ini bisa dikatakan tingkatan lanjut tutorial HTML.

Ada dua element HTML dan dua atribut HTML yang harus kamu pahami dan kuasai.

Element HTML itu adalah:

  • Div
  • Span

Sedangkan atribut HTMLnya adalah:

  • ID
  • Class

Kita bahas satu persatu ya.

Daftar Isi
  1. Element
  2. Element
  3. Penggunaan ID dan Class

Element <DIV>

Tag <DIV> adalah elemen umum / general yang digunakan untuk membangun sebuah dokumen HTML.

Sulit sih untuk membuat definisinya, saya cari definisi-definisi dari situs luar juga agak ambigu. Langsung praktik saja ya biar tidak bingung.

Intinya, <DIV> bisa digunakan untuk membuat apa saja di HTML. Karena ini adalah struktur tag yang general alias tidak spesifik untuk membuat sesuatu.

Contoh, kita ingin membuat sebuah tabel berukuran 2×1, artinya 2 kolom 1 baris.

Jika ingin buat menggunakan tag <table> maka kode yang ditulis adalah: 

<table>
	<tr>
		<td>Kolom 1</td>
		<td>Kolom 2</td>
	</tr>
</table>

Maka hasilnya menjadi:

Kolom 1 Kolom 2

Nah, kita bisa ganti kode <table> tadi menggunakan tag <div> seperti ini: 

<div style="width: 100%; border: 1px solid black">
	<div style="width: 50%; float: left; border: 1px solid black">kolom 1</div>
	<div style="width: 50%; border: 1px solid black">kolom 2</div>
</div>

Disana saya beri atribut style=" ", atribut ini berfungsi untuk memasukkan kode CSS ke dalam HTML.

Tenang, untuk CSS akan kita bahas di artike lain. Saya hanya menggunakan CSS sederhana.

Disitu saya tulis width: 100% dan width: 50%, artinya <div> pertama panjangnya 100% alias maksimal. Sedangkan <div> kedua adalah 50% dari <div> yang pertama.

Sedangkan float digunakan untuk mendefinisikan posisi dari div tersebut, right untuk kanan, left untuk kiri.

Sedangkan border supaya ada garis tepinya, 1px adalah tebalnya, solid adalah jenis garisnya, black adalah warna garis tepinya.

kolom 1
kolom 2

Sudah mulai paham kan? Dilevel yang lebih kompleks lagi, tag <div> digunakan untuk membuat struktur dasar sebuah template halaman website.

Karena, dengan mengkombinasikan <div> dengan CSS kita bisa membuat layout bentuk apapun.

Element <SPAN>

Berbeda dengan <div> yang identik dengan membuat layout atau struktur dokumen HTML.

<span> adalah tag yang digunakan pada in-line group pada dokumen HTML.

Tag <span> biasa digunakan untuk mengedit teks dalam suatu paragraf. Misalnya, ingin buat teks menjadi merah.

Maka kode yang digunakan: <span style="color:red">teks menjadi merah</span>.

Intinya, tag <span> digunakan dalam teks paragraf, sedangkan <div> digunakan untuk membuat layout.

Tag <div> dan <span> jika tidak diberi atribut apapun tidak akan memberikan efek apapun.

Itulah sebabnya, keduanya adalah elemen general yang tidak memberikan efek default apapun.

Penggunaan ID dan Class

Terakhir adalah atribut id dan class.

Dua atribut ini sangat berkaitan erat dengan elemen <div> dan <span>.

Dalam penerapannya <div> dan <span> tidak akan memberikan efek apapun jika tidak diberi tambahan style menggunakan CSS dan Javascript.

Tapi, masalahnya kita tidak akan mungkin memberikan style di kode <div> satu per satu bukan?

Misalnya, jika kita dalam satu halaman ada 20 <div> yang memiliki style sama. Apa iya kita memberikan style satu per satu dalam setiap <div>?

Iya kalau cuma satu halaman. Kalau ratusan halaman HTML? Ada ribuan bahkan puluhan ribu <div> yang harus kita style.

Itulah fungsinya ID dan Class.

Dengan dua atribut tersebut, kita bisa menghubungkan <div> dan <span> dengan CSS atau Javascript menjadi lebih mudah.

Dalam artian, setiap div atau span tinggal ditulis nama ID atau Classnya. Mau ribuan ID atau classpun gak masalah, kita tinggal mengedit CSSnya aja maka semuanya sudah berubah.

Tidak perlu satu-satu!

Note: penulisan id dan class hanya satu kata saja, tidak boleh ada white space seperti spasi, tab, dll. Kalau lebih dari satu kata dihubungkan dengan underscore _ .

Note: value id dan class itu case-sensitive. Artinya, huruf besar kecil berpengaruh.

Perbedaan ID dengan Class

Meskipun keduanya identik sama, tapi ada satu hal yang sangat membedekannya.

ID hanya bisa dipanggil sekali dalam satu halaman HTML, sedangkan Class bisa dipanggil sebanyak apapun.

Selain perbedaan tadi, untuk membuat style di CSS dan Javascript juga ada perbedaanya.

Jika ID kita menggunakan # pagar, sedangkan class menggunakan . (titik).

Misal, saya bikin <div id="menu_utama"></div>.

Maka, untuk membuat kode style CSS untuk id menu_utama menggunakan kode #menu_utama.

Contoh saya akan memberikan style berikut: 

<style type="text/css">
	#menu_utama {
		width: 300px;
		height: 150px;
		border: 2px red dashed;
		background: yellow;
	}
</style>
<div id="menu_utama"></div>

Maka tampilannya menjadi:

Selanjutnya untuk class, misal saya ingin buat class kotak_hijau. Maka kodenya menjadi <div class="kotak_hijau"></div>.

Kemudian, saya beri style berikut: 

<style type="text/css">
	.kotak_hijau {
		width: 300px;
		height: 150px;
		border: 2px red dashed;
		background: green;
	}
</style>
<div id="kotak_hijau"></div>

Tampilannya menjadi:

ID dan class juga bisa dipakai dalam <span>. Misalnya: <span id="unik">teks</span>.

Leave a Comment