Teks, Heading, dan Daftar

Sebagian besar isi web adalah teks. HTML punya elemen khusus untuk judul, paragraf, penekanan, kutipan, dan daftar. Memilih elemen yang tepat maknanya membuat halaman mudah dibaca manusia, mesin pencari, dan pembaca layar. Contoh di bab ini memakai isi katalog Perpustakaan Pelita.

2.1 Heading <h1> sampai <h6>

Heading adalah judul bertingkat, dari <h1> (paling penting) sampai <h6> (paling rendah). Susunannya seperti daftar isi buku:

• Biasanya satu halaman punya satu <h1> sebagai judul utama.
• Jangan melompati tingkat, misalnya dari <h2> langsung ke <h4>.
• Jangan memilih heading karena ukuran hurufnya. Ukuran adalah urusan CSS, sedangkan heading menyatakan struktur. Pengguna pembaca layar sering melompat dari heading ke heading untuk menjelajah halaman.

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: tambahkan <h2>Sejarah</h2> beserta buku Sejarah Nusantara (SJ-001, karya Tim Penulis Sejarah) di bagian akhir.

2.2 Paragraf dan Penekanan

• <p> membuat paragraf. Spasi berlebih dan baris baru di dalam kode digabung browser menjadi satu spasi.
• <br> memindahkan baris di dalam paragraf, misalnya untuk alamat. Jangan memakainya untuk memberi jarak antarbagian.
• <hr> menandai pergantian topik.
• <strong> menandai isi yang penting (biasanya tampil tebal). <em> menandai penekanan dalam kalimat (biasanya tampil miring). Tag <b> dan <i> juga membuat tebal dan miring, tetapi tanpa makna tambahan.

▶ JalankanResetHTML + JavaScript

2.3 Kutipan, Potongan Kode, dan Entitas

• <blockquote> untuk kutipan panjang yang berdiri sendiri. <q> untuk kutipan pendek di dalam kalimat (browser menambahkan tanda petik).
• <code> menandai potongan kode di dalam kalimat. <pre> mempertahankan spasi dan baris baru persis seperti ditulis. Untuk blok kode, keduanya dipakai bersama: <pre><code>…</code></pre>.

Karena < menandai awal tag, karakter itu tidak bisa ditulis langsung sebagai teks biasa. Pakai entitas karakter:

Ingin tampil	Tulis
<	&lt;
>	&gt;
&	&amp;
"	&quot;
spasi yang tidak boleh dipecah baris	&nbsp;
©	&copy;

Itulah sebabnya rak Sains & Teknologi ditulis Sains & Teknologi di HTML.

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: ganti <p> menjadi <p> lalu jalankan. Kodenya berubah menjadi paragraf sungguhan, bukan teks.

2.4 Daftar <ul>, <ol>, dan <li>

• <ul> (unordered list) untuk daftar tanpa urutan, ditandai titik.
• <ol> (ordered list) untuk langkah yang urutannya penting, ditandai angka. Atribut start="3" memulai dari angka 3, dan reversed membalik urutan.
• Setiap butir ditulis dengan <li>. Anak langsung <ul> dan <ol> hanya boleh <li>.

Daftar bersarang (daftar di dalam daftar) ditulis di dalam <li> induknya, sebelum </li>:

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: tambahkan rak Sains & Teknologi beserta dua bukunya sebagai butir pertama, lalu ganti <ol> menjadi <ol start="3">.

2.5 Ringkasan

• Heading <h1>–<h6> menyusun struktur, bukan mengatur ukuran huruf. Jangan melompati tingkat.
• <p> untuk paragraf, <strong> untuk isi penting, dan <em> untuk penekanan.
• <blockquote>, <q>, <code>, dan <pre> untuk kutipan dan kode. Karakter khusus ditulis sebagai entitas seperti < dan &.
• <ul> dan <ol> berisi <li>. Daftar bersarang diletakkan di dalam <li>.

Berikutnya: menghubungkan halaman dengan tautan dan melengkapinya dengan gambar.

Kondisi awal

Bab 1 memperkenalkan halaman Smart Retail dan cara membaca HTML. Sekarang buka Lab Bab 2: Panduan Belanja Smart Retail. Lab menyediakan wadah isi utama bernama <main id="panduan"> dan paragraf pengantar. Atribut id memberi identitas unik pada elemen. Pertahankan kode di luar area jawaban.

Zona adalah area jawaban bernomor di editor lab. Ganti isi zona aktif dengan potongan dari langkah yang sama. Tekan Jalankan untuk melihat tampilan di Preview, lalu Cek untuk menilai langkah aktif. Setelah lulus, lanjutkan ke zona berikutnya. Jangan menempel contoh halaman utuh ke satu zona.

Panduan menyusun teks belanja

Langkah 1: Buat judul utama dan jam buka

Heading berarti judul bertingkat. <h1> adalah judul utama, lalu <h2> untuk bagian, hingga <h6> untuk tingkat terendah. Gunakan satu judul utama dan jangan melompati tingkat. Tingkat menyatakan struktur agar pengguna dan pembaca layar (aplikasi yang membacakan isi halaman) mudah menjelajah; ukuran huruf diatur CSS, bukan alasan memilih tingkat.

<p> membuat paragraf. <strong> menandai informasi penting, biasanya tampil tebal. Di sini jam buka adalah informasi penting.

Tempel di Lab 2, Zona 1. Berkas: index.html

  <h1>Panduan Belanja Smart Retail</h1>
  <p>Toko buka setiap hari pukul <strong>08.00 sampai 21.00</strong>.</p>

Hasil: Preview menampilkan Panduan Belanja Smart Retail sebagai judul utama, lalu jam buka dengan bagian 08.00 sampai 21.00 tebal. Cek menerima satu judul utama dan penanda jam buka.

Langkah 2: Susun kategori dan produk bersarang

<ul> adalah daftar tanpa urutan, sedangkan <li> adalah satu butir. Daftar bersarang berarti daftar di dalam butir daftar lain. Setiap kategori membungkus daftar produknya sebelum tag </li> kategori ditutup. Anak langsung <ul> harus berupa <li>.

Entitas karakter adalah cara menulis karakter khusus agar terbaca sebagai teks. & menghasilkan tanda & pada nama kategori. Salin seluruh daftar berikut, termasuk harga setiap produk.

Tempel di Lab 2, Zona 2. Berkas: index.html

  <h2>Kategori Produk</h2>
  <ul>
    <li>Snacks &amp; Confectionery (SN)
      <ul>
        <li>Keripik Singkong Rp8.000</li>
        <li>Cokelat Batang Rp12.000</li>
      </ul>
    </li>
    <li>Cold Beverages (DR)
      <ul>
        <li>Es Teh Botol Rp5.000</li>
        <li>Air Mineral Rp3.000</li>
        <li>Teh Kotak Rp4.500</li>
      </ul>
    </li>
    <li>Stationery (ST)
      <ul>
        <li>Pulpen Biru Rp2.500</li>
        <li>Buku Tulis Rp6.000</li>
      </ul>
    </li>
  </ul>

Hasil: terlihat tiga kategori dengan subdaftar produk berharga: dua produk pada Snacks & Confectionery, tiga pada Cold Beverages, dan dua pada Stationery. Cek menerima urutan kategori, jumlah produk, harga, dan susunan bersarangnya.

Langkah 3: Nomori langkah pengembalian

<ol> adalah daftar berurut. Gunakan untuk langkah yang urutannya penting. Tiap butir tetap memakai <li>; browser menambahkan angka, sehingga angka tidak diketik di dalam butir. Atribut start="3" dapat memulai daftar dari angka 3, sedangkan reversed membalik urutannya. Lab ini memakai urutan biasa dari 1.

Tempel di Lab 2, Zona 3. Berkas: index.html

  <h2>Cara Mengembalikan Barang</h2>
  <ol>
    <li>Simpan struk belanjamu.</li>
    <li>Bawa barang dan struknya ke meja layanan.</li>
    <li>Isi formulir pengembalian.</li>
    <li>Terima uang kembali atau barang pengganti.</li>
  </ol>

Hasil: empat langkah bernomor tampil dari Simpan struk belanjamu sampai Terima uang kembali atau barang pengganti. Cek menerima daftar berurut dengan empat butir tanpa nomor ketikan tambahan.

Langkah 4: Tampilkan kode dan kutipan pelanggan

<code> menandai potongan kode sebagai teks. Untuk menampilkan tanda kurung sudut, tulis < untuk < dan > untuk >; tanda sudut langsung dapat terbaca sebagai tag. <blockquote> membungkus kutipan yang berdiri sendiri. <em> menandai penekanan dalam kalimat dan biasanya tampil miring.

Tempel di Lab 2, Zona 4. Berkas: index.html

  <h2>Membaca Kode Produk</h2>
  <p>Kode produk berformat <code>&lt;kategori&gt;-&lt;nomor&gt;</code>, misalnya <code>SN-001</code>.</p>
  <blockquote>
    <p>Kasirnya ramah, dan antreannya <em>selalu</em> singkat.</p>
  </blockquote>

Hasil: format kode terlihat sebagai teks <kategori>-<nomor> dan contoh SN-001. Kutipan pelanggan muncul dengan kata selalu miring; Cek menerima entitas karakter dan penekanan di dalam kutipan.

Langkah 5: Jalankan panduan belanja utuh

Kembali ke materi dan tekan Jalankan pada playground berikut, yaitu contoh yang dapat dijalankan di halaman ini. Isinya menggabungkan kode bawaan lab dan empat zona. Untuk lab, gunakan potongan per zona dari langkah sebelumnya.

Berkas: index.html

▶ JalankanResetHTML + JavaScript

Hasil: Preview memperlihatkan judul, jam buka, pengantar, daftar kategori beserta harga, empat langkah pengembalian, format kode produk, dan kutipan kasir.

Langkah 6: Kenali bentuk teks pelengkap

Contoh berikut melengkapi konsep teks tanpa menambah jawaban lab. <br> memindahkan baris dalam paragraf, misalnya alamat; jangan menggunakannya untuk mengatur jarak antarbagian. <hr> menandai pergantian topik. <b> dan <i> memberi rupa tebal dan miring tanpa makna penting atau penekanan seperti <strong> dan <em>.

<q> menandai kutipan pendek dengan tanda petik dari browser. <pre> mempertahankan spasi serta baris baru; gabungkan dengan <code> untuk contoh kode beberapa baris. Di paragraf biasa, spasi berlebih dan baris baru digabung menjadi satu spasi.

Selain entitas tadi, " menghasilkan tanda petik,   menghasilkan spasi yang tidak diputus ke baris lain, dan © menghasilkan ©. Jalankan contoh ini apa adanya.

Berkas: index.html

▶ JalankanResetHTML + JavaScript

Hasil: kalimat pertama tidak mempertahankan spasi berlebih, alamat terpisah menjadi dua baris, dan garis pemisah muncul sebelum kutipan pendek. Contoh daftar tampil sebagai teks kode dengan baris terpisah; baris terakhir menampilkan tanda petik dan ©.

Kalau ada galat

Daftar terlihat tetapi Cek menolak susunannya. Subdaftar yang diletakkan sesudah </li> kategori bisa tetap digambar browser, tetapi bukan anak kategori yang benar. Tempel ulang Zona 2 dari Langkah 2, termasuk seluruh tag penutupnya.

Nomor tampil dua kali atau Cek menolak urutan. Jangan mengetik angka di dalam <li>. Tempel ulang Zona 3 dengan <ol>; <ul> menghasilkan tanda butir, bukan urutan angka.

Format kode menghilang. Tanda sudut langsung dibaca sebagai tag. Tempel ulang Zona 4 dengan < dan >, bukan tag bernama kategori atau nomor.

Semua teks berikutnya tebal atau miring. Pasangan </strong> atau </em> mungkin hilang. Tempel ulang potongan zona terkait agar penekanan berakhir di tempat yang tepat.

Zona berikutnya belum terbuka. Tekan Cek pada langkah aktif sampai lulus. Cocokkan teks judul dan jam buka; pertahankan paragraf pengantar serta wadah bawaan lab.

Keadaan akhir

Panduan belanja Smart Retail sudah memiliki teks terstruktur. Bab 3 melanjutkan cerita produk yang sama melalui tautan dan gambar pada kerangka lab baru.