#17 Membuat Garis Horizontal menggunakan Tag hr pada HTML
Tag hr adalah singkatan dari Horizontal Rule, digunakan untuk membuat garis horizontal dan membagi atau memisahkan bagian dokumen.
Tag <hr> termasuk empty tag atau tag kosong yang tidak memerlukan penutup tag.
tag hr dalam HTML bukan hal baru, sudah ada sejak HTML versi HTML 2. contoh penggunaan tag <hr>, misal dalam perubahan adegan dalam sebuah cerita atau membagi konten menjadi dua bagian dengan topik berbeda.
Baca juga : Mengenal tag meta pada HTML
cara penulisan sintaks hr sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title> Belajar Tag hr </title>
</head>
<body>
<p>
ini paragraf pertama
</p>
<hr>
<p>
ini paragraf kedua
</p>
</body>
</html>Code language: HTML, XML (xml)seperti contoh diatas kita melihat ada garis pemisah antara kedua paragraf. garis ini panjangnya mengikuti lebar ukuran jendela browser atau jika ada container yang membungkus garis tersebut. tag hr secara default memiliki jarak antara atas dan bawah.
kita juga bisa memodifikasi tag hr dengan atribut namun tidak disarankan karena kedepannya atribut memungkinkan tidak di support lagi oleh semua browser namun sekarang masih didukung oleh beberapa browser .
sebaiknya kita memodifikasi lewat style ( Cascading Style Sheets ).
berikut salah satu yang masih didukung html 5
- color : atribut color digunakan untuk memberikan warna untuk garis yang dibuat menggunakan tag <hr>.
contoh :
<!DOCTYPE html>
<html>
<head>
<title> Belajar hr dengan atribut color</title>
</head>
<body>
Aku
<hr color="red">
Sayang
<hr color="blue">
Kamu
<hr color="pink">
</body>
</html>Code language: HTML, XML (xml)berikut beberapa atribut yang tidak didukung html 5
- width : atribut width digunakan untuk mengatur lebar garis dan bisa memberikan nilai satuan pixel atau %
contoh :
<!DOCTYPE html>
<html>
<head>
<title> Belajar hr dengan atribut width</title>
</head>
<body>
Aku
<hr color="red" width="25%">
Sayang
<hr color="blue" width="50%">
Kamu
<hr color="pink" width="75%">
</body>
</html>Code language: HTML, XML (xml)- noshade : atribut noshade digunakan untuk menghapus bayangan dari garis. ini tidak memiliki nilai
<!DOCTYPE html>
<html>
<head>
<title> Belajar hr dengan atribut noshade</title>
</head>
<body>
Aku
<hr width="25%" noshade>
Sayang
<hr color="blue" width="50%">
Kamu
<hr color="pink" width="75%" noshade>
</body>
</html>Code language: HTML, XML (xml)- size : atribut size digunakan untuk mengatur ukuran garis dan memiliki nilai satuan pixel atau %
<!DOCTYPE html>
<html>
<head>
<title> Belajar hr dengan atribut size</title>
</head>
<body>
Aku
<hr width="25%" noshade size="20%">
Sayang
<hr color="blue" width="50%" size="50%">
Kamu
<hr color="pink" width="75%" size="90%" noshade>
</body>
</html>Code language: HTML, XML (xml)- align : atribut align digunakan untuk mengatur posisi garis (kiri, kanan atau tengah). Posisi standarnya adalah tengah.
<!DOCTYPE html>
<html>
<head>
<title> Belajar hr dengan atribut align</title>
</head>
<body>
Aku
<hr width="25%" noshade size="20%" align="right">
Sayang
<hr color="blue" width="50%" size="50%">
Kamu
<hr color="pink" width="75%" size="90%" noshade align="left">
</body>
</html>Code language: HTML, XML (xml)Browser support
| Elemen | Chrome | Safari | Firefox | Opera | IE |
| <hr> | Ya | Ya | Ya | Ya | Ya |
Pencarian di thohirdev:
- belajar menulis tag hr
- pengertian tag hr
- apa yang dimaksud dengan tag hr
- fungsi dari tag hr
- Atribut hr yang tidak didukung html 5