Dalam menulis konten HTML, kadang kita perlu pindah baris tanpa membuat paragraf baru, atau membuat garis pemisah antar bagian. Di sinilah tag <br> dan <hr> berperan! Kedua tag ini adalah empty tag (tidak perlu penutup).
Ringkasan Tag
| Tag | Kepanjangan | Fungsi | Contoh |
|---|---|---|---|
<br> |
Line Break | Pindah baris / baris baru | Alamat puisi, bait lagu |
<hr> |
Horizontal Rule | Garis horizontal pemisah | Pemisah antar bagian, footer |
•
<br> dan <hr> adalah self-closing tag — tidak perlu </br> atau </hr>.
• Jangan gunakan
<br> berlebihan untuk mengatur jarak (lebih baik pakai CSS margin).
1. Tag <br> (Line Break)
<br> digunakan untuk memaksa pindah baris di dalam teks. Berbeda dengan <p> yang membuat paragraf baru dengan jarak, <br> hanya pindah ke baris berikutnya tanpa jarak tambahan.
Contoh Dasar:
<p>
Ini baris pertama.<br>
Ini baris kedua setelah <br>.<br>
Ini baris ketiga.
</p>
Hasilnya:
Ini baris pertama.
Ini baris kedua setelah <br>.
Ini baris ketiga.
Contoh: Menulis Puisi atau Alamat
<p>
<strong>Alamat Kantor:</strong><br>
Jalan Merdeka No. 123<br>
Kelurahan Kebon Jeruk<br>
Jakarta Barat, 11530
</p>
Hasilnya:
Alamat Kantor:
Jalan Merdeka No. 123
Kelurahan Kebon Jeruk
Jakarta Barat, 11530
Contoh: Menulis Pantun
<p>
Pergi ke pasar membeli sate<br>
Pulangnya mampir ke toko buku<br>
Rajin belajar setiap hari<br>
Pasti sukses di masa depanmu
</p>
Pergi ke pasar membeli sate
Pulangnya mampir ke toko buku
Rajin belajar setiap hari
Pasti sukses di masa depanmu
<br> untuk membuat jarak antar paragraf!
Salah:
<p>Teks 1</p><br><br><p>Teks 2</p>
Benar: Gunakan CSS
margin-bottom pada paragraf, atau biarkan default browser.
2. Tag <hr> (Horizontal Rule)
<hr> digunakan untuk membuat garis horizontal sebagai pemisah antar bagian konten. Sangat berguna untuk memisahkan artikel, section, atau sebelum footer.
Contoh Dasar:
<h2>Bagian 1: Pendahuluan</h2> <p>Ini adalah isi bagian pendahuluan.</p> <hr> <h2>Bagian 2: Pembahasan</h2> <p>Ini adalah isi bagian pembahasan.</p>
Hasilnya:
Bagian 1: Pendahuluan
Ini adalah isi bagian pendahuluan.
Bagian 2: Pembahasan
Ini adalah isi bagian pembahasan.
Contoh: Pemisah Artikel di Blog
<article>
<h3>5 Tips Belajar HTML untuk Pemula</h3>
<p>HTML adalah fondasi website. Berikut 5 tips cepat menguasainya...</p>
<a href="#">Baca selengkapnya</a>
</article>
<hr>
<article>
<h3>Perbedaan Div dan Span yang Wajib Tahu</h3>
<p>Div adalah block element, span adalah inline element. Simak perbedaannya...</p>
<a href="#">Baca selengkapnya</a>
</article>
5 Tips Belajar HTML untuk Pemula
HTML adalah fondasi website. Berikut 5 tips cepat menguasainya...
Baca selengkapnya →Perbedaan Div dan Span yang Wajib Tahu
Div adalah block element, span adalah inline element. Simak perbedaannya...
Baca selengkapnya →<hr> dengan Atribut (Cara Lama vs Modern)
Dulu, <hr> punya atribut seperti width, size, color, align. Tapi sekarang disarankan pakai CSS untuk styling.
Cara Lama (Tidak Disarankan):
<hr width="50%" size="5" color="blue">
Cara Modern (Pakai CSS):
<hr style="width: 50%; height: 5px; background-color: blue; border: none;">
Contoh berbagai gaya <hr> dengan CSS:
1. Default browser:
2. Garis putus-putus:
3. Garis tebal warna hijau:
4. Garis dengan gradien:
5. Garis pendek di tengah:
Studi Kasus: Halaman Profil dengan br dan hr
Berikut contoh halaman profil sederhana yang menggunakan <br> untuk alamat dan <hr> untuk pemisah:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Saya - Contoh br dan hr</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f0f4f8;
}
.card {
background: white;
padding: 25px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.profile-img {
text-align: center;
}
img {
border-radius: 50%;
}
hr {
margin: 25px 0;
border: none;
border-top: 2px dashed #cbd5e1;
}
.info {
background: #f8fafc;
padding: 15px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="profile-img">
<img src="https://via.placeholder.com/100x100?text=Avatar" alt="Foto Profil" width="100" height="100" style="border-radius: 50%;">
</div>
<h1 style="text-align: center; margin-bottom: 5px;">Ahmad Fauzan</h1>
<p style="text-align: center; color: #666; margin-top: 0;">Web Developer & Content Creator</p>
<hr>
<h2>Tentang Saya</h2>
<p>Halo! Saya seorang pengembang web yang suka belajar hal-hal baru dan berbagi ilmu melalui blog.</p>
<hr>
<h2>Kontak & Alamat</h2>
<div class="info">
<p>
<strong>Alamat:</strong><br>
Jalan Mawar No. 123<br>
RT 05 / RW 02, Kelurahan Melati<br>
Kecamatan Flamboyan, Kota Contoh<br>
Kode Pos: 12345
</p>
<p>
<strong>Email:</strong> ahmad@example.com<br>
<strong>Telepon:</strong> 0812-3456-7890<br>
<strong>Website:</strong> www.ahmadfauzan.com
</p>
</div>
<hr>
<h2>Pendidikan</h2>
<p>
<strong>S1 Teknik Informatika</strong><br>
Universitas Contoh (2020 - 2024)
</p>
<hr>
<h2>Pengalaman Kerja</h2>
<p>
<strong>Frontend Developer - PT Tech Solution</strong><br>
2024 - Sekarang
</p>
<p>
<strong>Web Developer Freelance</strong><br>
2022 - 2024
</p>
<hr>
<p style="text-align: center; color: #666; font-size: 14px;">
© 2024 - Profil Ahmad Fauzan
</p>
</div>
</body>
</html>
Perbandingan <br> vs CSS Margin
| Metode | Kelebihan | Kekurangan | Kapan Pakai? |
|---|---|---|---|
<br> |
Sederhana, cepat | Tidak fleksibel, sulit di-maintain | Puisi, alamat, bait lagu |
| CSS Margin | Fleksibel, konsisten, profesional | Perlu belajar CSS | Jarak antar elemen, layout |
- Gunakan
<br>untuk line break dalam teks (puisi, alamat, baris lagu) - Gunakan
<hr>untuk pemisah tematik antar bagian - Jangan gunakan
<br>untuk mengatur jarak vertikal — pakai CSSmargin - Jangan gunakan
<hr>hanya untuk dekorasi — pakai CSS border
Kesalahan Umum Pemula
- Menggunakan
<br><br><br>untuk membuat jarak → Buruk untuk maintenance. Pakai CSSmargin. - Menulis
</br>atau</hr>→ Ini adalah self-closing tag, tidak perlu penutup. - Menggunakan
<hr>terlalu sering → Bisa membuat halaman terlihat berantakan. - Lupa bahwa
<br>hanya pindah baris, tidak menambah margin → Sering bingung kenapa jaraknya beda dengan paragraf.
<!-- SANGAT TIDAK DISARANKAN -->
<p>Teks 1</p>
<br><br><br>
<p>Teks 2</p>
<!-- SEBALIKNYA, PAKAI CSS -->
<style>
.jarak { margin-bottom: 30px; }
</style>
<p class="jarak">Teks 1</p>
<p>Teks 2</p>
Latihan Singkat
- Buat file HTML baru dengan judul "Koleksi Pantun"
- Tulis minimal 3 pantun, setiap bait dipisah dengan
<hr> - Setiap baris dalam pantun dipisah dengan
<br> - Di bagian bawah, buat alamat fiktif menggunakan
<br> - Simpan dan buka di browser, amati hasilnya
Intisari Hari Ini
<br>→ line break (pindah baris), self-closing tag<hr>→ horizontal rule (garis pemisah), self-closing tag- Gunakan
<br>untuk puisi, alamat, bait lagu - Gunakan
<hr>untuk pemisah antar bagian konten - Jangan gunakan
<br>untuk mengatur jarak (pakai CSS margin) - Jangan gunakan
<hr>hanya untuk dekorasi (pakai CSS border)
- Isi quote (bisa menggunakan
<br>jika quotes lebih dari 1 baris) - Nama penulis quote
- Dipisah dengan
<hr>yang sudah di-custom dengan CSS (garis putus-putus, warna, atau gradien)
- Header dengan judul halaman
- Footer dengan copyright dan alamat email (gunakan
<br>untuk alamat) - Di bagian bawah, buat kotak refleksi yang menjelaskan kapan sebaiknya menggunakan
<br>dan kapan menggunakan CSS margin
Artikel Sebelumnya: HTML Dasar #18 - Membuat Layout Sederhana dengan div (Tanpa CSS)
Artikel Selanjutnya: HTML Dasar #20 - 3 Cara Menambahkan CSS ke HTML: Inline, Internal, External