Menambahkan Garis Horisontal untuk Memisahkan Konten pada Halaman

Cara menggunakan tag HR untuk dokumen web

Tag HR secara tradisional telah digunakan untuk menambahkan garis horizontal (kadang-kadang disebut aturan horizontal) ke dokumen web. Untuk menambahkan baris, Anda mengetik:


untuk menginstruksikan browser untuk menggambar garis melintasi lebar penuh halaman atau elemen induk menggunakan pengaturan default. Baris default ini sederhana dan sering melayani tujuannya, tetapi atribut dapat ditugaskan untuk mengubah ukuran garis, warna, dan posisi di antara karakteristik lainnya. Metode untuk mengubah penampilan garis horizontal berubah antara HTML4 dan HTML5 .

Apakah Semantic Tag HR?

Dalam HTML4, tag HR tidak semantik. Elemen semantik menggambarkan maknanya dalam istilah peramban dan pengembang dapat dengan mudah memahami. Tag HR hanyalah cara untuk menambahkan garis sederhana ke dokumen di mana pun Anda menginginkannya. Hanya styling perbatasan atas atau bawah dari elemen di mana Anda ingin garis muncul menempatkan garis horizontal di bagian atas atau bawah elemen, tetapi secara umum, tag HR lebih mudah digunakan untuk tujuan ini.

Dimulai dengan HTML5, tag HR menjadi semantik, dan sekarang mendefinisikan istirahat tematis paragraf tingkat, yang merupakan istirahat dalam aliran konten yang tidak menjamin halaman baru atau pembatas lain yang lebih kuat — ini adalah perubahan topik . Misalnya, Anda mungkin menemukan tag SDM setelah perubahan adegan dalam sebuah cerita, atau dapat menunjukkan perubahan topik dalam dokumen referensi.

Atribut SDM dalam HTML4 dan HTML5

Dalam HTML4, tag HR dapat diberi atribut sederhana termasuk "align," "width" dan "noshade." Penyelarasan dapat diatur ke kiri, tengah, kanan atau membenarkan. Lebar disesuaikan lebar garis horizontal dari default 100 persen yang memperpanjang garis melintasi halaman. Atribut noshade memberikan garis warna yang solid sebagai pengganti warna yang teduh. Atribut-atribut ini sudah usang dalam HTML5, dan Anda harus menggunakan CSS untuk mengatur style HR tag Anda dalam HTML5. Misalnya, dalam HTML 4:


menghasilkan garis horizontal dengan tinggi 10 piksel.

Menggunakan CSS dengan HTML5, garis horizontal dengan tinggi 10 piksel ditata:


Menggunakan CSS untuk mengatur garis horizontal Anda memberi Anda banyak kebebasan dalam mendesain halaman web Anda. Anda dapat melihat banyak contoh gaya untuk tag SDM dalam Gaya ini artikel Tag HR . Hanya gaya lebar dan tinggi yang konsisten di semua browser, sehingga beberapa trial and error mungkin diperlukan saat menggunakan gaya lain. Lebar default selalu 100 persen dari lebar halaman web atau elemen induk. Tinggi default aturan adalah dua piksel.