Tutorial HTML: Mengenal Div dan Class Pada HTML

2 min


Mengenal Div dan Class Pada HTML

Dalam ilmu pengembangan website kode HTML adalah sesuatu yang lumrah untuk kamu tulis. Namun, dalam penulisan kode HTML, ada beberapa kode yang secara umum digunakan oleh setiap pengembang website, salah satunya adalah kode <div>.

Kode <div> yang kepanjangannya adalah division merupakan kode umum yang secara garis besar digunakan untuk mengaplikasikan sebuah elemen dalam HTML. Elemen tersebut nantinya akan berfungsi sebagai panduan dalam memproses (membuat) layout pada halaman website.

Tidak paham dengan penjelasan di atas…? Okay, praktik sederhananya seperti ini…

Ketika kamu menjalankan kode di atas, objek HTML pada browser tidak menampilkan efek apapun dari kode <div>.

Catatan:
Output dari kode <div> berbeda dengan <h1>, <p>, <strong>, atau <em> yang jelas memiliki efek ketika kode dieksekusi pada browser. Dalam hal ini, kode <div> tidak akan pernah memberi efek apapun pada objek HTML apabila tidak ditambahkan kode lain di dalamnya.

Agar kamu memahami konsep dari memproses sebuah layout pada website, saya akan merubah kode di atas menjadi seperti ini.

Apabila kode HTML di atas Anda jalankan, maka hasilnya akan seperti ini…

Kesimpulan sederhananya…

  1. Warna ungu merupakan divisi <div> untuk menangani navigasi.
  2. Warna merah merupakan divisi <div> untuk menangani gambar selamat datang.
  3. Warna hijau merupakan divisi <div> untuk menangani tulisan selamat datang.

Apa kamu sudah mengerti fungsi utama dari <div> pada HTML? Okay… Mari berlanjut ke class

Mengenal Class Pada HTML

Jika pada kode di atas struktur dari layout ditentukan oleh warna ungu, merah, dan hijau, maka dalam class kamu tidak perlu memberi warna pada setiap struktur.

Contoh, apabila kamu ingin membuat sebuah objek untuk navigasi, maka kamu bisa menuliskan kode  <div class="navigasi-utama"></div> pada kode HTML kamu.

Pada kode <div class=”navigasi-utama”></div> terdapat attribute dan value dalam tag <div>.

Catatan:
Apabila kamu belum paham tentang attribute dan value pada HTML, ada baiknya kamu mempelajari hal tersebut di artikel Mengenal Tags, Atrribute, dan Element.

Attribute class dalam <div> dengan nilai navigasi-utama nantinya berfungsi sebagai identifikasi bahwa tag <div> dengan class navigasi-utama digunakan untuk menampilkan navigasi pada halaman website. Kondisi ini bisa juga didefinisikan sebagai elemen HTML.

Nilai navigasi-utama dalam class nantinya akan menjadi sebuah tanda untuk kode CSS ketika kamu ingin mendesain navigasi dalam kode CSS.

Tidak paham dengan penjelasan di atas? Lihat contoh kode di bawah ini.

Dari kode di atas nilai navigasi-utama dideklarasikan gayanya (design) oleh kode CSS dengan variabel .navigasi-utama.

Kapan kamu harus menggunakan class?

Attribute class secara umum sering digunakan untuk mengidentifikasi (mengkategorikan) setiap gaya dalam objek HTML.

Contoh kasusnya seperti ini…

Apabila kamu memiliki rencana membuat sebuah blog, dan kamu ingin judul tulisan dari blog kamu berwarna merah, maka kamu bisa menambahkan sebuah class pada judul tulisan di blog kamu.

Dalam masalah ini, ketika judul tulisan pada blog kamu menggunakan tag <h1>, maka kamu bisa menambahkan attribute class dengan nilai judul-tulisan-merah, atau kode lengkapnya bisa seperti ini.

Catatan:
Nilai dari attribute class dapat kamu tentukan, atau dapat kamu beri nama sesuai dengan keinginan kamu. Namun, kamu perlu waspada dalam memberi nilai pada attribute class agar tidak ada duplicate value.

Okay, segitu dulu tulisan tentang div dan class pada HTML. Apabila kamu memiliki saran tentang tulisan ini, kamu bisa meninggalkan saran tersebut melalui kolom komentar yang ada di bawah ini.

5/5 1 rating

What's Your Reaction?

Sebel Sebel
0
Sebel
Pusing Pusing
0
Pusing
Sedih Sedih
0
Sedih
Kocak Kocak
0
Kocak
Terkesan! Terkesan!
2
Terkesan!
Kecewa Kecewa
0
Kecewa
Zapra Gartiast

Hay! Saya Zapra Gartiast, calon Wali Kota Bandung tahun 2025 - 2035. Mohon do'a dari kalian yang membaca 😀

Subscribe
Notify of
guest
0 Komentar
Inline Feedbacks
Lihat semua komentar
0
Punya tanggapan? Tinggalkan komentarx
()
x
Choose A Format
Story
Formatted Text with Embeds and Visuals