Garis Horizontal HTML: Tag hr dan Cara Memberinya Gaya

Cara menambahkan garis horizontal

Taruh <hr> di antara dua blok konten. Tag ini tidak punya tag penutup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

Secara default, garisnya membentang selebar container-nya, punya margin kecil di atas dan di bawah, dan digambar sebagai border inset abu-abu yang tipis (satu sisi terang dan satu sisi gelap).

<hr> adalah singkatan dari horizontal rule. Di HTML, hr berarti jeda tematik: pergantian topik atau adegan di dalam sebuah bagian. Screen reader mengumumkannya sebagai pemisah. Kalau kamu hanya ingin garis hiasan (di bawah heading, di sekeliling kartu), gambar dengan border CSS di elemen itu.

Memberi gaya hr dengan CSS

Tampilan default-nya berasal dari border, jadi cara yang bisa diandalkan untuk memberi gaya <hr> adalah menghapus border-nya lalu menggambar satu border sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

Mengatur color: blue saja di hr memang mengubah garisnya di browser saat ini, tapi gaya inset default-nya memberinya bayangan dan tingginya tetap 2px. Mengatur ulang border-nya memberimu persis apa yang kamu minta.

Atribut hr yang lama

Kode lama memakai atribut di tag-nya langsung:

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade dan align sudah usang. Browser masih menerapkannya supaya halaman lama terlihat benar, tapi semuanya HTML yang tidak valid dan lebih sulit diubah nanti. Ganti dengan CSS di atas.

Pemisah dengan teks di tengah

Garis "atau" di antara dua tombol masuk bukanlah <hr> (hr tidak bisa berisi teks). Garis itu adalah baris flex dengan garis yang digambar di kedua sisi kata:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

Dua potongan ::before dan ::after masing-masing mengambil setengah ruang kosong dengan flex: 1 dan menggambar border atas. Ganti or dengan kata yang lebih panjang dan garisnya menyusut menyesuaikan.

Garis vertikal

Tidak ada versi vertikal dari <hr>. Gambar garis vertikal dengan border di salah satu sisi elemen, atau dengan elemen tipis di dalam baris flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start menaruh garis di awal teks, yaitu di kiri untuk bahasa Inggris dan di kanan untuk bahasa Arab atau Ibrani, jadi layout-nya berfungsi di kedua arah.

Kesalahan umum

• Menulis </hr>. <hr> adalah elemen void. <hr> atau <hr /> sudah cukup.
• Memakai <hr> sebagai hiasan. Screen reader mengumumkan setiap hr. Garis yang hanya untuk tampilan seharusnya dibuat dengan CSS.
• Memberi gaya hanya dengan color. Atur ulang border dengan border: none lalu atur border-top.
• Memakai <br> atau garis bawah untuk menggambar garis. Pakai <hr> atau border. Lihat baris baru untuk kegunaan <br>.
• Memakai atribut yang sudah usang. Pindahkan size, width, color dan noshade ke CSS.