Setiap halaman web yang layak tayang dimulai dari kerangka yang benar, dan artikel adalah format yang paling sering kita temui di internet. Pada Bagian pertama ini kita membangun artikel.html, halaman utama proyek Aneka Baca, dengan memakai elemen semantik yang telah dipelajari pada section Semantic HTML. Sasarannya bukan sekadar halaman yang tampil benar di browser, melainkan halaman yang strukturnya dapat dibaca mesin pencari, pembaca layar, dan rekan penulis kode kita.

Kerangka Dokumen Artikel #

File artikel.html berisi satu dokumen HTML lengkap dengan satu artikel di dalam body:

html artikel.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>
</head>
<body>
  <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>
    <figure>
      <img src="../assets/hero.svg" alt="Ilustrasi tanaman cabai tumbuh dalam pot terrakota" width="640" height="360">
      <figcaption>Pot berdiameter 30 sentimeter memberi ruang akar yang cukup untuk satu tanaman cabai.</figcaption>
    </figure>
    <section>
      <h2>Memilih pot dan media tanam</h2>
      <p>Pilih pot berdiameter minimal 30 sentimeter yang memiliki lubang pembuangan di dasarnya. Lubang ini mencegah air menggenang dan akar membusuk. 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. Periksa permukaan tanah terlebih dahulu: bila masih lembap, tunda penyiraman hingga sore hari. Media tanam yang terlalu basah sama merugikannya dengan media yang kering.</p>
      <p>Dengan pot yang tepat dan penyiraman yang teratur, bunga pertama biasanya muncul dalam empat sampai enam minggu. Panen pertama menyusul sekitar tiga minggu kemudian.</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:
  - Judul besar "Tips Menanam Cabai di Pot" diikuti paragraf pengantar
  - Ilustrasi pot cabai dengan teks keterangan di bawahnya
  - Dua bagian isi dengan subjudul masing-masing
  - Baris penulis dan tanggal terbit di bagian bawah artikel
  - Teks "Tips Menanam Cabai di Pot — Aneka Baca" pada tab browser

Mari kita telaah peran setiap bagian markup di atas:

  1. Baris 1-6 (head): kerangka standar yang wajib ada — deklarasi doctype, elemen html dengan lang="id", meta charset, meta viewport, dan title yang menggabungkan judul artikel dengan nama situs.
  2. Baris 9 (<article>): elemen pembungkus konten yang utuh dan berdiri sendiri. Pembaca layar mengumumkannya sebagai wilayah artikel, dan mesin pencari mengenalinya sebagai satuan konten yang dapat dibagikan sendiri.
  3. Baris 10-13 (<header> artikel): pembuka artikel berisi satu h1 dan paragraf pengantar dengan class="lead". Perhatikan bahwa header ini berada di dalam article, bukan header situs — keduanya adalah elemen berbeda dengan lingkup berbeda.
  4. Baris 14-17 (<figure>): pasangan gambar dan keterangan. Atribut alt pada img menjelaskan isi gambar bagi pengunjung yang tidak dapat melihatnya, sedangkan figcaption memberi konteks tambahan bagi semua pembaca.
  5. Baris 18-22 dan 23-27 (dua <section>): pemecah isi artikel menjadi subtopik dengan heading h2 sendiri. Pemakaian section di sini sah karena setiap bagian memang punya judul dan isi yang berkelanjutan.
  6. Baris 28-31 (<footer> artikel): penutup berisi nama penulis dan tanggal terbit. Elemen time dengan atribut datetime="2025-01-18" menyimpan tanggal dalam format mesin, sehingga alat lain dapat membacanya tanpa menebak dari teks “18 Januari 2025”.

Perhatikan satu hal pada src="../assets/hero.svg": path dimulai dengan ../ karena file hero.svg berada di folder assets/ pada akar proyek, satu tingkat di atas folder tempat artikel.html disimpan. Aturan path relatif ini diulas tuntas pada chapter Absolute dan Relative URL.

Mengapa Bukan div Saja #

Seluruh struktur di atas sebenarnya dapat ditulis memakai div dengan hasil tampilan yang sama persis. Perbedaannya ada pada makna: article, header, section, dan figure menyatakan peran masing-masing bagian, sedangkan div hanya menyatakan “sebuah kotak”. Browser, pembaca layar, dan mesin pencari bekerja dari makna tersebut — misalnya fitur “baca artikel” pada browser mobile mengandalkan batas article untuk menentukan bagian yang dibacakannya.

Langkah Pemeriksaan #

Tuntaskan Bagian ini dengan urutan berikut:

  1. Unduh artikel.html, simpan di folder bagian-1/ proyek, lalu buka di browser. Pastikan seluruh konten tampil dan gambar ilustrasi tidak rusak — bila rusak, periksa kembali path ../assets/hero.svg.
  2. Jalankan ../tests/cek-struktur.html dari folder tests/, lalu centang seluruh butir pada kelompok Struktur semantik yang telah terpenuhi.
  3. Buka fitur view-source dan pastikan tidak ada satu pun div di dalam article.

Setelah struktur artikel berdiri, Bagian 2 menambahkan dua hal yang belum ada: navigasi menuju artikel lain dan metadata head yang membuat halaman ini informatif bagi mesin pencari serta media sosial.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

artikel.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>
</head>
<body>
  <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>
    <figure>
      <img src="../assets/hero.svg" alt="Ilustrasi tanaman cabai tumbuh dalam pot terrakota" width="640" height="360">
      <figcaption>Pot berdiameter 30 sentimeter memberi ruang akar yang cukup untuk satu tanaman cabai.</figcaption>
    </figure>
    <section>
      <h2>Memilih pot dan media tanam</h2>
      <p>Pilih pot berdiameter minimal 30 sentimeter yang memiliki lubang pembuangan di dasarnya. Lubang ini mencegah air menggenang dan akar membusuk. 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. Periksa permukaan tanah terlebih dahulu: bila masih lembap, tunda penyiraman hingga sore hari. Media tanam yang terlalu basah sama merugikannya dengan media yang kering.</p>
      <p>Dengan pot yang tepat dan penyiraman yang teratur, bunga pertama biasanya muncul dalam empat sampai enam minggu. Panen pertama menyusul sekitar tiga minggu kemudian.</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>