Artikel yang berdiri sendiri tanpa tautan ke mana-mana sulit ditemukan dan sulit dijelajahi. Pada Bagian kedua ini kita melengkapi artikel.html dengan dua lapis informasi tambahan: navigasi yang menghubungkan artikel dengan halaman lain di situs, dan metadata di dalam head yang menjelaskan halaman kepada mesin pencari serta media sosial. Struktur artikel dari Bagian 1 tetap dipakai; fokus kita kini berpindah ke nav dan bagian head yang semula hanya berisi kerangka minimum.

File artikel-navigasi.html #

File berikut adalah kondisi artikel.html setelah tahap ini — simpan sebagai artikel-navigasi.html di folder bagian-2/:

html artikel-navigasi.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Cabai di Pot — Aneka Baca</title>
  <meta name="description" content="Panduan memilih pot, media tanam, dan jadwal penyiraman untuk menanam cabai di rumah.">
  <link rel="canonical" href="www.example.com/artikel/tips-menanam-cabai-di-pot">
  <meta property="og:title" content="Tips Menanam Cabai di Pot">
  <meta property="og:description" content="Panduan memilih pot, media tanam, dan jadwal penyiraman untuk menanam cabai di rumah.">
</head>
<body>
  <nav aria-label="Navigasi artikel">
    <ul>
      <li><a href="../index.html">Beranda</a></li>
      <li><a href="artikel-hidroponik.html">Artikel sebelumnya</a></li>
      <li><a href="artikel-pupuk-organik.html">Artikel berikutnya</a></li>
    </ul>
  </nav>
  <article>
    <header>
      <h1>Tips Menanam Cabai di Pot</h1>
      <p class="lead">Cabai termasuk tanaman yang ramah bagi pemula asalkan dua keputusan awalnya tepat: pot yang dipakai dan jadwal penyiramannya. Artikel ini merangkum keduanya dalam panduan singkat.</p>
    </header>
    <section>
      <h2>Memilih pot dan media tanam</h2>
      <p>Pilih pot berdiameter minimal 30 sentimeter yang memiliki lubang pembuangan di dasarnya. Isi pot dengan campuran tanah kebun dan kompos dengan perbandingan satu banding satu.</p>
      <p>Letakkan pot di tempat yang menerima sinar matahari minimal enam jam per hari. Tanaman cabai yang kekurangan cahaya tumbuh tinggi tetapi jarang berbuah.</p>
    </section>
    <section>
      <h2>Menyusun jadwal penyiraman</h2>
      <p>Siram tanaman setiap pagi sebelum matahari tinggi. Bila permukaan tanah masih lembap, tunda penyiraman hingga sore hari.</p>
      <p>Dengan pot yang tepat dan penyiraman yang teratur, bunga pertama biasanya muncul dalam empat sampai enam minggu.</p>
    </section>
    <footer>
      <p>Ditulis oleh Siti Rahma.</p>
      <p>Diterbitkan pada <time datetime="2025-01-18">18 Januari 2025</time>.</p>
    </footer>
  </article>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Baris tiga tautan di atas artikel: "Beranda", "Artikel sebelumnya", "Artikel berikutnya"
  - Konten artikel sama seperti Bagian 1, tanpa figure pada versi ringkas ini

Mari kita bedah bagian-bagian yang baru:

  1. Baris 6-11 (metadata tambahan di head): empat baris baru setelah title, masing-masing diuraikan pada bagian berikutnya.
  2. Baris 13-19 (<nav>): wilayah navigasi situs. Atribut aria-label="Navigasi artikel" memberi nama pada nav ini sehingga pembaca layar dapat membedakannya dari nav lain bila halaman kelak memakai lebih dari satu. Daftar tautan ditulis dengan ul dan li — navigasi pada dasarnya adalah daftar tujuan.
  3. Baris 15 (href="../index.html"): tautan beranda yang naik satu tingkat ke akar proyek, pola ../ yang sama dengan rujukan aset pada Bagian 1.
  4. Baris 16-17 (artikel tetangga): dua file fiktif yang mewakili artikel lain; file-filenya belum ada, tetapi tautan tetap valid dan dapat diuji browser bila kita membuat file kosong dengan nama tersebut.

Metadata untuk Mesin dan Media Sosial #

Empat baris baru di head masing-masing melayani pembaca yang berbeda:

  • meta name="description" — ringkasan satu-dua kalimat isi halaman. Mesin pencari sering menampilkan teks ini di bawah judul hasil pencarian, sehingga kalimatnya ditulis untuk manusia, bukan untuk mengulang title.
  • link rel="canonical" — alamat resmi halaman. Bila artikel yang sama dapat dijangkau dari beberapa URL, canonical menyatakan satu alamat yang dianggap utama sehingga mesin pencari tidak menganggapnya duplikat.
  • meta property="og:title" dan og:description — pasangan judul dan ringkasan versi Open Graph. Ketika tautan artikel dibagikan ke media sosial, platform membaca dua nilai ini untuk menyusun kartu pratinjau tautannya.

Nilai href pada canonical di contoh ditulis tanpa skema karena alamatnya fiktif. Pada situs nyata, canonical berupa alamat absolut lengkap dengan skema di awal — alamat beranda proyek fiktif kita www.example.com dalam praktik ditulis sebagai alamat lengkap berawalan skema https diikuti pemisah :// lalu nama domain. Perbedaan property (bukan name) pada meta Open Graph memang terdengar aneh; atribut tersebut mengikuti standar protokol Open Graph yang berdiri sendiri di luar HTML.

Langkah Pemeriksaan #

Tuntaskan Bagian ini dengan urutan berikut:

  1. Buka artikel-navigasi.html di browser. Baris tautan harus tampil di atas artikel, dan tautan Beranda bila diklik menuju ../index.html — file beranda memang belum ada, jadi browser boleh menampilkan pesan file tidak ditemukan; yang penting alamat tujuannya benar.
  2. Buka view-source, lalu pastikan head memuat description, canonical, dan dua meta og:.
  3. Jalankan ../tests/cek-struktur.html dan centang butir-butir pada kelompok Metadata head serta butir navigasi pada kelompok Struktur semantik.

Dengan navigasi dan metadata beres, halaman ini telah pantas diberi pakaian. Bagian 3 menulis stylesheet pertama proyek: token warna, pilihan jenis huruf, dan ukuran baca yang membuat artikel nyaman dibaca dalam durasi lama.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

artikel-navigasi.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Cabai di Pot — Aneka Baca</title>
  <meta name="description" content="Panduan memilih pot, media tanam, dan jadwal penyiraman untuk menanam cabai di rumah.">
  <link rel="canonical" href="www.example.com/artikel/tips-menanam-cabai-di-pot">
  <meta property="og:title" content="Tips Menanam Cabai di Pot">
  <meta property="og:description" content="Panduan memilih pot, media tanam, dan jadwal penyiraman untuk menanam cabai di rumah.">
</head>
<body>
  <nav aria-label="Navigasi artikel">
    <ul>
      <li><a href="../index.html">Beranda</a></li>
      <li><a href="artikel-hidroponik.html">Artikel sebelumnya</a></li>
      <li><a href="artikel-pupuk-organik.html">Artikel berikutnya</a></li>
    </ul>
  </nav>
  <article>
    <header>
      <h1>Tips Menanam Cabai di Pot</h1>
      <p class="lead">Cabai termasuk tanaman yang ramah bagi pemula asalkan dua keputusan awalnya tepat: pot yang dipakai dan jadwal penyiramannya. Artikel ini merangkum keduanya dalam panduan singkat.</p>
    </header>
    <section>
      <h2>Memilih pot dan media tanam</h2>
      <p>Pilih pot berdiameter minimal 30 sentimeter yang memiliki lubang pembuangan di dasarnya. Isi pot dengan campuran tanah kebun dan kompos dengan perbandingan satu banding satu.</p>
      <p>Letakkan pot di tempat yang menerima sinar matahari minimal enam jam per hari. Tanaman cabai yang kekurangan cahaya tumbuh tinggi tetapi jarang berbuah.</p>
    </section>
    <section>
      <h2>Menyusun jadwal penyiraman</h2>
      <p>Siram tanaman setiap pagi sebelum matahari tinggi. Bila permukaan tanah masih lembap, tunda penyiraman hingga sore hari.</p>
      <p>Dengan pot yang tepat dan penyiraman yang teratur, bunga pertama biasanya muncul dalam empat sampai enam minggu.</p>
    </section>
    <footer>
      <p>Ditulis oleh Siti Rahma.</p>
      <p>Diterbitkan pada <time datetime="2025-01-18">18 Januari 2025</time>.</p>
    </footer>
  </article>
</body>
</html>