Heading, Paragraf, dan Format Teks

Kalau kamu pernah bikin iklan di Meta Ads atau Google Ads, kamu pasti sudah terbiasa dengan konsep headline dan body text. Di HTML, konsepnya persis sama, cuma caranya sedikit berbeda.

Heading: Hierarki Judul

HTML punya 6 level heading, dari <h1> (paling besar dan penting) sampai <h6> (paling kecil):

<h1>Judul Utama Landing Page</h1>
<h2>Sub-Judul Seksi</h2>
<h3>Sub-Sub Judul</h3>

Aturan penting untuk advertiser:

• Satu halaman sebaiknya hanya punya satu <h1>. Ini judul utama halaman, setara headline iklan kamu. Google juga membaca <h1> untuk memahami topik halaman.
• <h2> dipakai untuk membagi halaman jadi beberapa seksi. Misalnya: “Fitur Produk”, “Testimoni”, “Harga”.
• Jangan lompati level (dari <h1> langsung ke <h4>). Urutannya harus mengalir natural.

Kenapa ini penting buat advertiser? Karena Quality Score di Google Ads dipengaruhi oleh relevansi landing page. Heading yang terstruktur rapi memberi sinyal positif ke Google bahwa halaman kamu berkualitas.

Paragraf

Setiap blok teks dibungkus dalam tag <p>:

<p>Produk ini sudah dipakai oleh lebih dari 10.000 UMKM di Indonesia.</p>
<p>Tersedia dalam 3 paket berbeda sesuai kebutuhan bisnis kamu.</p>

Setiap tag <p> otomatis mendapat jarak (margin) atas dan bawah. Jadi kamu tidak perlu menambahkan baris kosong secara manual.

Kesalahan yang sering saya temui: orang menulis semua teks dalam satu tag <p> raksasa. Hasilnya? Dinding teks yang bikin pengunjung kabur. Pecah jadi paragraf-paragraf pendek, sama seperti prinsip copywriting.

Format Teks

Untuk menebalkan atau memiringkan teks:

<p>Promo ini <strong>hanya berlaku sampai 31 Maret</strong>.</p>
<p>Diskon <em>khusus member</em> sebesar 20%.</p>

• <strong> — Teks tebal. Dipakai untuk informasi yang paling penting kamu ingin pembaca perhatikan. Browser juga memahami <strong> sebagai penekanan semantik, bukan cuma visual.
• <em> — Teks miring (italic). Untuk penekanan yang lebih halus.

Ada juga <b> (bold) dan <i> (italic) yang secara visual sama, tapi tidak punya makna semantik. Untuk landing page, saya pribadi merekomendasikan <strong> dan <em> karena lebih baik untuk aksesibilitas dan SEO.

Line Break

Kadang kamu perlu pindah baris tanpa membuat paragraf baru:

<p>Jl. Sudirman No. 123<br>
Jakarta Selatan<br>
Indonesia</p>

Tag <br> (break) memaksa pindah baris. Perhatikan, <br> adalah salah satu tag yang tidak punya tag penutup.

List: Daftar Berkurung dan Bernomor

Untuk menampilkan fitur produk atau langkah-langkah, gunakan list:

Unordered List (bullet points):

<ul>
  <li>Gratis ongkir ke seluruh Indonesia</li>
  <li>Garansi 30 hari uang kembali</li>
  <li>Support 24/7 via WhatsApp</li>
</ul>

Ordered List (bernomor):

<ol>
  <li>Pilih paket yang sesuai</li>
  <li>Isi formulir pendaftaran</li>
  <li>Lakukan pembayaran</li>
  <li>Akses langsung terbuka</li>
</ol>

List itu sangat powerful di landing page. Orang-orang scan, bukan baca. Daftar bullet point jauh lebih mudah di-scan daripada paragraf panjang. Ini prinsip yang sudah saya terapkan di puluhan landing page dan dampaknya konsisten meningkatkan time on page.

Praktik: Membuat Seksi Hero Sederhana

Coba gabungkan semua yang sudah dipelajari:

<h1>Kelola Semua Iklan dari Satu Dashboard</h1>
<p>Platform <strong>all-in-one</strong> untuk advertiser yang mengelola kampanye di <em>multiple channel</em>.</p>

<h2>Kenapa Harus Pakai Kami?</h2>
<ul>
  <li>Integrasi dengan Meta Ads, Google Ads, dan TikTok Ads</li>
  <li>Laporan otomatis setiap hari ke email kamu</li>
  <li>Setup cuma 5 menit, tanpa coding</li>
</ul>

Salin kode ini ke CodePen, lalu modifikasi sesuai produk atau jasa yang kamu promosikan. Hasilnya memang masih polos tanpa styling, tapi strukturnya sudah benar.

Chapter berikutnya, kita bahas cara membuat link dan memasukkan gambar, dua elemen yang pasti ada di setiap landing page.