Langsung ke konten

Heading dan Paragraph di HTML

Pelajari cara menggunakan heading h1 sampai h6 dan paragraph di HTML. Pahami juga line break dan horizontal rule untuk memperindah tampilan teks.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami apa itu element dan tag, saatnya kita belajar menggunakan tag-tag dasar untuk menyusun konten teks.

Heading: Judul dalam HTML

Heading adalah elemen HTML untuk membuat judul atau judul bagian. HTML punya 6 level heading, dari <h1> sampai <h6>.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Perbedaan Level Heading

Setiap level heading punya ukuran yang berbeda:

  • <h1> — Heading terbesar, biasanya untuk judul utama halaman
  • <h2> — Sub-judul atau judul bagian utama
  • <h3> — Judul sub-bagian
  • <h4> — Judul lebih kecil lagi
  • <h5> — Jarang digunakan, untuk keperluan khusus
  • <h6> — Heading terkecil

Aturan Penggunaan Heading

  • Gunakan <h1> hanya satu kali per halaman sebagai judul utama
  • Urutkan heading secara hierarkis: <h1> → <h2> → <h3> dan seterusnya
  • Jangan loncat-loncat level (misal dari <h1> langsung ke <h4>)
  • Heading membantu SEO karena search engine membaca struktur heading untuk memahami konten

Paragraph: Paragraf Teks

Paragraph atau paragraf adalah elemen dasar untuk menampilkan teks dalam HTML. Gunakan tag <p> untuk membuat paragraf.

<p>Ini adalah paragraf pertama saya.</p>
<p>Ini adalah paragraf kedua saya.</p>

Spasi Antar Paragraf

Browser secara otomatis menambahkan spasi antar paragraf. Jadi kamu tidak perlu menambahkan baris kosong antara tag <p>. Cukup buat tag <p> baru untuk paragraf baru.

<p>Paragraf ini akan memiliki spasi di bawahnya.</p>
<p>Paragraf ini akan muncul di bawah dengan jarak yang cukup.</p>

Multi-Paragraf dalam Satu Block

Jika kamu ingin beberapa paragraf dalam satu blok, tetap gunakan tag <p> terpisah untuk setiap paragraf:

<p>HTML adalah bahasa markup untuk membuat halaman web.</p>
<p>CSS digunakan untuk mengatur tampilan halaman web.</p>
<p>JavaScript menambahkan interaktivitas pada halaman web.</p>

Line Break: Pecah Baris

Tag <br> digunakan untuk membuat baris baru di dalam paragraf tanpa membuat paragraf baru. Tag ini bersifat self-closing.

<p>
  Ini baris pertama<br />
  Ini baris kedua<br />
  Ini baris ketiga
</p>

Penggunaan <br> yang tepat:

  • Alamat surat
  • Puisi atau lirik lagu
  • Teks yang memang perlu dipisah baris

Hindari penggunaan <br> untuk memisah paragraf. Gunakan tag <p> baru untuk setiap paragraf.

Horizontal Rule: Garis Pemisah

Tag <hr> digunakan untuk membuat garis horizontal sebagai pemisah antar bagian konten. Tag ini juga self-closing.

<p>Bagian pertama tentang pengenalan HTML.</p>
<hr />
<p>Bagian kedua tentang cara kerja HTML.</p>

<hr> cocok digunakan untuk:

  • Memisah topik dalam satu halaman
  • Membuat visual break antar bagian konten
  • Menandai transisi dari satu ide ke ide lain

Contoh Penggunaan Gabungan

Berikut contoh yang menggabungkan heading, paragraph, line break, dan horizontal rule:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Heading dan Paragraph</title>
  </head>
  <body>
    <h1>Panduan Dasar HTML</h1>
    <p>HTML adalah fondasi dari setiap halaman web.</p>

    <h2>Apa itu HTML?</h2>
    <p>
      HTML singkatan dari HyperText Markup Language.<br />
      HTML digunakan untuk membuat struktur halaman web.
    </p>

    <hr />

    <h2>Mengapa Belajar HTML?</h2>
    <p>
      HTML mudah dipelajari dan menjadi langkah pertama dalam web development.
    </p>
    <p>Setelah HTML, kamu bisa belajar CSS dan JavaScript.</p>
  </body>
</html>

Best Practice Menulis Konten Teks

  • Gunakan heading secara hierarkis — Mulai dari <h1> untuk judul utama, lalu <h2> untuk sub-judul, dan seterusnya
  • Satu ide per paragraf — Setiap paragraf sebaiknya membahas satu ide pokok
  • Hindari paragraf terlalu panjang — Paragraf yang terlalu panjang sulit dibaca di layar
  • Gunakan <br> dengan bijak — Hanya untuk keperluan format khusus, bukan untuk memisah paragraf
  • Pisah bagian dengan <hr> — Membantu pembaca melihat transisi antar topik

Ringkasan

  • Heading <h1> sampai <h6> digunakan untuk membuat judul dengan ukuran berbeda
  • Gunakan <h1> hanya sekali untuk judul utama halaman
  • Paragraph <p> adalah elemen dasar untuk menampilkan teks
  • Line break <br> untuk membuat baris baru di dalam paragraf
  • Horizontal rule <hr> untuk membuat garis pemisah antar bagian
  • Selalu gunakan heading secara hierarkis untuk SEO dan keterbacaan

Langkah Selanjutnya

Kamu sudah memahami cara menampilkan teks dengan heading dan paragraph. Artikel selanjutnya membahas text formatting, cara membuat teks tebal, miring, garis bawah, dan format lainnya.