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

Void Elements dalam HTML

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 <br> 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 <p> dan </p>, void elements hanya menggunakan satu tag saja.

Contoh void elements:

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

Cara Menggunakan <hr> dan <br>

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 (<br>)

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

  1. Gunakan <br> 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 <p> untuk membuat paragraf baru.
  1. Tambahkan Garis Pemisah dengan <hr>
  • Gunakan tag ini untuk membuat pembatas visual antara dua bagian konten.
  1. Format Tag dengan Baik
  • Void elements seperti <hr> dan <br> 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 <br> 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! 

Komentar

Postingan Populer

Gambar

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Halo teman-teman! Kali ini, kita akan belajar bagaimana membuat website multi-halaman . Kalau sebelumnya kita hanya membuat satu halaman HTML saja, sekarang kita akan menambahkan halaman lain, seperti halaman "About" dan "Contact". Yuk, kita mulai! Apa Itu Website Multi-Halaman? Website multi-halaman adalah situs yang memiliki lebih dari satu file HTML. Contohnya: Halaman utama: index.html Halaman tentang: about.html Halaman kontak: contact.html Semua file ini disimpan dalam satu Project folder . Folder ini juga bisa berisi gambar, file CSS, atau file lainnya yang mendukung website. Cara Menautkan Halaman dengan Anchor Tag Untuk berpindah antar halaman, kita menggunakan anchor tag ( <a> ). Contoh: <a href="./about.html">Tentang Kami</a> Kode di atas akan membuat link yang mengarahkan pengguna ke file about.html . Catatan: ./ : Artinya file ada di folder yang sama dengan index.html . Kalau file ada di folder lain, gunak...

Halo, Teman-Teman! Kali ini kita akan belajar tentang 3 cara menambahkan CSS ke HTML . CSS adalah cara terbaik untuk membuat website tampak menarik dengan warna, tata letak, dan font yang keren. Yuk, kita bahas cara menambahkannya ke dalam HTML! Apa Itu CSS? CSS adalah singkatan dari Cascading Style Sheets , yang digunakan untuk mengatur tampilan website seperti warna, tata letak, dan animasi. Dengan CSS, kita bisa memisahkan desain dari konten HTML, sehingga kode menjadi lebih rapi dan mudah dikelola. Ada 3 cara utama untuk menambahkan CSS ke HTML: Inline CSS Internal CSS External CSS Setiap cara memiliki kegunaan yang berbeda. Berikut adalah penjelasan lengkapnya. 1. Inline CSS Apa itu Inline CSS? Inline CSS berarti menambahkan gaya langsung di elemen HTML menggunakan atribut style . Ini cocok untuk perubahan cepat pada satu elemen saja. Contoh: <h1 style="color: blue;">Halo, teman-teman!</h1> Kelebihan: Mudah digunakan untuk mengubah eleme...