Judul, daftar, tautan, dan gambar

Halaman kita baru berisi satu judul dan dua paragraf. Di bagian ini kita menambah empat jenis isi yang paling sering dipakai di halaman mana pun: subjudul, daftar, tautan, dan gambar.

Tingkat judul

HTML menyediakan enam tingkat judul, <h1> sampai <h6>. Anggap seperti daftar isi buku: <h1> judul buku, <h2> judul bab, <h3> subbab. Pilih tingkat berdasarkan urutan isi, bukan berdasarkan ukuran huruf yang diinginkan; ukuran nanti diatur lewat CSS.

Daftar

Pakai <ul> untuk daftar yang urutannya tidak penting dan <ol> untuk langkah yang berurutan. Setiap butir ditulis dengan <li>.

<main>
  <h1>Rani Kusuma</h1>
  <p>Saya sedang belajar membuat halaman web dari nol.</p>

  <h2>Yang sedang saya pelajari</h2>
  <ul>
    <li>HTML untuk struktur</li>
    <li>CSS untuk tampilan</li>
    <li>JavaScript dasar</li>
  </ul>
</main>

Elemen <main> menandai isi utama halaman. Tampilannya tidak berubah, tetapi struktur halaman jadi lebih jelas bagi pembaca layar dan bagi dirimu sendiri saat membaca ulang kode.

Tautan

Tautan dibuat dengan elemen <a>. Atribut href berisi tujuan; teks di antara tag pembuka dan penutup adalah bagian yang bisa diklik. Buat berkas kedua bernama catatan.html di folder yang sama, lalu tautkan dari halaman utama.

<p>
  Catatan belajar saya ada di
  <a href="catatan.html">halaman catatan</a>.
</p>

Gambar

Simpan satu gambar di subfolder gambar, lalu tampilkan dengan elemen <img>. Elemen ini tidak punya tag penutup.

<img
  src="gambar/meja-belajar.jpg"
  alt="Meja belajar dengan buku catatan terbuka"
  width="640"
  height="427"
>

Atribut alt wajib diisi. Teks ini dibacakan pembaca layar dan tampil ketika gambar gagal dimuat. Atribut width dan height membantu peramban menyediakan ruang sebelum gambar selesai dimuat, sehingga isi halaman tidak melompat.