--> Skip to main content

Memahami Fungsi tag hr pada HTML


Dalam pembelajaran HTML kali ini, kita akan membahas tentang tata cara membuat garis horizontal pada html.

Untuk membuat garis horizontal pada html, maka kita akan menggunakan tag <hr>.

Namun sebenarnya fungsi dari tag <hr> pada HTML5 bukanlah sebagai garis horizontal, namun sebagai thematic break. Maksud dari thematic break semacam pemisah antara satu paragraf dengan paragraf lain, dimana akan terbuat garis horizontal juga.

Contoh Horizontal Line
<!DOCTYPE html>
<html>
<head>
 <title>Thematic Break</title>
</head>
<body>
 Baris Pertama
 <hr>
 Baris Kedua
 <hr>
 Baris Ketiga
 <hr>
</body>
</html>

Outputnya ditunjukkan oleh Gambar.1:

(Gambar.1)


Contoh Horizontal line color

Pada contoh ini kita akan membuat horizontal line dengan menggunakan atribut "color". Walaupun atribut ini sebenarnya sudah obselete pada HTML5, namun masih berjalan dengan sempurna pada berbagai macam browser.
<!DOCTYPE html>
<html>
<head>
 <title>Thematic Break</title>
</head>
<body>
 Baris Pertama
 <hr color="red">
 Baris Kedua
 <hr color="green">
 Baris Ketiga
 <hr color ="blue">
</body>
</html>

Outputnya ditunjukkan oleh Gambar.2:

(Gambar.2)


Contoh Horizontal Line Size
Dalam contoh ini kita akan akan menambah atribut size untuk horizontal line yang kita buat. Fungsi dari atribut size tersebut untuk membuat ketebalan dari horizontal line. Atribut ini juga sudah obselete pada html5, namun lagi-lagi masih bisa berjalan sempurna pada semua browse
<!DOCTYPE html>
<html>
<head>
 <title>Thematic Break</title>
</head>
<body>
 Baris Pertama
 <hr size="10px" color="red">
 Baris Kedua
 <hr size="20px" color="green">
 Baris Ketiga
 <hr color ="blue">
</body>
</html>

Outputnya ditunjukkan oleh Gambar.3:

(Gambar.3)



Pengaturan tag <hr> dengan CSS
Ada baiknya pengaturan atribut yang sudah obselete pada HTML5, kita atur pada sisi css (cascade style sheet). Hal ini untuk mengantisipasi jika browser nantinya tidak mengsupport lagi pemakaian attribut dari tag <hr> yang sudah obselete.

Berikut ini contoh pengaturan css untuk tag <hr>
<!DOCTYPE html>
<html>
<head>
<title>Thematic Break</title>
<style>
hr.brs1 {
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   background-color: red;
   border-top-color: red;
   border-right-color: red;
   border-bottom-color: red;
   border-left-color: red;
}
hr.brs2 {
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   background-color: green;
   border-top-color: green;
   border-right-color: green;
   border-bottom-color: green;
   border-left-color: green;
}
hr.brs3 {
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   background-color: blue;
   border-top-color: blue;
   border-right-color: blue;
   border-bottom-color: blue;
   border-left-color: blue;
}
</style> 
 
</head>
<body>
 Baris Pertama
 <hr class="brs1">
 Baris Kedua
 <hr class="brs2">
 Baris Ketiga
 <hr class="brs3">
</body>
</html>

Outpunya ditunjukkan oleh Gambar.4:


(Gambar.4)


Jika kita perhatikan output pada Gambar.4 akan menghasilkan Output yang sama pada Gambar.2.

Jadi kesimpulannya untuk menggantikan atribut color dan lain-lain, kita dapat lakukan disisi css-nya.

Untuk menghasilkan ouput seperti Gambar.3 yang memiliki ketebalan pada horizontal line-nya, kita dapat gunakan kode height pada sisi css seperti contoh berikut:
hr.brs1 {
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   background-color: red;
   border-top-color: red;
   border-right-color: red;
   border-bottom-color: red;
   border-left-color: red;
   height:10px;
}
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar