Teks, link, gambar, dan list

Idenya

Sebagian besar halaman web terdiri dari segelintir elemen: paragraf, link, gambar, dan list. Modul 1 sudah memperkenalkannya; modul ini membahas cara memakai masing-masing dengan baik, karena pilihan-pilihan kecil (alt yang hilang, teks link yang samar, list yang dibuat dari pindah baris) adalah pembeda antara halaman yang berfungsi untuk semua orang dan halaman yang hanya terlihat benar.

Teks

Sebagian besar halaman berupa teks biasa, dan HTML memberimu beberapa elemen untuk menandai apa peran teks itu. Ini bagian atas halaman utama Toko Kita, memakai elemen-elemen yang paling sering akan kamu pakai:

<h1>Toko Kita</h1>
<p>We roast <strong>every Monday</strong> and ship within <em>two working days</em>.</p>
<p>Questions? Our team replies within a day.<br>Monday to Friday, 09:00–17:00 WIB.</p>
<p>Prices include 11% VAT. <small>Shipping is calculated at checkout.</small></p>

• <p> untuk paragraf. Masing-masing adalah blok dengan ruang di sekitarnya.
• <strong> untuk kepentingan, <em> untuk penekanan (tekanan yang kamu berikan pada sebuah kata saat berbicara).
• <br> untuk pindah baris di dalam paragraf, seperti baris-baris alamat. Jangan pernah memakai <br><br> untuk memberi jarak antarparagraf; itu tugas CSS.
• <small> untuk komentar sampingan dan tulisan kecil.

Link

Link-lah yang membuat web menjadi "jaring". Elemen <a> (anchor) yang sama bisa menautkan ke situs lain, halaman lain di situsmu sendiri, bagian lebih bawah di halaman yang sama, atau bahkan alamat email dan nomor telepon. Yang berubah hanya alamat yang kamu taruh di href:

<p><a href="https://www.python.org">Python's website</a> (absolute: full address)</p>
<p><a href="/products">All products</a> (relative to the site root)</p>
<p><a href="about.html">About us</a> (relative to the current page)</p>
<p><a href="#shipping">Jump to shipping info</a> (a section on this page)</p>
<p><a href="mailto:[email protected]">Email us</a> · <a href="tel:+62211234567">Call us</a></p>

<h2 id="shipping">Shipping</h2>
<p>We ship to every province in Indonesia.</p>

• URL absolut diawali https:// dan berfungsi dari mana saja.
• URL relatif (/products, about.html) menunjuk ke dalam situs yang sama, jadi tetap berfungsi kalau domainnya berubah.
• #shipping melompat ke elemen dengan id="shipping" di halaman yang sama.
• mailto: dan tel: membuka aplikasi email atau aplikasi telepon.

Teks link harus bermakna dengan sendirinya. Pengguna screen reader sering melompat dari link ke link, hanya mendengar teks link-nya. "Klik di sini" tidak memberi tahu apa-apa; "Unduh daftar harga (PDF)" memberi tahu semuanya.

Untuk membuka link di tab baru, tambahkan target="_blank". Gunakan seperlunya (orang bisa memilih membuka tab sendiri), dan pasangkan dengan rel="noopener", yang mencegah halaman baru mengendalikan halamanmu.

Gambar

Halaman utama Toko Kita butuh foto seorang barista dan foto biji kopi minggu ini. Tapi gambar butuh lebih dari sekadar file yang ditampilkan: gambar butuh deskripsi untuk orang yang tidak bisa melihatnya, dan ukurannya, supaya halaman tidak melompat-lompat saat sedang dimuat:

<img src="https://picsum.photos/id/1060/400/250" alt="Barista pouring milk into a cup of latte" width="400" height="250">

<figure>
  <img src="https://picsum.photos/id/431/400/250" alt="Bags of roasted coffee beans on a wooden shelf" width="400" height="250">
  <figcaption>This week's roast: Arabica Gayo.</figcaption>
</figure>

• src: file atau URL gambar.
• alt: apa yang ditunjukkan gambar, untuk orang yang tidak bisa melihatnya (screen reader, koneksi lambat, mesin pencari). Deskripsikan isi dan tujuannya, bukan "gambar dari". Untuk gambar yang murni dekoratif, gunakan alt="" kosong supaya screen reader melewatinya.
• width dan height: ukuran gambar. Browser menyediakan ruangnya sebelum gambar termuat, sehingga halaman tidak melompat-lompat.
• <figure> dengan <figcaption> mengelompokkan gambar dengan keterangan yang terlihat.

List

Gunakan list setiap kali kontennya memang berupa daftar: link navigasi, fitur, langkah, bahan.

<h2>Why Toko Kita?</h2>
<ul>
  <li>Freshly roasted every week</li>
  <li>Free shipping over Rp 300.000</li>
  <li>Beans from 12 Indonesian regions</li>
</ul>

<h2>Brewing with a French press</h2>
<ol>
  <li>Add 15 g of coarse ground coffee.</li>
  <li>Pour 250 ml of water at 93 °C.</li>
  <li>Wait 4 minutes, then press slowly.</li>
</ol>

<h2>Menu</h2>
<ul>
  <li>Coffee
    <ul>
      <li>Espresso</li>
      <li>Latte</li>
    </ul>
  </li>
  <li>Tea</li>
</ul>

• <ul> (unordered): urutan tidak penting. Berpoin secara default.
• <ol> (ordered): urutan penting, seperti langkah-langkah. Bernomor secara default.
• Setiap item adalah <li>, dan hanya elemen <li> yang boleh berada langsung di dalam <ul> dan <ol>.
• List bersarang diletakkan di dalam sebuah <li>, bukan di antara item-item.

Screen reader mengumumkan "list, 3 item", sehingga pengguna tahu apa yang akan datang. Baris-baris yang dipisahkan <br> tidak mendapat itu.

Mengapa ini penting untuk kode yang bersih

Elemen yang tepat membawa informasi secara gratis: list berkata "item-item ini satu kelompok", teks link berkata ke mana ia menuju, alt berkata apa isi gambarnya. Halaman yang dibangun dengan cara itu butuh lebih sedikit CSS, lebih sedikit JavaScript, dan lebih sedikit perbaikan nanti, dan sudah aksesibel sejak awal, bukan setelah diaudit.

Rangkuman

• <p> untuk paragraf; <strong>, <em>, <small>; <br> hanya untuk pindah baris di dalam paragraf.
• <a href>: absolut, relatif, #id, mailto:, tel:. Teks link harus bermakna dengan sendirinya.
• <img src alt width height>; alt="" untuk gambar dekoratif; <figure> + <figcaption> untuk keterangan.
• <ul> dan <ol> dengan item <li>; sarangkan list di dalam sebuah <li>.