Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Garis Menggunakan Tag HR pada HTML

Dipublikasikan Oleh: elfanmauludi 10 komentar
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. Untuk dapat membuat garis horizontal tersebut pada kode HTML digunakan Tag <HR>. Tag tersebut merupakan tag yang terdapat pada HTML yang digunakan untuk membuat garis lurus horizontal pada laman web. Tag <HR> juga memiliki atribut yang digunakan untuk mengatur ketebalan dan panjang garis horizontal, yaitu atribut SIZE dan WIDTH.


Sebelum mempelajari materi tentang cara Membuat Garis Menggunakan Tag HR pada HTML, terlebih dahulu pelajari materi tentang: Cara Mengatur Lokasi Peta HTML pada GPS, Cara Membuat Drag and Drop pada HTML, dan 255 Kumpulan Karakter yang Sering Digunakan pada HTML.

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:

<!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:

<!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:
  • Pixel: Berfungsi untuk mengatur ukuran lebar dari atribut <hr> dalam satuan pixel.
  • %: 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



Baca Juga:

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


Tag <hr> merupakan elemen horizontal rule atau garis horizontal yang digunakan dalam HTML untuk memisahkan atau membuat pembatas antara konten dalam dokumen. Meskipun terlihat sederhana, tag <hr> memiliki beberapa kelebihan yang berguna dalam pengembangan web. Mari perhatikan beberapa keunggulannya:
  • Pemisahan Konten yang Jelas: Tag <hr> digunakan untuk memisahkan atau membagi konten secara visual. Ini membantu dalam memberikan struktur yang lebih jelas pada halaman web, memisahkan bagian-bagian konten, seperti bagian dalam artikel, komentar, atau topik yang berbeda.
  • Meningkatkan Keterbacaan: Penggunaan tag <hr> membantu meningkatkan keterbacaan konten dengan memberikan perbedaan visual di antara bagian-bagian penting dalam dokumen. Ini membuat pengalaman membaca lebih baik bagi pengguna dengan memperjelas struktur dan alur informasi.
  • Menambah Estetika Halaman Web: Tag <hr> dapat digunakan untuk tujuan estetika, memberikan garis atau pemisah yang menarik secara visual. Dengan memanfaatkannya secara kreatif, pengembang dapat menambahkan elemen desain sederhana yang mempercantik tampilan halaman web.
  • Penggunaan yang Fleksibel: Tag <hr> dapat ditempatkan di berbagai tempat dalam dokumen HTML. Ini bisa diletakkan di antara paragraf, sebelum atau sesudah judul, di tengah artikel, atau di bagian mana pun yang memerlukan pemisahan visual.
  • Membantu Aksesibilitas: Pemisahan konten menggunakan tag <hr> juga dapat memberikan manfaat bagi pengguna dengan aksesibilitas terbatas atau yang menggunakan teknologi bantu. Ini membantu memperjelas struktur halaman dan membuat navigasi menjadi lebih mudah dipahami.
  • Penggunaan dalam Desain Responsif: Dalam desain responsif, tag <hr> dapat diatur untuk berubah tampilan atau warna sesuai dengan perangkat atau lebar layar tertentu. Ini membantu dalam menyesuaikan tampilan konten agar sesuai dengan ukuran layar yang berbeda.
  • Tambahkan Informasi Tambahan: Di samping memisahkan konten, tag <hr> juga dapat digunakan untuk menandai batas dimana informasi penting berakhir atau sebagai penanda untuk peralihan ke bagian selanjutnya dalam halaman web.

Tag <hr> adalah alat sederhana namun penting dalam desain web yang membantu dalam membagi dan memisahkan konten, meningkatkan keterbacaan, dan menambah estetika halaman. Namun, penggunaannya haruslah dipertimbangkan dengan baik agar tidak mengganggu alur konten atau membuat tampilan web terlalu penuh dengan garis-garis yang tidak diperlukan.

Dengan penggunaan yang tepat, tag <hr> dapat menjadi elemen penting dalam menyusun tata letak dan struktur halaman web yang lebih baik dan lebih menarik.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Sita Ardhania Ramadhani, Victor Ryan Tuapattinaja, Violla Farentika, Yuni Diah Astuti, dan Achmad Cholis Najib.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

10 komentar untuk "Membuat Garis Menggunakan Tag HR pada HTML"

  1. AnonimSabtu, 22 Mei 2021 pukul 10.56.00 WIB

    Apa fungsi tag hr pada html?

    BalasHapus
    Balasan
    1. AnonimSabtu, 22 Mei 2021 pukul 10.56.00 WIB

      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. AnonimRabu, 03 Agustus 2022 pukul 10.37.00 WIB

      Jadi tag HR itu mendefinisikan jeda tematik pada halaman html. Contoh, seperti digunakan untuk pergeseran topik pada paragraf. Elemen HR paling sering ditampilkan sebagai aturan horizontal yang digunakan untuk memisahkan konten atau menentukan perubahan pada halaman HTML.

      Hapus
  2. AnonimSabtu, 22 Mei 2021 pukul 10.56.00 WIB

    Apa kepanjangan dari hr pada tag html?

    BalasHapus
  3. AnonimSabtu, 22 Mei 2021 pukul 10.57.00 WIB

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

    BalasHapus
  4. AnonimRabu, 03 Agustus 2022 pukul 10.38.00 WIB

    Apa arti HR pada tag HR html?

    BalasHapus
    Balasan
    1. AnonimRabu, 03 Agustus 2022 pukul 10.38.00 WIB

      Tag HR pada HTML adalah singkatan dari HORIZONTAL RULE (aturan horizontal) yang digunakan untuk memasukkan aturan horizontal atau jeda tematik ke dalam laman HTML untuk membagi atau memisahkan bagian dokumen. Tag HR adalah tag kosong yang tidak membutuhkan tag akhiran.

      Hapus
    2. AnonimRabu, 03 Agustus 2022 pukul 10.38.00 WIB

      Tag HR HTML adalah sebuah elemen tingkat blog yang melakukan transfer semua elemen setelahnya ke baris yang baru pada laman html website. Pada HTML5, tag HR mendefinisikan perubahan tematik antara elemen tingkat paragraf pada halaman html. Namun, pada versi html sebelumnya, tag HR digunakan untuk menggambar garis horizontal pada halaman yang secara visual memisahkan konten setelahnya.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -