HTML Dasar #16 - Perbedaan div dan span (Block vs Inline Element)

byFerdian Rahabista -
0

Setelah kita belajar berbagai macam tag HTML (heading, paragraf, gambar, link, form, tabel), sekarang saatnya memahami konsep fundamental dalam HTML: perbedaan elemen block dan inline. Dua tag yang paling mewakili konsep ini adalah <div> dan <span>.

Apa Itu Elemen Block dan Inline?

Setiap elemen HTML memiliki perilaku default dalam hal tata letak (layout). Ada dua kategori utama:

Karakteristik Block Element Inline Element
Lebar default Lebar penuh (100% dari parent) Selebar kontennya
Baris baru Ya (memulai baris baru) Tidak (berdampingan)
Bisa diatur width/height Ya Tidak (kecuali diubah dengan CSS)
Contoh tag <div>, <h1>, <p>, <ul>, <table> <span>, <a>, <img>, <strong>, <em>
Analogi Sederhana:
Block element seperti mobil di jalan raya — setiap mobil mengambil satu jalur penuh dan tidak ada yang bisa berdampingan di jalur yang sama.
Inline element seperti penumpang di dalam mobil — mereka bisa duduk berdampingan dalam satu baris.

Tag <div> (Block Element)

<div> adalah singkatan dari division (divisi/bagian). Ini adalah block element paling umum yang digunakan sebagai kontainer untuk mengelompokkan elemen lain.

Contoh div:

<div style="background: lightblue; padding: 10px;">
    <h2>Ini di dalam div</h2>
    <p>Paragraf ini juga di dalam div yang sama.</p>
</div>
<div style="background: lightgreen; padding: 10px;">
    <p>Div ini akan tampil di baris baru.</p>
</div>

Hasilnya:

Ini di dalam div

Paragraf ini juga di dalam div yang sama.

Div ini akan tampil di baris baru.

Ciri-ciri div:

  • Selalu memulai baris baru
  • Lebarnya penuh (100%)
  • Bisa diatur margin, padding, width, height dengan CSS
  • Cocok untuk membuat layout (header, sidebar, footer, konten)

Tag <span> (Inline Element)

<span> adalah inline element yang digunakan untuk membungkus teks atau elemen kecil di dalam satu baris tanpa mengganggu aliran teks.

Contoh span:

<p>
    Ini adalah teks biasa, dan 
    <span style="color: red; font-weight: bold;">ini teks di dalam span dengan warna merah dan tebal</span>, 
    lalu kembali ke teks biasa lagi.
</p>

Hasilnya:

Ini adalah teks biasa, dan ini teks di dalam span dengan warna merah dan tebal, lalu kembali ke teks biasa lagi.

Ciri-ciri span:

  • Tidak memulai baris baru (berdampingan)
  • Lebarnya hanya selebar kontennya
  • Tidak bisa diatur width/height secara langsung (harus ubah ke display: inline-block dengan CSS)
  • Cocok untuk mewarnai/mengatur sebagian teks di dalam paragraf

Perbandingan Visual div vs span

Elemen Block (div)

Div 1 - Saya lebar penuh
Div 2 - Saya juga lebar penuh
Div 3 - Setiap div di baris baru

Elemen Inline (span)

Span 1 Span 2 Span 3 Span 4 - Mereka semua dalam satu baris!

Span bisa berdampingan dalam satu baris, div selalu baris baru

Studi Kasus: Layout Sederhana dengan div

Berikut contoh layout website sederhana menggunakan div sebagai block element:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Layout dengan Div</title>
    <style>
        .header {
            background: #3b82f6;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .nav {
            background: #1e40af;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
        }
        .container {
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        .sidebar {
            background: #f0f4f8;
            padding: 15px;
            width: 30%;
            border-radius: 10px;
        }
        .content {
            background: white;
            padding: 15px;
            width: 70%;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .footer {
            background: #1e293b;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div class="header">
        <h1>Website Sederhanaku</h1>
        <p>Contoh layout dengan div</p>
    </div>

    <div class="nav">
        <a href="#">Home</a>
        <a href="#">Tentang</a>
        <a href="#">Kontak</a>
    </div>

    <div class="container">
        <div class="sidebar">
            <h3>Sidebar</h3>
            <p>Ini adalah sidebar. Bisa berisi menu, iklan, atau info tambahan.</p>
        </div>
        
        <div class="content">
            <h2>Konten Utama</h2>
            <p>Ini adalah area konten utama website. Semua artikel utama ditampilkan di sini.</p>
            <p>Dengan menggunakan div, kita bisa mengatur layout dengan mudah menggunakan CSS.</p>
        </div>
    </div>

    <div class="footer">
        <p>&copy; 2024 Website Sederhanaku. Semua hak dilindungi.</p>
    </div>

</body>
</html>

Hasil layout:

Website Sederhanaku

Home Tentang Kontak

Sidebar

Ini adalah sidebar. Bisa berisi menu, iklan, atau info tambahan.

Konten Utama

Ini adalah area konten utama website.

© 2024 Website Sederhanaku

Studi Kasus: Format Teks dengan span

Berikut contoh penggunaan span untuk memformat sebagian teks di dalam paragraf:

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        .price {
            color: #ef4444;
            font-weight: bold;
            font-size: 18px;
        }
        .discount {
            color: #22c55e;
            text-decoration: line-through;
            font-size: 14px;
        }
        .important {
            color: #3b82f6;
            font-style: italic;
        }
    </style>
</head>
<body>

    <h2>Contoh Penggunaan Span</h2>
    
    <p>
        Belajar HTML itu <span class="highlight">sangat menyenangkan</span> 
        dan tidak sesulit yang dibayangkan!
    </p>
    
    <p>
        Harga normal: <span class="discount">Rp 200.000</span>
        Harga diskon: <span class="price">Rp 150.000</span>
    </p>
    
    <p>
        <span class="important">Catatan penting:</span> 
        Diskon hanya berlaku untuk pembelian pertama.
    </p>

</body>
</html>

Hasilnya:

Contoh Penggunaan Span

Belajar HTML itu sangat menyenangkan dan tidak sesulit yang dibayangkan!

Harga normal: Rp 200.000 Harga diskon: Rp 150.000

Catatan penting: Diskon hanya berlaku untuk pembelian pertama.

Daftar Elemen Block dan Inline yang Umum

Elemen Block

  • <div> - kontainer umum
  • <h1> - <h6> - heading
  • <p> - paragraf
  • <ul>, <ol>, <li> - daftar
  • <table> - tabel
  • <form> - formulir
  • <header>, <footer>, <section>, <article>, <nav>, <aside>
  • <hr> - garis horizontal
  • <blockquote> - kutipan blok

Elemen Inline

  • <span> - kontainer inline
  • <a> - link
  • <img> - gambar
  • <strong>, <b> - tebal
  • <em>, <i> - miring
  • <u> - garis bawah
  • <br> - baris baru
  • <input> - input form
  • <label> - label form
  • <button> - tombol

Mengubah Perilaku dengan CSS (display)

Dengan CSS, kita bisa mengubah perilaku default block/inline menggunakan properti display.

Nilai display Perilaku Contoh
block Elemen menjadi block (baris baru, lebar penuh) membuat span menjadi seperti div
inline Elemen menjadi inline (berdampingan) membuat div menjadi seperti span
inline-block Campuran: inline (berdampingan) tapi bisa diatur width/height membuat tombol atau card kecil
none Elemen hilang (tidak terlihat, tidak memakan tempat) menyembunyikan elemen

Contoh mengubah span menjadi block:

<style>
    .custom-span {
        display: block;
        background: lightblue;
        margin: 5px 0;
        padding: 10px;
    }
</style>

<span class="custom-span">Span ini berperilaku seperti block!</span>
<span class="custom-span">Saya juga block, jadi di baris baru.</span>
Span ini berperilaku seperti block! Saya juga block, jadi di baris baru.

Contoh mengubah div menjadi inline-block:

<style>
    .card {
        display: inline-block;
        width: 150px;
        background: #f0f4f8;
        padding: 10px;
        margin: 5px;
        border-radius: 8px;
        text-align: center;
    }
</style>

<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
Card 1
Card 2
Card 3

Div dengan display: inline-block bisa berdampingan!

Tabel Perbandingan Lengkap: div vs span

Aspek div span
Jenis Block element Inline element
Memulai baris baru Ya Tidak
Lebar default 100% (lebar penuh) Selebar konten
Bisa diatur width/height Ya (langsung) Tidak (perlu display: inline-block)
Fungsi utama Membuat layout, mengelompokkan blok besar Memformat teks/sebagian kecil konten
Kapan pakai? Header, sidebar, footer, kontainer utama Mewarnai kata, memberi icon, tooltip

Kesalahan Umum Pemula

  • Menempatkan elemen block di dalam inline element → Tidak valid! Inline element (seperti span) tidak boleh berisi block element (seperti div).
  • Mengatur width/height pada span tanpa mengubah display → Tidak akan berfungsi. Span perlu diubah jadi display: inline-block atau display: block.
  • Menggunakan div untuk memformat teks kecil → Terlalu berlebihan. Gunakan span untuk teks kecil.
  • Lupa bahwa elemen block selalu baris baru → Sering bingung kenapa div berikutnya pindah baris.
  • Menggunakan <div> di dalam <p> → Tidak valid! Paragraf tidak boleh berisi div.
Peringatan HTML Validitas:
  • Tidak valid: <span><div>...</div></span> (block di dalam inline)
  • Valid: <div><span>...</span></div> (inline di dalam block)
  • Tidak valid: <p><div>...</div></p> (div tidak boleh di dalam p)

Latihan Singkat

  1. Buat file HTML baru dengan judul "Praktik div dan span"
  2. Buat tiga buah div dengan warna background berbeda, masing-masing berisi heading dan paragraf
  3. Buat satu paragraf yang berisi teks biasa, lalu gunakan span untuk:
    • Mewarnai satu kata dengan warna merah
    • Membuat satu kata menjadi tebal
    • Membuat satu kata menjadi miring dan biru
  4. Buat div dengan display: inline-block untuk membuat 3 kartu kecil berdampingan
  5. Simpan dan buka di browser, amati perbedaan perilaku div dan span

Intisari Hari Ini

  • Block element (div) → baris baru, lebar penuh, bisa diatur width/height
  • Inline element (span) → berdampingan, selebar konten, tidak bisa diatur width/height langsung
  • div untuk layout besar (header, konten, footer, sidebar)
  • span untuk format teks kecil di dalam paragraf
  • Bisa ubah perilaku dengan display: block, display: inline, display: inline-block
  • Jangan letakkan block element di dalam inline element (tidak valid)
Tantangan Akhir Pekan: Buat sebuah Halaman Profil Diri yang menampilkan informasi tentangmu. Halaman harus memiliki:
  • Div untuk header (berisi nama dan tagline)
  • Div untuk navigasi sederhana (Home, Tentang, Kontak)
  • Div container yang berisi sidebar (foto profil + info singkat) dan konten utama (bio, pendidikan, pengalaman)
  • Div untuk footer (copyright dan link sosial media)
  • Span minimal 5 kali di dalam paragraf untuk: highlight kata penting, memberi warna pada teks, membuat teks tebal/miring, dll
  • Gunakan display: inline-block untuk membuat skill badges (misal: HTML, CSS, JavaScript) yang tampil berdampingan
  • Tambahkan kotak penjelasan di bagian bawah yang menjelaskan mana saja elemen block dan inline di halamanmu
Gunakan CSS untuk membuat halaman terlihat profesional dan menarik. Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #15 - Atribut Penting: placeholder, required, readonly, disabled
Artikel Selanjutnya: HTML Dasar #17 - Tag Layout Dasar: header, nav, main, article, section, aside, footer

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال