SIAP – Sistem Informasi Anak Pintar

1. Apa Perbedaan <p>, <div>, dan <span>?

Ketiga tag ini sama-sama dipakai untuk membungkus konten, tapi fungsi dan perilakunya berbeda. Yuk kita lihat tabel perbandingannya:

Tag	Jenis Elemen	Fungsi Utama	Contoh Penggunaan
<p>	Block-level	Menampilkan sebuah paragraf teks. Otomatis ada jarak atas dan bawah.	Isi artikel, keterangan gambar, deskripsi produk
<div>	Block-level	Wadah/kontainer umum untuk mengelompokkan elemen-elemen lain. Tidak punya makna semantik khusus.	Layout halaman, kartu, kotak konten, sidebar
<span>	Inline	Membungkus sebagian kecil teks atau elemen di dalam baris. Tidak membuat baris baru.	Mewarnai kata tertentu, memberi style pada sebagian teks

Kata kunci yang perlu diingat:
• Block-level = elemen selalu mulai di baris baru dan memenuhi lebar penuh.
• Inline = elemen mengikuti aliran teks, tidak membuat baris baru.

2. Penggunaan Tag <p>

Tag <p> dipakai untuk menulis paragraf teks. Browser otomatis menambahkan jarak (margin) di atas dan bawah setiap paragraf, sehingga antar paragraf terlihat terpisah dengan rapi.

Contoh kode:

<p>Ini adalah paragraf pertama.</p> <p>Ini adalah paragraf kedua.</p> <p>Ini adalah paragraf ketiga.</p>

Hasil tampilan:

Ini adalah paragraf pertama.

Ini adalah paragraf kedua.

Ini adalah paragraf ketiga.

Catatan penting tentang <p>:

Di dalam <p> tidak boleh meletakkan elemen block-level lain seperti <div> atau <p> lain.
Cocok hanya untuk konten berupa teks / paragraf.
Jika ingin membungkus banyak elemen campuran, gunakan <div> saja.

3. Penggunaan Tag <div>

Tag <div> (kependekan dari division) adalah wadah serbaguna. Tidak punya tampilan khusus secara default, tapi sangat berguna untuk mengelompokkan elemen agar bisa diberi style CSS atau diatur layout-nya bersama-sama.

Contoh kode:

<div style="background:#dbeafe; padding:16px; border-radius:8px;"> <h4>Judul Kartu</h4> <p>Ini adalah isi dari sebuah kartu.</p> <button>Klik Saya</button> </div>

Hasil tampilan:

Judul Kartu

Ini adalah isi dari sebuah kartu.

Kegunaan umum <div>:

Membuat layout halaman (header, sidebar, footer, dll.)
Mengelompokkan beberapa elemen agar bisa diberi warna atau border bersama.
Membuat kartu / kotak konten seperti di atas.
<div> bisa diisi <p>, <img>, <input>, bahkan <div> lain di dalamnya.

4. Penggunaan Tag <span>

Tag <span> dipakai untuk membungkus sebagian kecil teks di dalam sebuah kalimat, tanpa membuat baris baru. Biasanya dipakai untuk memberi warna, ukuran, atau style tertentu pada kata/frasa tertentu saja.

Contoh kode:

<p> Nilai kamu adalah <span style="color:green; font-weight:bold;">90</span> dari 100. Kamu <span style="color:blue;">lulus dengan predikat A</span>! </p>

Hasil tampilan:

Nilai kamu adalah 90 dari 100. Kamu lulus dengan predikat A!

Contoh lain penggunaan <span>:

<p>Mata pelajaran <span style="background:yellow;">TIK</span> diajarkan setiap <span style="color:red;">Senin</span>.</p>

Hasil tampilan:

Mata pelajaran TIK diajarkan setiap Senin.

Catatan tentang <span>:

<span> tidak merubah tampilan apapun kalau tidak diberi style/class.
Dipakai hanya untuk styling sebagian kecil teks, bukan untuk layout.
Jangan gunakan <span> sebagai wadah banyak elemen — gunakan <div> untuk itu.

5. Contoh Gabungan <p>, <div>, dan <span>

Sekarang kita lihat bagaimana ketiga tag ini bekerja sama dalam satu halaman. Coba perhatikan kode berikut, kemudian amati hasilnya!

Contoh kode (copy & paste ke editor kamu):

<div style="border:2px solid #3b82f6; border-radius:10px; padding:20px; max-width:400px;"> <div style="background:#1d4ed8; color:white; padding:8px 16px; border-radius:6px; margin-bottom:12px;"> Profil Siswa </div> <p> Nama: <span style="font-weight:bold; color:#1d4ed8;">Budi Santoso</span> </p> <p> Kelas: <span style="font-weight:bold;">VII A</span> </p> <p> Status: <span style="background:#dcfce7; color:#16a34a; padding:2px 10px; border-radius:999px;"> Aktif </span> </p> <div style="margin-top:12px; background:#f1f5f9; padding:10px; border-radius:6px;"> <p style="margin:0;"> Catatan: Siswa ini <span style="color:red;">wajib</span> mengumpulkan tugas paling lambat <span style="font-weight:bold;">Jumat depan</span>. </p> </div> </div>

Hasil tampilan:

Profil Siswa

Nama: Budi Santoso

Kelas: VII A

Status: Aktif

Catatan: Siswa ini wajib mengumpulkan tugas paling lambat Jumat depan.

Penjelasan kode di atas:

<div> terluar = wadah utama kartu (border biru).
<div> kedua = header berwarna biru "Profil Siswa".
<p> = setiap baris informasi (Nama, Kelas, Status).
<span> = memberi warna/style pada nilai spesifik di dalam paragraf.
<div> ketiga = kotak catatan abu-abu di bawah.

Ingat aturan sederhana ini:
• Mau nulis paragraf/teks? → pakai <p>
• Mau buat kotak / wadah layout? → pakai <div>
• Mau kasih warna/style pada sebagian kata? → pakai <span>