HTML Academy · Pelajaran

Elemen span dan div

Gunakan kontainer sebaris dan blok generik sebagai pengait styling.

Elemen span dan div adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Kontainer Generik

HTML memiliki dua elemen kontainer generik yang netral secara semantik:

<div> — kontainer tingkat block
<span> — kontainer inline

Keduanya tidak memiliki makna dengan sendirinya — keduanya hanya digunakan sebagai pengait untuk penataan gaya dan scripting.

Elemen div

<div> adalah kontainer tingkat block — elemen ini membuat baris baru sebelum dan sesudahnya:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

Elemen span

<span> adalah kontainer inline — elemen ini mengalir di dalam teks:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

Kapan Menggunakan div vs Elemen Semantik

Sebelum memilih <div>, periksa apakah ada elemen semantik yang sesuai:

Header halaman → <header>
Navigasi → <nav>
Konten utama → <main>
Postingan blog → <article>
Bilah sisi → <aside>
Footer halaman → <footer>

Gunakan <div> hanya jika tidak ada elemen semantik yang sesuai.

Divitis

Divitis — penggunaan <div> secara berlebihan untuk segala hal:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Pengait CSS dengan class dan id

<div> dan <span> sama-sama digunakan dengan atribut class atau id untuk menargetkan CSS:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Penargetan JavaScript

<div> dan <span> juga menjadi target JavaScript:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Aturan Penyusunan

Aturan penyusunan untuk kontainer generik:

<div> dapat berisi <div> dan <span>
<span> hanya dapat berisi <span> dan konten inline
Jangan menempatkan <div> di dalam <span>

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div untuk Tata Letak

Pola tata letak umum menggunakan div:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span untuk Penataan Inline

Pola penataan inline yang umum:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div dan span Tidak Terlihat

Secara bawaan, <div> dan <span> adalah pembungkus yang tidak terlihat:

<div> tidak menambahkan gaya visual selain tampilan block
<span> sama sekali tidak menambahkan gaya
Semua tampilan berasal dari CSS yang Anda terapkan
Hal ini membuat keduanya menjadi kontainer netral yang ideal

Pemeriksaan Singkat

Elemen mana yang harus Anda gunakan untuk menata satu kata dalam paragraf?

Ringkasan: span dan div

Hal-hal penting tentang kontainer generik:

<div> — tingkat block, mengelompokkan elemen untuk tata letak
<span> — inline, menargetkan bagian teks untuk penataan
Keduanya netral secara semantik — tidak menambahkan makna
Utamakan elemen HTML5 semantik jika sesuai
Gunakan class dan id untuk menghubungkannya dengan CSS dan JavaScript

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen span dan div” gratis?

Ya — teks lengkap “Elemen span dan div” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Elemen span dan div”?

Gunakan kontainer sebaris dan blok generik sebagai pengait styling. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Elemen span dan div” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy