Belajar Line Break HTML <br> dan <hr>

Saat pertama kali belajar HTML, banyak orang fokus pada heading, paragraf, atau gambar. Padahal ada dua elemen sederhana yang sering digunakan untuk mengatur tampilan isi halaman, yaitu Line Break (<br>) dan Horizontal Rule (<hr>). Walaupun terlihat sederhana, penggunaan keduanya perlu dipahami agar struktur halaman tetap rapi dan sesuai standar HTML.

Di artikel ini, Adi Prayitno akan membahas fungsi tag <br> dan <hr>, perbedaan keduanya, contoh penggunaannya, serta kesalahan yang sering dilakukan pemula. Setelah memahaminya, kamu bisa menyusun konten HTML dengan lebih terstruktur dan mudah dibaca.

Apa Itu Tag <br> dalam HTML?

Tag <br> (Line Break) digunakan untuk membuat baris baru tanpa harus membuat paragraf baru.

Saat browser menemukan tag ini, teks setelahnya akan langsung berpindah ke baris berikutnya. Tag <br> termasuk void element, sehingga tidak memerlukan tag penutup.

Contoh penggunaannya:

<p>Nama: Adi Prayitno<br>
Kota: Semarang<br>
Hobi: Belajar HTML</p>

Hasilnya akan tampil seperti berikut.

Nama: Adi Prayitno
Kota: Semarang
Hobi: Belajar HTML

Kapan Sebaiknya Menggunakan <br>?

Tag <br> cocok digunakan ketika memang diperlukan perpindahan baris dalam satu konteks tulisan.

Beberapa contoh penggunaan yang tepat adalah:

• Menulis alamat lengkap.
• Menampilkan lirik lagu.
• Menulis puisi.
• Menampilkan informasi kontak.
• Menampilkan data dengan format tertentu.

Pada kondisi tersebut, perpindahan baris memang menjadi bagian dari isi teks.

Kapan Tidak Disarankan Menggunakan <br>?

Kesalahan yang sering dilakukan pemula adalah menggunakan banyak tag <br> hanya untuk memberi jarak antar elemen.

Contohnya seperti berikut.

<p>Paragraf pertama.</p>
<br><br><br>
<p>Paragraf kedua.</p>

Cara tersebut tidak direkomendasikan.

Jika tujuanmu hanya ingin memberikan jarak antar elemen, gunakan CSS melalui properti seperti margin atau padding, bukan menumpuk tag <br>.

Apa Itu Tag <hr> dalam HTML?

Tag <hr> (Horizontal Rule) digunakan untuk membuat garis horizontal sebagai pemisah antarbagian dalam sebuah halaman.

Di HTML modern, <hr> bukan sekadar membuat garis, tetapi juga menunjukkan bahwa terdapat perpindahan topik atau perubahan pembahasan.

Contoh:

<h2>Pendahuluan</h2>

<p>Belajar HTML dimulai dari memahami struktur dasar.</p>

<hr>

<h2>Materi Berikutnya</h2>

<p>Sekarang kita akan mempelajari elemen paragraf.</p>

Browser akan menampilkan sebuah garis horizontal di antara dua bagian tersebut.

Fungsi Tag <hr>

Selain membuat tampilan lebih rapi, tag <hr> memiliki beberapa manfaat lain.

• Memisahkan dua topik pembahasan.
• Membantu pembaca mengenali pergantian bagian.
• Membuat halaman lebih mudah dipindai (skimming).
• Menambah struktur visual pada artikel.

Karena alasan inilah <hr> masih banyak digunakan dalam artikel, dokumentasi, maupun halaman web modern.

Perbedaan <br> dan <hr>

Walaupun sama-sama memengaruhi tampilan halaman, fungsi keduanya sangat berbeda.

<br>	<hr>
Membuat baris baru	Membuat garis pemisah
Digunakan di dalam teks	Digunakan untuk memisahkan bagian halaman
Tidak memiliki tampilan garis	Menampilkan garis horizontal
Cocok untuk alamat, puisi, atau kontak	Cocok untuk memisahkan topik pembahasan

Memahami perbedaan ini akan membantu kamu memilih tag yang tepat sesuai kebutuhan.

Apakah <br> dan <hr> Memiliki Tag Penutup?

Tidak.

Baik <br> maupun <hr> termasuk void elements, yaitu elemen HTML yang tidak memiliki isi sehingga tidak memerlukan tag penutup.

Penulisannya cukup seperti berikut.

<br>

<hr>

Pada HTML5, bentuk ini sudah menjadi standar dan paling umum digunakan.

Apakah <br> dan <hr> Berpengaruh pada SEO?

Secara langsung, kedua tag ini bukan faktor penentu peringkat di mesin pencari.

Namun, penggunaan yang tepat dapat meningkatkan pengalaman pengguna (user experience), membuat artikel lebih mudah dibaca, dan membantu menyusun struktur konten dengan lebih baik. Hal-hal tersebut secara tidak langsung mendukung praktik SEO On-Page.

Karena itu, gunakan <br> dan <hr> sesuai fungsinya, bukan sekadar untuk mempercantik tampilan.

Kesalahan yang Sering Dilakukan Pemula

Saat belajar HTML, beberapa kesalahan berikut cukup sering ditemui.

• Menggunakan banyak <br> untuk membuat jarak kosong.
• Menggunakan <hr> hanya sebagai hiasan.
• Menumpuk beberapa <hr> sekaligus.
• Menggabungkan <br> dan <hr> tanpa tujuan yang jelas.
• Tidak menggunakan CSS untuk mengatur spasi antar elemen.

Menghindari kebiasaan tersebut akan membuat kode HTML lebih bersih dan mudah dipelihara.

Tips Menggunakan <br> dan <hr>

Agar kode HTML tetap rapi, ikuti beberapa tips berikut.

1. Gunakan <br> hanya jika memang membutuhkan pindah baris.
2. Gunakan <hr> untuk memisahkan bagian atau topik pembahasan.
3. Jangan memakai <br> sebagai pengganti pengaturan jarak dengan CSS.
4. Susun struktur HTML terlebih dahulu sebelum memikirkan tampilan visual.
5. Gunakan CSS jika ingin mengubah warna, ketebalan, atau gaya garis <hr>.

Dengan cara ini, halaman web akan lebih mudah dipahami oleh pembaca maupun browser.

Kesimpulan

Tag <br> dan <hr> memang sederhana, tetapi keduanya memiliki fungsi yang berbeda. <br> digunakan untuk membuat baris baru dalam satu konteks tulisan, sedangkan <hr> berfungsi sebagai pemisah antarbagian atau pergantian topik pada halaman web. Menggunakan keduanya sesuai standar HTML akan membuat struktur halaman lebih rapi, mudah dibaca, dan lebih mudah dipahami.

Semoga pembahasan di blog Adi Prayitno ini membantu kamu memahami penggunaan Line Break dan Horizontal Rule dengan benar. Jika masih ada pertanyaan atau ingin berbagi pengalaman saat belajar HTML, tuliskan di kolom komentar. Jangan lupa bagikan artikel ini kepada teman yang juga sedang belajar membuat website agar semakin banyak yang memahami dasar-dasar HTML dengan benar.

Berbagi :