Belajar Void Elements dalam HTML (Untuk Memisahkan dan Merapikan Konten dengan Tag Sederhana)

Halo teman-teman!

Di pelajaran sebelumnya, kita sudah belajar cara membuat heading dan paragraf di HTML. Kali ini, kita akan membahas void elements seperti <hr> dan   yang digunakan untuk memisahkan dan merapikan konten tanpa perlu menulis tag pembuka dan penutup.

Apa Itu Void Elements?

Void elements adalah elemen HTML yang tidak membutuhkan konten atau tag penutup. Berbeda dengan heading atau paragraf yang memiliki tag pembuka dan penutup seperti  dan , void elements hanya menggunakan satu tag saja.

Contoh void elements:

Horizontal Rule (<hr>): Untuk menambahkan garis horizontal pemisah.
Break ( ): Untuk memindahkan teks ke baris baru tanpa membuat paragraf baru.

Cara Menggunakan `<hr>` dan ` `

1. Horizontal Rule (`<hr>`)

Tag ini digunakan untuk membuat garis pemisah antara dua bagian teks.

Contoh:

<p>Ini paragraf pertama.</p>
<hr>
<p>Ini paragraf kedua.</p>

Hasilnya di browser:

Paragraf pertama dan kedua dipisahkan oleh garis horizontal.

2. Break (` `)

Tag ini digunakan untuk memindahkan teks ke baris baru di dalam paragraf yang sama.

Contoh:

<p>Baris pertama<br>Baris kedua<br>Baris ketiga</p>

Hasilnya di browser:

Teks "Baris pertama", "Baris kedua", dan "Baris ketiga" akan berada di baris terpisah, tapi tetap dalam satu paragraf.

Latihan: Format Alamat dan Puisi

Coba praktikkan void elements dengan contoh ini:

Alamat

<p>Nama: William Blake<br>
Alamat: 123 Poetry Lane<br>
London, Inggris</p>
<hr>
<p>William Blake adalah seorang penyair terkenal dari Inggris.</p>

Puisi

<p>
To see a World in a Grain of Sand<br>
And Heaven in a Wild Flower,<br>
Hold Infinity in the palm of your hand<br>
And Eternity in an hour.
</p>

Ketika dibuka di browser, teks alamat akan terlihat rapi dengan baris baru, dan puisi akan terlihat sesuai formatnya.

Tips Penting Void Elements

Gunakan   Hanya Jika Dibutuhkan

Kapan digunakan: Untuk kasus seperti puisi atau alamat di mana baris baru tidak membutuhkan paragraf baru.
Jangan digunakan: Untuk memisahkan paragraf. Gunakan  untuk membuat paragraf baru.

Tambahkan Garis Pemisah dengan <hr>

Gunakan tag ini untuk membuat pembatas visual antara dua bagian konten.

Format Tag dengan Baik

Void elements seperti <hr> dan   bisa ditulis sebagai <hr> atau <hr />.
Rekomendasi: Gunakan versi <hr /> agar lebih mudah dibaca dan dikenali sebagai void element.

Tantangan: Format Konten dengan Void Elements

Buat file HTML berikut, simpan sebagai index.html, dan buka di browser.

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Void Elements</title>
</head>
<body>
    <h1>William Blake</h1>
    <p>123 Poetry Lane<br>London, Inggris</p>
    <hr>
    <p>William Blake adalah penyair Inggris terkenal yang karya-karyanya menginspirasi banyak orang.</p>
    <p>
        To see a World in a Grain of Sand<br>
        And Heaven in a Wild Flower,<br>
        Hold Infinity in the palm of your hand<br>
        And Eternity in an hour.
    </p>
</body>
</html>

Perhatikan bagaimana void elements membantu merapikan konten dan membuatnya lebih terstruktur.

Kesimpulan
Void elements seperti <hr> dan   sangat berguna untuk memisahkan atau merapikan konten di HTML. Dengan memahami penggunaannya, kalian bisa membuat website yang lebih rapi dan nyaman dilihat.

Selanjutnya, kita akan belajar elemen HTML menarik lainnya. Sampai jumpa!