WebTech Interaktif

HTML · Bab 2

Teks, Heading, dan Daftar

Menyusun judul bertingkat h1 sampai h6, paragraf, penekanan, kutipan, potongan kode, entitas karakter, serta daftar berurut, tak berurut, dan bersarang.

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 Smart Retail.

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.
HTML + JavaScript

🧪 Coba ubah: tambahkan <h2>Stationery</h2> beserta produk Pulpen Biru (ST-001, Rp2.500) 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.
HTML + 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 tampilTulis
<&lt;
>&gt;
&&amp;
"&quot;
spasi yang tidak boleh dipecah baris&nbsp;
©&copy;

Itulah sebabnya kategori Snacks & Confectionery ditulis Snacks &amp; Confectionery di HTML.

HTML + JavaScript

🧪 Coba ubah: ganti &lt;p&gt; 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>:

HTML + JavaScript

🧪 Coba ubah: tambahkan kategori Snacks & Confectionery beserta dua produknya 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 &lt; dan &amp;.
  • <ul> dan <ol> berisi <li>. Daftar bersarang diletakkan di dalam <li>.