Catatan Kuliah tentang Semantik HTML 5

Pengenalan Semantik

• Definisi Semantik: Berhubungan dengan makna dalam bahasa atau logika. Dalam programming, fokus pada makna kode.

Contoh Kode Tanpa Semantik

• Contoh 1: Mengganti nilai variabel tanpa konteks yang jelas:

  • nilai1 = 10
  • nilai2 = 20
  • Menggunakan nilai1 = nilai2 membuat kedua variabel memiliki nilai yang sama, yang salah secara makna.

• Contoh 2: Deklarasi fungsi tanpa nama yang jelas:

  • Fungsi a(b, c) lebih baik diganti dengan jumlahkanDuaNilai(nilai1, nilai2) untuk memberikan makna yang jelas.

Semantik dalam HTML 5

• Mengapa Menggunakan Semantik?

  1. Accessibility: Memudahkan pengguna dengan disabilitas.
  2. Maintainability: Memudahkan developer untuk membaca dan mengelola kode.
  3. SEO: Mesin pencari lebih mudah memahami konten berbasis semantik.

• Contoh Tag Semantik:

  • Menggunakan tag yang sesuai seperti <header>, <footer>, <nav>, <article>, dan <section>.

Kategori Elemen di HTML 5

• Metadata Elements: Menjelaskan informasi dari website (contoh: <title>, <meta>).
• Flow Elements: Elemen umum dalam halaman (contoh: <p>, <h1>-<h6>).
• Sectioning Elements: Menjelaskan bagian-bagian website (contoh: <section>, <article>).
• Heading Elements: Menandai judul (contoh: <h1>, <h2>).
• Phrasing Elements: Menjelaskan informasi di halaman (contoh: <span>, <img>).
• Embedded Elements: Konten multimedia (contoh: <video>, <audio>).
• Interactive Elements: Elemen yang dapat berinteraksi (contoh: <button>).

Penerapan Semantik

• Mengganti penggunaan <div> dengan tag semantik seperti <header>, <footer>, <nav>, dan <main>.
• Contoh: Menggunakan tag <section> untuk mengganti <div> yang hanya berfungsi sebagai pembungkus tanpa makna.

Penggunaan ARIA (Accessible Rich Internet Applications)

• Digunakan untuk menambahkan semantik pada elemen non-semantik.
  • Contoh: Menambahkan role="navigation" pada <div> untuk membantunya dikenali sebagai navigasi.

Kesimpulan

• Gunakan tag sesuai dengan peruntukannya untuk meningkatkan aksesibilitas, kemudahan pemeliharaan, dan SEO.
• Manfaatkan dokumentasi dari Mozilla Developer Network (MDN) untuk pemahaman lebih lanjut tentang elemen-elemen HTML 5.