Bahasa Pemrograman

Melalui kelas ini, kamu diajak untuk:

• Memahami penulisan elemen HTML yang aksesibel.

HTML

Terdapat beberapa elemen HTML yang dirancang khusus untuk menjalankan fungsi dan bagian tertentu. Namun, elemen HTML semantik kerap diabaikan, lalu tergantikan oleh <div> atau fungsi dalam JavaScript.

Misalnya ketika membuat fungsi tombol seperti berikut:

<div>Daftar</div>

Alih-alih menggunakan <div>, gunakan elemen khusus pembuatan tombol seperti berikut:

<button>Daftar</button>

HTML semantik tidak menambah kerumitan kode, tapi menggunakan penamaan elemen yang sejatinya sudah tersedia.

Kesalahan yang Berulang

Logika proses branching di atas kerap menimbulkan konflik. Konflik biasanya ditemui kala melakukan integrasi dengan branch.

Katakan anggota tim kita menambah susunan kode dalam file content.html pada branch add_content. Kebetulan, kita juga juga melakukan hal yang sama di main/master. Saat memberikan perintah Git Merge, CMD akan memberikan notifikasi seperti ini:

Layout Halaman

Tak perlu lagi menggunakan <div> di semua komponen. HTML semantik menyediakan elemen yang difungsikan khusus untuk bagian yang ada dalam website, seperti <header> untuk bagian paling atas, <nav> untuk navigasi, <main> dan <article> untuk isi konten, kemudian footer. Susunan penerapannya bisa dilihat di kode bawah ini:

<header>
  <h1>Header</h1>
</header>

<nav>
  <!-- navigasi halaman utama -->
</nav>

<!-- Memulai bagian konten -->
<main>

  <!-- Wadah untuk artikel -->
  <article>
    <h2>Article heading</h2>

    <!-- Isi artikel berupa teks atau foto -->
  </article>

</main>

<footer>
  <!-- Bagian paling bawah -->
</footer>

Paragraf

Kesalahan: Menggunakan elemen <font> lalu memberi ukuran. Jarak diatur menggunakan <br>.

<font size="7">Judul</font>
<br><br>
Kalimat pertama
<br><br>
Kalimat lanjutan
<br><br>
1. Daftar 1
<br><br>
2. Daftar 2
<br><br>

Koreksi: Menggunakan elemen dasar seperti <h1>, <h3>, atau <p> untuk teks, lalu <ul>, <li>, seperti berikut:

<h1>Judul</h1>

<p>Kalimat pertama</p>

<p>Kalimat lanjutan</p>

<ol>
  <li>1. Daftar 1</li>
  <li>2. Daftar 2</li>
</ol>

Gambar

Dalam menyusun konten, jangan hanya berpaku pada penggunaan gambar. Keberadaan visual tidak bisa dinikmati oleh semua orang. Maka, diperlukan text alternatives apabila gambar tidak bisa diakses. Caranya seperti berikut:

<h1>Judul</h1>
<img src="roti.png"
     alt="Roti adalah penganan yang terbuat dari tepung."
     title="Roti">

RANGKUMAN

• HTML semantik bukan perombakan susunan kode, tapi sekadar perubahan tata-bahasa dengan penggunaan elemen yang sudah ada.