Apa itu Tag HR HTML & Bagaimana Cara Menggunakannya?

Yang Perlu Diketahui

  • Cukup ketik <jam> untuk menyisipkan baris dalam HTML dengan tag HR.
  • Edit karakteristik garis dengan mengedit CSS dalam dokumen HTML5.

SDM menandai digunakan dalam dokumen web untuk menampilkan garis horizontal melintasi halaman, kadang-kadang disebut aturan horizontal. Tidak seperti beberapa tag, tag ini tidak memerlukan tag penutup. Ketik <jam> untuk menyisipkan baris.

Apakah Semantik Tag HR?

Dalam HTML4, tag HR tidak semantik. Elemen semantik jelaskan artinya dalam hal browser, dan pengembang dapat dengan mudah memahaminya. Tag HR hanyalah cara untuk menambahkan baris sederhana ke dokumen di mana pun Anda menginginkannya. Menata hanya batas atas atau bawah elemen di mana Anda ingin garis muncul ditempatkan a garis horizontal di bagian atas atau bawah elemen, tetapi secara umum, tag HR lebih mudah digunakan untuk ini tujuan.

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

instagram viewer

Atribut HR dalam HTML4 dan HTML5

Garis membentang lebar penuh halaman. Beberapa atribut default menjelaskan ketebalan, lokasi, dan warna garis, tetapi Anda dapat mengubah pengaturan tersebut jika diinginkan.

Di HTML4, Anda dapat menetapkan atribut sederhana tag HR, termasuk align, width, dan noshade. Perataan dapat diatur ke kiri, pusat, Baik, atau membenarkan. Lebar menyesuaikan lebar garis horizontal dari default 100 persen yang memperpanjang garis melintasi halaman. Itu noshade atribut membuat garis warna solid alih-alih warna yang diarsir.

Atribut ini sudah usang dalam HTML5. Anda sebaiknya menggunakan CSS untuk menata tag HR Anda dalam dokumen HTML5.

Ini adalah contoh HTML5 untuk mengatur gaya garis horizontal menjadi tinggi 10 piksel menggunakan CSS sebaris (gaya dimasukkan langsung ke dalam dokumen bersama dengan HTML):

Tangkapan layar yang menunjukkan cara menyesuaikan gaya tag HR dalam HTML menggunakan CSS sebaris
Menggunakan CSS Sebaris untuk Menyesuaikan Gaya HR.Jennifer Kyrnin

Cara lain untuk menyesuaikan gaya garis horizontal di HTML5 adalah dengan menggunakan file CSS terpisah, dan tautan ke sana dari dokumen HTML. Di file CSS, Anda akan menulis gaya seperti ini:

Tangkapan layar yang menunjukkan cara menggunakan CSS eksternal untuk menyesuaikan gaya tag HR dalam HTML
Menggunakan CSS Eksternal untuk Menyesuaikan Gaya HR.Jennifer Kyrnin
jam {
tinggi: 10px
}

Efek yang sama di HTML4 mengharuskan Anda untuk tambahkan atribut ke konten HTML. Berikut cara mengubah ukuran garis horizontal dengan ukuran atribut:

Cuplikan layar atribut ukuran untuk tag HR dalam HTML
Mengatur gaya Tag HR dalam HTML4.Jennifer Kyrnin

Ada lebih banyak kebebasan dalam menata garis horizontal di CSS versus HTML.

Hanya lebar dan tinggi gaya konsisten di semua browser sehingga beberapa percobaan dan kesalahan mungkin diperlukan saat menggunakan gaya lain. Lebar default selalu 100 persen dari lebar halaman web atau elemen induk. Tinggi default aturan adalah dua piksel.