NLFTs
Nuxt Laravel HTML CSS JavaScript TypeScript Next.js MongoDB Java

Tabel, Video, dan Elemen Semantik

Cara menyajikan data tabular, menyematkan video, dan menulis HTML yang bermakna.

Tabel: Menyajikan Data Terstruktur

Tabel digunakan untuk menampilkan data dalam baris dan kolom. Bayangkan spreadsheet di dalam halaman web.

Struktur Dasar Tabel

  • <table>: pembungkus seluruh tabel
  • <tr> (table row): baris
  • <td> (table data): sel data biasa
  • <th> (table header): sel header (biasanya tebal dan tengah)
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>20</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Ani</td>
    <td>22</td>
    <td>Bandung</td>
  </tr>
</table>
Atribut border="1" hanya untuk debugging. Di dunia nyata, styling tabel dilakukan dengan CSS.

Menggabungkan Sel

Kadang kita perlu sel yang memanjang beberapa kolom (colspan) atau baris (rowspan).

<table border="1">
  <tr>
    <th>Produk</th>
    <th>Harga</th>
    <th>Stok</th>
  </tr>
  <tr>
    <td rowspan="2">Buku</td>
    <td>Rp50.000</td>
    <td>10</td>
  </tr>
  <tr>
    <!-- <td> tidak perlu karena rowspan dari atas sudah mengambil tempat -->
    <td>Rp45.000</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Pensil</td>
    <td>Rp2.000</td>
    <td>100</td>
  </tr>
</table>

Menyematkan Video

HTML5 memperkenalkan tag <video> untuk memutar video langsung di browser tanpa plugin tambahan.

Video Lokal atau Online

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Browser kamu tidak mendukung tag video.
</video>
  • controls: menampilkan kontrol play, pause, volume
  • autoplay: video langsung putar (hati-hati, sering diblokir browser)
  • loop: ulang terus
  • muted: bisu

Menyematkan Video dari YouTube

Untuk video dari platform seperti YouTube, gunakan <iframe>.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Ganti dQw4w9WgXcQ dengan ID video YouTube yang kamu inginkan.

Elemen Semantik: HTML yang Bermakna

Sebelum HTML5, orang menggunakan <div> untuk semuanya. Hasilnya sulit dibaca mesin dan manusia. Elemen semantik hadir untuk memberi makna pada struktur halaman.

Elemen Semantik Utama

ElemenKegunaan
<header>Bagian atas halaman atau bagian (logo, judul, navigasi)
<nav>Menu navigasi
<main>Konten utama halaman (unik, tidak termasuk sidebar/header/footer)
<article>Konten independen (posting blog, berita, komentar)
<section>Bagian dalam dokumen (bab, tab)
<aside>Konten terkait tapi bukan inti (sidebar, iklan)
<footer>Bagian bawah (info copyright, tautan)

Contoh Struktur Halaman

<body>
  <header>
    <h1>Website Saya</h1>
    <nav>
      <a href="/">Home</a> |
      <a href="/blog">Blog</a> |
      <a href="/tentang">Tentang</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Judul Artikel</h2>
      <p>Isi artikel...</p>
    </article>

    <aside>
      <h3>Artikel Terkait</h3>
      <ul>
        <li><a href="#">Artikel 1</a></li>
        <li><a href="#">Artikel 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 Website Saya</p>
  </footer>
</body>
Mesin pencari dan screen reader sangat menyukai struktur semantik. Halaman jadi lebih ramah SEO dan aksesibilitas.

Cara Kerja Link (Lebih Dalam)

Link adalah fondasi web. Tapi bagaimana sebenarnya cara kerjanya?

Anatomi Link

<a href="tujuan" target="di mana dibuka" rel="hubungan">teks</a>

href bisa berupa:

  • URL absolut: https://example.com
  • URL relatif: ./halaman-lain.html (folder yang sama), ../atas.html (naik satu folder)
  • Anchor: #bagian2 (lompat ke elemen dengan id="bagian2")
  • Protokol lain: mailto:email@example.com, tel:+628123456

target:

  • _self: buka di tab yang sama (default)
  • _blank: buka di tab baru
  • _parent: buka di frame induk (jarang dipakai)
  • _top: buka di seluruh jendela (keluar dari frameset)

rel memberi tahu hubungan dengan halaman tujuan:

  • rel="noopener": penting untuk target="_blank" agar halaman baru tidak bisa mengakses halaman asal (keamanan)
  • rel="nofollow": minta mesin pencari tidak mengikuti link ini
  • rel="external": link ke situs luar

Link yang Aman

Selalu tambahkan rel="noopener noreferrer" saat menggunakan target="_blank":

<a href="https://situslain.com" target="_blank" rel="noopener noreferrer">
  Kunjungi Situs Lain
</a>
noreferrer mencegah pengiriman informasi referer (asal kunjungan). noopener mencegah serangan tabnabbing.

Penjelasan lengkap elemen semantik dari MDN.

Cara Penulisan HTML

Struktur dasar, tag, elemen, dan atribut—fondasi yang harus dikuasai sebelum melangkah lebih jauh.

Formulir dan Input Pengguna

Membuat formulir interaktif, jenis-jenis input, dan validasi sederhana.