Langsung ke konten utama

HTML HR

Tag <hr> digunakan untuk membuat garis horizontal dan untuk membagi dokumen menjadi dua bagian terpisah pada bagian atas dan bagian bawah. Tag <hr> adalah tag kosong (empty tag) sehingga tidak memerlukan bagian closing tag.

Atribut tag: Tabel 1 berikut ini mendeskripsikan atribut dari tag <hr>:

Tabel 1 Atribut Tag
ATRIBUTVALUEDESKRIPSI
AlignleftDigunakan untuk menentukan posisi rataan dari baris horizontal.
center
right
noshadenoshadeDigunakan untuk menentukan bar tanpa efek shading atau efek bayangan.
sizepixelsDigunakan untuk menentukan panjang dari garis horizontal.
widthpixelsDigunakan untuk menentukan lebar dari garis horizontal.

Sintak:
<hr>...

Berikut adalah ilustrasi program yang menggunakan tag <hr> pada html:

Contoh 1:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML hr tag

</title>

</head>

 

<body>

<p>

Ada garis horizontal pada bagian bawah paragraf.

</p>

 

<hr>

 

<p>

Ada garis horizontal pada bagian atas paragraf.

</p>

</body>

</html>

Output:

Ada garis horizontal pada bagian bawah paragraf.


Ada garis horizontal pada bagian atas paragraf.


Contoh 2:

<!DOCTYPE html>

<html>

 

<head>

<title>

hr tag dengan nilai atribut

</title>

</head>

 

<body>

<p>

Garis horizontal normal.

</p>

 

<hr>

  

<p>

Garis horizontal dengan ukuran

panjang 30 pixels.

</p>

 

<hr size="30">

  

<p>

Garis horizontal dengan ukuran

panjang 30 pixels dan noshade.

</p>

 

<hr size="30" noshade>

 

</body>

 

</html>

Output:

Garis horizontal normal.


Garis horizontal dengan ukuran panjang 30 pixels.


Garis horizontal dengan ukuran panjang 30 pixels dan noshade.



Penggunaan Tag <hr> Menggunakan Nilai Atribut
Pada tag <hr> digunakan atribut width untuk mengatur ukuran lebar dari garis horizontal dalam satuan pixel ataupun persen.

Sintak:
<hr width="pixels|%">

Nilai atribut:
  • satu, Pixel: Berfungsi untuk mengatur ukuran lebar dari atribut <hr> dalam satuan pixel.
  • dua, %: Berfungsi untuk mengatur ukuran lebar dari atribut <hr> dalam satuan persen (%).

Catatan: Nilai width atau lebar pada tag <hr> tidak lagi didukung pada HTML5.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML hr dengan atribut width

</title>

</head>

 

<body style="text-align:center;">

<h1>

Blog ElfanMauludi

</h1>

 

<hr width="500px;">

 

<p>

Portal komputer science

</p>

 

<hr width="70%">

 

</body>

 

</html>

Output:

Blog ElfanMauludi


Portal komputer science




Atribut Align pada Tag <hr>
Atribut align pada tag <hr> digunakan untuk mengatur posisi dari garis horizontal. Jika lebar dari atribut diatur dalam ukuran 100% maka posisi dari atribut (align) tidak akan menciptakan efek perubahan apapun terhadap garis horizontal.

Sintak:
<hr align="left | center | right">

Nilai Atribut:
  • left: Mengatur garis horizontal agar berada di posisi kiri.
  • center: Mengatur garis horizontal agar berada di posisi tengah dan juga merupakan nilai default.
  • right: Mengatur garis horizontal agar berada di posisi kanan.

Catatan: Atribut align pada tag <hr> sudah tidak didukung lagi penggunaannya pada HTML5.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML hr dengan atribut align

</title>

</head>

 

<body>

<h1>

Blog ElfanMauludi

</h1>

 

<hr 

width="300px;"

size="10"

align="left"

>

 

<p>

Portal ilmu komputerz

</p>

 

<hr 

width="50%"

size="20"

>

 

<p>

HTML hr dengan atribut align.

</p>

 

<hr 

width="50%"

size="30"

align="right"

>

 

</body>

 

</html>

Output:

Blog ElfanMauludi


Portal ilmu komputerz


HTML hr dengan atribut align.



Atribut Size pada Tag <hr>
Penggunaan atribut size pada tag <hr> adalah digunakan untuk mengatur ukuran tinggi (height) dari garis horizontal dalam satuan pixel.

Sintak:
<hr size="pixels">

Nilai Atribut: Mengandung nilai tunggal dalam satuan pixel untuk mengatur ukuran tinggi dari garis horizontal.

Catatan: Atribut <hr> sudah tidak didukung lagi penggunaannya pada HTML5.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML hr dengan atribut size

</title>

</head>

 

<body style="text-align:center;">

 

<h1>

Blog ElfanMauludi

</h1>

 

<hr 

width="500px;"

size="10"

>

 

<p>

Portal ilmu komputer

</p>

 

<hr 

width="70%"

size="20"

>

 

</body>

 

</html>

Output:

Blog ElfanMauludi


Portal ilmu komputer



Atribut noshade pada Tag <hr>
Atribut noshade adalah sebuah nilai boolean (nilai yang terdiri dari dua kondisi) dan digunakan untuk mengatur ketebalan garis dari bayangan pada garis horizontal.

Sintak:
<hr noshade>

Catatan: Atribut noshade pada tag <hr> sudah tidak didukung lagi penggunaannya pada HTML5.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML hr dengan atribut noshade

</title>

</head>

 

<body style="text-align:center;">

 

<h1>

Blog ElfanMauludi

</h1>

 

<hr 

width="500px;"

size="10"

>

 

<p>

Portal ilmu komputer

</p>

 

<hr 

width="70%"

size="20"

noshade

>

 

</body>

 

</html>

Output:

Blog ElfanMauludi


Portal ilmu komputer


Komentar

  1. Apa fungsi tag hr pada html?

    BalasHapus
    Balasan
    1. Tag HR digunakan untuk mendefinisikan jeda tematik pada halaman HTML. Elemen tersebut merupakan elemen yang paling sering ditampilkan sebagai 'horizontal rule' yang digunakan untuk memisahkan konten atau menetapkan suatu berubahan pada HTML.

      Hapus
  2. Apa kepanjangan dari hr pada tag html?

    BalasHapus
  3. Elemen HRM pada HTML mewakili jeda tematik antara elemen pada paragraf.

    BalasHapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D