HTML · Bab 7

Tag Semantik dan Media

Menata kerangka halaman dengan header, nav, main, section, article, aside, dan footer, serta menyisipkan audio, video, dan iframe yang aksesibel.

Sampai bab ini, halaman sudah punya teks, tautan, gambar, tabel, dan form. Sekarang saatnya menyusun semuanya ke dalam kerangka halaman yang bermakna, lalu menambahkan media.

7.1 Mengapa Tag Semantik

<div> adalah wadah tanpa makna. Halaman yang seluruhnya tersusun dari <div> terlihat sama saja di layar, tetapi browser, mesin pencari, dan pembaca layar tidak tahu bagian mana yang menu, isi utama, atau kaki halaman. Tag semantik menyatakan peran tiap bagian. Pembaca layar menjadikannya landmark, yaitu titik lompat: pengguna bisa langsung melompat ke navigasi atau ke isi utama tanpa mendengarkan seluruh halaman dari awal.

7.2 Kerangka Halaman

Elemen	Peran
`<header>`	pembuka halaman atau pembuka sebuah bagian: nama toko, logo, slogan
`<nav>`	kelompok tautan navigasi utama
`<main>`	isi utama yang khas halaman itu; hanya satu per halaman
`<section>`	satu bagian bertema, biasanya diawali heading
`<article>`	isi yang utuh bila berdiri sendiri: kartu produk, berita, ulasan
`<aside>`	isi pelengkap: promo, tautan terkait
`<footer>`	penutup: alamat, jam buka, hak cipta
`<div>`	wadah tanpa makna, untuk mengelompokkan demi tampilan

Tanpa CSS, tag semantik tampil sama seperti <div>. Bedanya ada pada makna, bukan tampilan.

HTML + JavaScript

🧪 Coba ubah: tambahkan satu <article> untuk Air Mineral (Rp3.000, stok 40) di dalam <section id="katalog">.

Di DevTools Chrome, panel Elements punya tab Accessibility yang menampilkan peran setiap elemen. Klik <nav> di pohon elemen, lalu lihat bahwa perannya navigation.

7.3 Audio dan Video

<video controls width="480" poster="video/sampul-cara-belanja.jpg">
  <source src="video/cara-belanja.webm" type="video/webm">
  <source src="video/cara-belanja.mp4" type="video/mp4">
  <track src="video/cara-belanja-id.vtt" kind="captions" srclang="id" label="Indonesia">
  Browser-mu tidak mendukung video HTML.
</video>
<p><a href="video/cara-belanja.mp4">Unduh videonya</a></p>

<audio controls>
  <source src="audio/pengumuman-promo.mp3" type="audio/mpeg">
  Browser-mu tidak mendukung audio HTML.
</audio>

controls menampilkan tombol putar, jeda, dan volume. Tanpa atribut ini, pengguna tidak bisa mengendalikan media.
Beberapa <source> bisa ditulis berurutan. Browser memakai format pertama yang didukungnya.
Teks di antara tag (sesudah semua <source>) hanya tampil di browser lama yang tidak mengenal <video> atau <audio>. Browser modern yang tidak bisa memutar satu format pun tidak menampilkan teks itu, jadi sediakan beberapa <source> dan tautan unduh di luar elemen media.
<track kind="captions"> menyediakan teks takarir bagi pengguna tuli atau yang menonton tanpa suara.
poster adalah gambar sampul video sebelum diputar.
Browser umumnya menolak memutar otomatis (autoplay) video bersuara. Kalau benar-benar perlu, tambahkan muted.

Contoh ini tidak dibuat sebagai playground karena berkas videonya tidak ada di situs ini. Coba di folder proyekmu sendiri dengan video milikmu.

7.4 Menyisipkan Halaman Lain dengan `<iframe>`

<iframe> menampilkan halaman lain di dalam halamanmu, misalnya peta lokasi toko:

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=107.60%2C-6.92%2C107.62%2C-6.90&amp;layer=mapnik"
  title="Peta lokasi Smart Retail di OpenStreetMap"
  width="400" height="300" loading="lazy"></iframe>

title wajib demi aksesibilitas, karena pembaca layar menyebutnya sebagai nama bingkai.
loading="lazy" menunda pemuatan sampai bingkai hampir terlihat.
Tidak semua situs mengizinkan dirinya ditampilkan di dalam iframe. Situs yang menolak akan tampil kosong atau menampilkan pesan galat di dalam bingkai.
Atribut sandbox membatasi apa yang boleh dilakukan isi iframe. Preview playground di situs ini sendiri adalah <iframe> ber-sandbox.

Atribut srcdoc mengisi iframe dengan HTML langsung, tanpa memuat situs lain: