Some text some message..
Some text some message..
Some text some message..
Some text some message..

Elemen Hr (Horizontal Rule) Pada HTML

previous Previous Page

HTML elemen tag <hr> (horizontal rule) merupakan elemen pada HTML yang digunakan untuk membuat garis datar memanjang secara horisontal. Elemen <hr> sering digunakan saat terjadi perubahan tema bahasan pada level elemen paragraf sehingga diperlukan sebuah garis horisontal sebagai pemisah dengan bagian di bawahnya. Elemen ini akan menghasilkan pergantian baris (line break) sekaligus memberikan suatu garis lurus mendatar.

HTML elemen tag Elemen <hr> merupakan elemen tunggal sehingga penulisannya tidak harus diakhiri dengan tag penutup. Penulisan elemen tag <hr> dapat ditulis dengan tag <hr> tanpa tag penutup. Penulisan tag dengan self-closed <hr /> lebih disarankan karena sesuai dengan format standar xml, namun HTML5 menganggap keduanya adalah tag yang sama dan tidak dibedakan.

Berikut ini contoh penggunaan elemen HTML elemen tag <hr>:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen tag HTML HR (horizontal rule)</title>
<style>
   hr{
     color:magenta;
   }
</style>
</head>
<body>
   <h1>Belajar Menggunakan Elemen tag HTML HR</h1>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.
   <hr>
   Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <hr>
   Maecenas dapibus eleifend libero vitae tincidunt. Vivamus dui nisl, volutpat et lacinia et, imperdiet eget enim. Vivamus eu risus a neque ullamcorper tincidunt. Cras mollis lectus enim. Nunc vestibulum tortor vitae mattis pretium. Aliquam erat volutpat. Donec tristique finibus justo non convallis. Praesent libero justo, fringilla non mattis a, tincidunt ac nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam rutrum sapien a bibendum viverra.
   </p>
</body>
</html>

Jika dijalankan pada browser hasilnya sebagai berikut :

horizontal ruler hr

Elemen <hr> memiliki beberapa attribut, seperti align, color, noshade, size, width. Attribut width digunakan untuk menjabarkan lebar garis yang akan dibuat dengan satuan pixel ataupun persentase. Attribut color digunakan untuk memberi warna tertentu pada elemen <hr>. Attribut align berfungsi sebagai nilai perataan posisi garis dengan nilai left, right, center.

Sebagai contoh, misalnya jika Anda mengisi attribut width dengan nilai angka "50%", artinya panjang garis yang akan dibuat memiliki lebar "50% " atau setengah dari lebar layar komputer ataupun layar smartphone. Kemudian jika Anda memasukkan attribut align dengan nilai "left" artinya garis akan diposisikan dengan perataan kiri.

Berikut ini contoh penggunaan attribut width dan attribut align pada elemen <hr>.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen tag HTML HR (horizontal rule)</title>
</head>
<body>
<h1>Belajar Menggunakan Elemen tag HTML HR</h1>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.
   <hr width="100%" align="left" color="red">
   Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <hr width="75%" align="center" color="green">
   Maecenas dapibus eleifend libero vitae tincidunt. Vivamus dui nisl, volutpat et lacinia et, imperdiet eget enim. Vivamus eu risus a neque ullamcorper tincidunt. Cras mollis lectus enim. Nunc vestibulum tortor vitae mattis pretium. Aliquam erat volutpat. Donec tristique finibus justo non convallis. Praesent libero justo, fringilla non mattis a, tincidunt ac nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam rutrum sapien a bibendum viverra.
   <hr width="50%" align="right" color="teal">
   </p>
</body>
</html>

Jika dijalankan pada browser hasilnya sebagai berikut :

horizontal ruler hr

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<hr>yayayayaya

Global Attributes :

Tag <hr> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <hr> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <hr> pada HTML :

CSS

1
2
3
4
5
6
7
8
9
hr{
   display: block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: auto;
   margin-right: auto;
   border-style: inset;
   border-width: 1px;
}

noteCatatan : Pada HTML5, beberapa attribut untuk elemen <hr> mulai dihilangkan (deprecated) seperti width, size, color, noshade, and align. Anda dapat menggunakan style CSS untuk memodifikasi properti elemen <hr>. Properti yang disediakan CSS jauh lebih lengkap di antaranya seperti warna (color), jenis garis (dotted, dashed, solid, dll), width, height dan lainnya.

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial HTML

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami