HTML Dasar / Semantik HTML

Aside & Figure

Aside & Figure 🗂️🖼️

Dua elemen semantik ini sering diabaikan pemula padahal sangat berguna — <aside> untuk konten sampingan yang berkaitan dengan konten utama, dan <figure> untuk media yang membutuhkan keterangan.

<aside> — Konten Sampingan

<aside> digunakan untuk konten yang berkaitan namun tidak menjadi bagian inti dari konten di sekitarnya. Jika konten <aside> dihapus, konten utama tetap bisa dipahami sepenuhnya.

<main>
  <article>
    <h1>Cara Belajar HTML dengan Efektif</h1>
    <p>HTML adalah fondasi dari semua halaman web...</p>
  </article>

  <!-- Konten sampingan — terkait tapi bukan inti -->
  <aside>
    <h3>Artikel Terkait</h3>
    <ul>
      <li><a href="#">Belajar CSS dari Nol</a></li>
      <li><a href="#">JavaScript untuk Pemula</a></li>
    </ul>
  </aside>
</main>

Kapan Menggunakan <aside>?

Sidebar website                  →  <aside>
Widget artikel terkait           →  <aside>
Kotak kutipan menarik (pullquote)→  <aside>
Iklan yang relevan               →  <aside>
Profil singkat penulis           →  <aside>
Glosarium / definisi istilah     →  <aside>
Catatan tambahan / tips          →  <aside>
Konten yang sama sekali tidak    →  BUKAN <aside>
  berkaitan dengan konten utama

<aside> di Level Halaman vs Level Artikel

Level halaman — sidebar website:

<body>
  <header>...</header>

  <div class="layout">

    <!-- Konten utama -->
    <main>
      <h1>Artikel Utama</h1>
      <p>Isi konten utama halaman...</p>
    </main>

    <!-- Aside level halaman — sidebar -->
    <aside>
      <section>
        <h3>Kategori</h3>
        <ul>
          <li><a href="#">HTML (12)</a></li>
          <li><a href="#">CSS (8)</a></li>
          <li><a href="#">JavaScript (15)</a></li>
        </ul>
      </section>

      <section>
        <h3>Artikel Terpopuler</h3>
        <ol>
          <li><a href="#">Belajar Flexbox CSS</a></li>
          <li><a href="#">JavaScript ES6+</a></li>
          <li><a href="#">Cara Deploy Website</a></li>
        </ol>
      </section>
    </aside>

  </div>

  <footer>...</footer>
</body>

Level artikel — catatan di dalam konten:

<article>
  <h1>Panduan Lengkap CSS Grid</h1>

  <p>CSS Grid adalah sistem layout dua dimensi yang sangat powerful...</p>

  <!-- Aside di dalam artikel — catatan tambahan terkait -->
  <aside>
    <h4>Tahukah kamu?</h4>
    <p>CSS Grid pertama kali didukung penuh oleh browser pada tahun 2017,
       menjadikannya salah satu fitur CSS paling dinantikan developer.</p>
  </aside>

  <p>Untuk membuat grid, cukup tambahkan <code>display: grid</code>...</p>
</article>

Styling <aside> yang Umum Digunakan

Sidebar klasik:

<style>
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
  }

  aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .widget {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
  }

  .widget h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a9eed;
  }

  .widget ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .widget ul li a {
    font-size: 14px;
    color: #4b5563;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    transition: color 0.2s;
  }

  .widget ul li a:hover {
    color: #4a9eed;
  }

  .widget ul li a span {
    color: #9ca3af;
    font-size: 12px;
  }
</style>

<div class="layout">

  <main>
    <h1>Judul Artikel Utama</h1>
    <p>Isi konten panjang di sini...</p>
  </main>

  <aside>

    <!-- Widget Kategori -->
    <div class="widget">
      <h3>Kategori</h3>
      <ul>
        <li><a href="#">HTML <span>(12 artikel)</span></a></li>
        <li><a href="#">CSS <span>(8 artikel)</span></a></li>
        <li><a href="#">JavaScript <span>(15 artikel)</span></a></li>
        <li><a href="#">PHP <span>(6 artikel)</span></a></li>
      </ul>
    </div>

    <!-- Widget Artikel Terpopuler -->
    <div class="widget">
      <h3>Terpopuler</h3>
      <ul>
        <li><a href="#">Belajar Flexbox CSS</a></li>
        <li><a href="#">JavaScript ES6+</a></li>
        <li><a href="#">Cara Deploy di VPS</a></li>
        <li><a href="#">Laravel untuk Pemula</a></li>
      </ul>
    </div>

    <!-- Widget Pullquote -->
    <div class="widget" style="background:#f0f7ff; border-color:#4a9eed;">
      <blockquote style="margin:0; font-style:italic; color:#374151; font-size:15px; line-height:1.7;">
        "Kode yang baik adalah kode yang bisa dibaca oleh manusia,
        bukan hanya oleh mesin."
      </blockquote>
      <cite style="display:block; margin-top:10px; font-size:13px; color:#6b7280;">
        — Donald Knuth
      </cite>
    </div>

  </aside>

</div>

<figure> — Media dengan Konteks

<figure> digunakan untuk membungkus konten media yang berdiri sendiri dan dirujuk dari konten utama — gambar, diagram, grafik, potongan kode, atau video yang membutuhkan keterangan.

<figure>
  <img src="diagram-html.png" alt="Diagram struktur dokumen HTML">
  <figcaption>Diagram 1. Hierarki elemen dalam dokumen HTML5</figcaption>
</figure>

<figcaption> — Keterangan Figure

<figcaption> adalah pasangan wajib <figure> yang memberikan keterangan atau judul. Bisa diletakkan sebelum atau sesudah konten di dalam <figure>:

<!-- Caption di bawah (paling umum) -->
<figure>
  <img src="foto.jpg" alt="Foto">
  <figcaption>Keterangan gambar di bawah.</figcaption>
</figure>

<!-- Caption di atas -->
<figure>
  <figcaption>Keterangan gambar di atas.</figcaption>
  <img src="foto.jpg" alt="Foto">
</figure>

<figure> Tidak Hanya untuk Gambar

Gambar:

<figure>
  <img 
    src="pantai-bali.jpg" 
    alt="Pantai Kuta Bali saat matahari terbenam"
    width="800"
  >
  <figcaption>
    Pantai Kuta, Bali — salah satu destinasi wisata paling populer di Indonesia.
    Foto diambil pada bulan Juni 2024.
  </figcaption>
</figure>

Blok kode program:

<figure>
  <pre><code>
function sapa(nama) {
  return `Halo, ${nama}!`;
}

console.log(sapa("Budi"));
// Output: Halo, Budi!
  </code></pre>
  <figcaption>
    Gambar 3. Contoh penggunaan template literal di JavaScript ES6.
  </figcaption>
</figure>

Kutipan (blockquote):

<figure>
  <blockquote>
    <p>Pendidikan adalah senjata paling ampuh yang bisa kamu gunakan
       untuk mengubah dunia.</p>
  </blockquote>
  <figcaption>
    — <cite>Nelson Mandela</cite>, pidato di Planetarium Johannesburg, 2003
  </figcaption>
</figure>

Video:

<figure>
  <video controls width="800" poster="thumbnail.jpg">
    <source src="tutorial-css-grid.mp4" type="video/mp4">
  </video>
  <figcaption>
    Video 2. Tutorial lengkap CSS Grid Layout — durasi 45 menit.
  </figcaption>
</figure>

Grafik / Tabel data:

<figure>
  <table>
    <thead>
      <tr>
        <th>Bahasa</th>
        <th>Popularitas 2025</th>
        <th>Pertumbuhan</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>JavaScript</td><td>68%</td><td>+2%</td></tr>
      <tr><td>Python</td><td>52%</td><td>+5%</td></tr>
      <tr><td>TypeScript</td><td>38%</td><td>+8%</td></tr>
    </tbody>
  </table>
  <figcaption>
    Tabel 1. Popularitas bahasa pemrograman berdasarkan survei
    Stack Overflow Developer Survey 2025.
  </figcaption>
</figure>

Styling <figure> dan <figcaption>

<style>

  /* Figure dasar */
  figure {
    margin: 32px 0;
    padding: 0;
  }

  figure img,
  figure video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  figcaption {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    line-height: 1.6;
  }

  /* Figure dengan border */
  figure.bordered {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }

  figure.bordered figcaption {
    padding: 12px 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-align: left;
    font-style: normal;
    color: #4b5563;
  }

  /* Figure untuk kode */
  figure.code-block {
    background: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
  }

  figure.code-block pre {
    margin: 0;
    padding: 24px;
    overflow-x: auto;
  }

  figure.code-block code {
    color: #e5e5e5;
    font-size: 14px;
    line-height: 1.7;
    font-family: 'Courier New', monospace;
  }

  figure.code-block figcaption {
    background: #2d2d2d;
    color: #9ca3af;
    padding: 10px 24px;
    border-top: 1px solid #374151;
    font-style: normal;
    text-align: left;
    font-size: 12px;
  }

  /* Figure untuk kutipan */
  figure.pullquote {
    border-left: 4px solid #4a9eed;
    padding: 0 0 0 24px;
    margin: 32px 0;
  }

  figure.pullquote blockquote {
    margin: 0;
    font-size: 20px;
    font-style: italic;
    color: #1e1e1e;
    line-height: 1.6;
  }

  figure.pullquote figcaption {
    text-align: left;
    margin-top: 12px;
    font-style: normal;
    color: #6b7280;
    font-size: 14px;
  }

</style>

<!-- Contoh penggunaan -->

<figure class="bordered">
  <img src="dashboard.jpg" alt="Dashboard aplikasi analitik">
  <figcaption>
    Gambar 1. Tampilan dashboard utama aplikasi analitik WebSaya versi 3.0
  </figcaption>
</figure>

<figure class="code-block">
  <pre><code>
const tampilkanData = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  return data;
};
  </code></pre>
  <figcaption>
    Kode 2. Fungsi async/await untuk mengambil data dari API
  </figcaption>
</figure>

<figure class="pullquote">
  <blockquote>
    Setiap developer hebat pernah menjadi pemula yang tidak menyerah.
  </blockquote>
  <figcaption>— Prinsip komunitas WebSaya</figcaption>
</figure>

Perbedaan <aside> vs <figure>

Aspek <aside> <figure>
Peran Konten sampingan terkait Media berdiri sendiri dengan keterangan
Posisi Biasanya di luar alur utama Di dalam alur konten
Jika dihapus Konten utama tetap utuh Informasi yang dirujuk hilang
Keterangan Tidak wajib <figcaption> opsional tapi dianjurkan
Contoh Sidebar, artikel terkait, tips Foto, grafik, kode, video

Halaman Artikel Lengkap dengan Aside & Figure

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Artikel — Mengenal HTML Semantik</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: sans-serif;
      color: #1e1e1e;
      background: #f9fafb;
    }

    .layout {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 40px;
      max-width: 1060px;
      margin: 40px auto;
      padding: 0 24px;
      align-items: start;
    }

    /* Artikel */
    article h1 {
      font-size: 28px;
      margin-bottom: 8px;
    }

    .meta {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 28px;
    }

    article p {
      line-height: 1.8;
      color: #374151;
      margin-bottom: 20px;
    }

    /* Figure di dalam artikel */
    figure {
      margin: 28px 0;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
    }

    figure img {
      width: 100%;
      height: auto;
      display: block;
    }

    figcaption {
      padding: 12px 16px;
      background: #f9fafb;
      font-size: 13px;
      color: #6b7280;
      border-top: 1px solid #e5e7eb;
      font-style: italic;
    }

    /* Aside di dalam artikel (pullquote) */
    article aside {
      background: #f0f7ff;
      border-left: 4px solid #4a9eed;
      padding: 16px 20px;
      border-radius: 0 8px 8px 0;
      margin: 24px 0;
      font-size: 14px;
      color: #1e3a5f;
    }

    article aside strong {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #4a9eed;
    }

    /* Sidebar aside -->
    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: sticky;
      top: 80px;
    }

    .widget {
      background: white;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid #e5e7eb;
    }

    .widget h3 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 14px;
      color: #1e1e1e;
      padding-bottom: 10px;
      border-bottom: 2px solid #4a9eed;
    }

    .widget ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .widget ul li a {
      font-size: 13px;
      color: #4b5563;
      text-decoration: none;
      line-height: 1.5;
    }

    .widget ul li a:hover { color: #4a9eed; }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      padding: 4px 12px;
      background: #f0f4ff;
      color: #4a9eed;
      border-radius: 999px;
      font-size: 12px;
      text-decoration: none;
      border: 1px solid #dbe4ff;
    }

    .tag:hover {
      background: #4a9eed;
      color: white;
    }
  </style>
</head>
<body>

<div class="layout">

  <!-- Konten Utama -->
  <article>

    <header>
      <h1>Mengenal Elemen Semantik HTML5</h1>
      <p class="meta">
        Oleh <strong>Budi Santoso</strong> ·
        20 April 2025 ·
        Waktu baca: 5 menit
      </p>
    </header>

    <p>
      HTML5 memperkenalkan sejumlah elemen semantik baru yang mengubah cara
      kita menulis struktur halaman web. Sebelumnya, hampir semua bagian
      halaman dibungkus dengan elemen generik seperti div dan span.
    </p>

    <!-- Figure gambar di dalam artikel -->
    <figure>
      <img src="html5-semantic.png" 
           alt="Diagram perbandingan struktur HTML lama vs HTML5 semantik">
      <figcaption>
        Gambar 1. Perbandingan struktur halaman dengan div generik (kiri)
        vs elemen semantik HTML5 (kanan).
      </figcaption>
    </figure>

    <p>
      Dengan elemen semantik, setiap bagian halaman memiliki makna yang
      jelas — bukan hanya bagi developer, tapi juga bagi browser,
      mesin pencari, dan teknologi assistif.
    </p>

    <!-- Aside di dalam artikel — catatan tambahan -->
    <aside>
      <strong>Tahukah Kamu?</strong>
      HTML5 secara resmi dirilis sebagai rekomendasi W3C pada Oktober 2014,
      setelah proses pengembangan yang berlangsung hampir satu dekade sejak
      draft pertama di tahun 2004.
    </aside>

    <p>
      Elemen semantik yang paling sering digunakan antara lain header,
      nav, main, article, section, aside, dan footer. Masing-masing
      memiliki peran dan konteks penggunaan yang spesifik.
    </p>

    <!-- Figure blok kode di dalam artikel -->
    <figure style="border-radius:10px; overflow:hidden; margin:28px 0;">
      <pre style="background:#1e1e1e; padding:20px; margin:0; overflow-x:auto;">
        <code style="color:#e5e5e5; font-size:13px; line-height:1.7;">
&lt;body&gt;
  &lt;header&gt;...&lt;/header&gt;
  &lt;nav&gt;...&lt;/nav&gt;
  &lt;main&gt;
    &lt;article&gt;...&lt;/article&gt;
    &lt;aside&gt;...&lt;/aside&gt;
  &lt;/main&gt;
  &lt;footer&gt;...&lt;/footer&gt;
&lt;/body&gt;
        </code>
      </pre>
      <figcaption style="background:#2d2d2d; color:#9ca3af; padding:10px 20px;
                         font-size:12px; border-top:1px solid #374151;">
        Kode 1. Struktur dasar halaman dengan elemen semantik HTML5
      </figcaption>
    </figure>

    <p>
      Mengadopsi HTML semantik bukan hanya soal mengikuti standar —
      ini adalah investasi jangka panjang untuk aksesibilitas,
      SEO, dan keterbacaan kode yang lebih baik.
    </p>

    <footer style="margin-top:32px; padding-top:20px; 
                   border-top:1px solid #e5e7eb;">
      <div class="tag-list">
        <a href="#" class="tag">HTML</a>
        <a href="#" class="tag">Semantik</a>
        <a href="#" class="tag">HTML5</a>
        <a href="#" class="tag">Tutorial</a>
      </div>
    </footer>

  </article>

  <!-- Sidebar — Aside level halaman -->
  <aside class="sidebar">

    <div class="widget">
      <h3>Artikel Terkait</h3>
      <ul>
        <li><a href="#">Perbedaan div vs Elemen Semantik</a></li>
        <li><a href="#">Cara Kerja Screen Reader di Web</a></li>
        <li><a href="#">Panduan Lengkap HTML5</a></li>
        <li><a href="#">SEO On-Page dengan HTML yang Benar</a></li>
      </ul>
    </div>

    <div class="widget">
      <h3>Kategori</h3>
      <ul>
        <li><a href="#">HTML — 12 artikel</a></li>
        <li><a href="#">CSS — 8 artikel</a></li>
        <li><a href="#">JavaScript — 15 artikel</a></li>
        <li><a href="#">Aksesibilitas — 4 artikel</a></li>
      </ul>
    </div>

    <div class="widget" 
         style="background:#fffbeb; border-color:#f59e0b;">
      <h3 style="border-color:#f59e0b;">Tips Hari Ini</h3>
      <p style="font-size:13px; color:#4b5563; line-height:1.7;">
        Selalu validasi HTML kamu menggunakan
        <a href="https://validator.w3.org" 
           style="color:#f59e0b;" 
           target="_blank" 
           rel="noopener noreferrer">
          W3C Validator
        </a>
        untuk memastikan tidak ada kesalahan struktur.
      </p>
    </div>

  </aside>

</div>

</body>
</html>

Ringkasan

Tag Fungsi Contoh Penggunaan
<aside> Konten sampingan terkait Sidebar, widget, pullquote, tips
<figure> Media berdiri sendiri Gambar, video, kode, grafik
<figcaption> Keterangan figure Caption foto, label grafik

💡 Tips: Gunakan <figure> setiap kali gambar atau media dirujuk dari teks di sekitarnya — misalnya "seperti terlihat pada Gambar 1". Jika gambar hanya dekoratif tanpa kaitan langsung dengan teks, <figure> tidak wajib digunakan. Dan ingat — <aside> bukan sekadar "kotak di samping", melainkan konten yang secara semantik berkaitan dengan konten utama. 🎯

Sebelumnya Selanjutnya

Informasi Kursus

Kursus

HTML Dasar

Kategori

Semantik HTML

Durasi Pelajaran

20 menit

Pelajaran dalam Kategori Ini

  1. Header, Nav, Footer
  2. Aside & Figure
  3. Main, Section, Article
  4. div vs Semantik Tag