Membuat Garis Horizontal di HTML

Setelah sebelumnya kita membahas form, kali ini adalah cara membuat garis horizontal di html. Fungsi garis horizontal ini biasanya di gunakan untuk memisahkan halaman atau pemisah topik pada sebuah tulisan di html, untuk dapat membuat garis horizontal ini digunakan tag <hr>.

Mengenal Tag HR

Kepanjangan dari HR adalah horizontal rule, yaitu sebuah garis lurus yang terbentuk secara horizontal, tag ini termasuk single tag, atau tag tunggal, dimana tidak ada tag penutup setelahnya, berikut ini beberapa atribut tag <hr> yang bisa di gunakan.

Atribut Nilai Keterangan
align left, center, right Untuk menentukan posisi garis.
size pixels Untuk menentukan ukuran garis.
width pixels, % Untuk menentukan lebar garis.

Cara Membuat Garis Horizontal

Contoh berikut ini adalah cara sederhana untuk membuat garis horizontal tanpa, silahkan buka text editor anda lalu ketikan kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Garis Horizontal</title>
</head>
<body>
    <h1>Contoh Garis Horizontal</h1>
    <hr />
</body>
</html>

Dari kode di atas maka akan menampilkan seperti gambar di bawah ini.

Membuat Garis Horizontal di HTML

Menentukan Ukuran Garis Horizontal

Dari contoh awal diatas hanya sebuah garis lurus sederhana saja, berikut ini cara memperbesar ukuran garis horizontal menggunakan atribut size, perlu di ingat bahwa untuk menentukan ukuran dengan atribut size di tag hr ini menggunakan satuan pixel (px), contohnya seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Garis Horizontal</title>
</head>
<body>
    <h1>Contoh Garis Horizontal</h1>
    <hr size="10px">
</body>
</html>

Dan akan tampil seperti gambar di bawah ini.

Membuat Garis Horizontal di HTML

Menentukan Panjang Garis Horizontal

Pada dasarnya secara bawaan tag <hr> akan memberikan garis dengan panjang 100%, tetapi tenang saja kita masih bisa menentukan sendiri lebar garis dalam tag <hr> yaitu menggunakan atribut width, untuk menentukan satuan panjang width pada tag <hr> ada dua tipe, yaitu pixel (px) dan persen (%), misanya penulis memberikan nilai 50% contohnya seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Garis Horizontal</title>
</head>
<body>
    <h1>Contoh Garis Horizontal</h1>
    <hr size="10px" width="50%">
</body>
</html>

Maka akan menampilkan seperti gambar di bawah ini.

Baca juga:  Menampilkan Gambar di HTML

Membuat Garis Horizontal di HTML

Menentukan Posisi Garis

Selain ukuran dan lebar garis horizontal, secara bawaan tag <hr> memberikan posisi tengah untuk menentukan posisi baris di halaman html, kita masih bisa menentukan posisi garis tersebut dengan memberikan nilai pada atribut align, contohnya seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Garis Horizontal</title>
</head>
<body>
    <h1>Contoh Garis Horizontal</h1>
    <hr size="10px" width="50%" align="left">
</body>
</html>

Dari kode diatas terlihat bahwa atribut align memberikan posisi kiri, ada tiga tipe posisi dalam atribut ini yaitu left, center, dan right, silahkan di sesuaikan, contoh kode di atas kurang lebih seperti gambar di bawah ini.

Membuat Garis Horizontal di HTML

Sebenarnya banyak sekali kegunaan tag <hr> misalnya untuk pemisah topik pada sebuah artikel di html, atau garis pembatas apa saja yang mungkin bisa di gunakan sesuai kebutuhannya, semoga tulisan di atas bermanfaat untuk pembaca sekalian.