Halo, selamat datang kembali di seri “Belajar HTML”! Jika Anda baru pertama kali mengikuti, seri ini dirancang khusus untuk pemula yang ingin memahami dasar-dasar pembuatan halaman web. Pada bagian kali ini, kita akan membahas salah satu elemen paling penting dan paling sering digunakan: Paragraf.
Bayangkan Anda sedang membaca buku atau artikel. Teks di dalamnya dipecah menjadi paragraf-paragraf agar lebih mudah dibaca dan dipahami, bukan? Konsep yang sama persis berlaku di HTML.
Apa itu Paragraf di HTML?
Di HTML, paragraf digunakan untuk membungkus blok teks. Elemen yang kita gunakan untuk ini adalah tag <p>. Semua teks yang Anda letakkan di antara tag pembuka <p> dan tag penutup </p> akan dianggap oleh browser sebagai satu paragraf.
Browser secara otomatis akan memberikan sedikit ruang kosong (jarak) di atas dan di bawah setiap paragraf, sehingga konten Anda terlihat rapi dan terstruktur.
Contoh Dasar:
Mari kita lihat kode sederhananya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Paragraf</title>
</head>
<body>
<p>Ini adalah paragraf pertama saya. Belajar HTML sangat menyenangkan dan merupakan fondasi penting untuk menjadi seorang web developer.</p>
<p>Ini adalah paragraf kedua. Anda bisa lihat, setiap tag <p> akan membuat blok teks baru yang terpisah dari yang lain.</p>
</body>
</html>
Jika Anda simpan kode di atas sebagai file .html dan membukanya di browser, Anda akan melihat dua blok teks yang dipisahkan oleh spasi vertikal. Mudah, kan?
Hal Penting yang Perlu Diketahui Pemula
Ada satu kebiasaan browser yang sering membuat bingung para pemula. Perhatikan ini baik-baik:
Browser akan mengabaikan spasi berlebih dan Enter (baris baru) yang Anda ketik di editor kode.
Lihat contoh ini:
<p>
Walaupun saya menulis teks ini
dengan banyak sekali spasi
dan menekan Enter berkali-kali,
browser akan tetap menampilkannya sebagai
satu paragraf yang rapi dan bersambung.
</p>
Meskipun di editor kode terlihat berantakan, hasilnya di browser akan tetap menjadi satu paragraf yang normal, tanpa ada baris baru atau spasi ganda.
Bagaimana Jika Saya Butuh Baris Baru? Gunakan <br>
Terkadang, kita memang butuh untuk pindah ke baris baru tanpa harus membuat paragraf baru. Contohnya saat menulis alamat atau bait puisi. Untuk kasus ini, HTML menyediakan tag <br> (singkatan dari line break).
Tag <br> adalah tag spesial karena tidak memiliki tag penutup. Anda cukup menaruhnya di tempat Anda ingin memotong baris.
Contoh Penggunaan <br>:
<p>
Alamat Kantor:<br>
Jalan Teknologi No. 123<br>
Kota Malang, Jawa Timur<br>
Indonesia
</p>
Membuat Garis Pemisah dengan <hr>
Ingin membuat garis pemisah horizontal untuk membagi konten secara visual? Gunakan tag <hr> (horizontal rule). Sama seperti <br>, tag ini juga tidak memerlukan penutup.
<h3>Bagian 1: Pengenalan</h3>
<p>Ini adalah konten untuk bagian pertama.</p>
<hr>
<h3>Bagian 2: Isi</h3>
<p>Ini adalah konten untuk bagian kedua.</p>
Menampilkan Teks Apa Adanya dengan <pre>
Bagaimana jika Anda ingin browser menampilkan teks persis seperti yang Anda ketik di editor, lengkap dengan semua spasi dan baris barunya? Ini sering dibutuhkan untuk menampilkan contoh kode pemrograman. Jawabannya adalah tag <pre> (preformatted text).
<pre>
function sapa() {
let pesan = "Halo Dunia!";
console.log(pesan);
}
</pre>
Penting: Mengatur Perataan Teks (Cara Lama vs. Cara Modern)
Dulu, orang sering menggunakan atribut align di dalam tag <p> untuk mengatur perataan teks, seperti ini: <p align="center">.
PENTING: Cara ini sudah usang dan tidak direkomendasikan lagi. Praktik pengembangan web modern mengajarkan kita untuk memisahkan struktur (HTML) dari tampilan (CSS).
Cara yang benar dan modern untuk mengatur perataan adalah menggunakan CSS (Cascading Style Sheets). Meskipun kita akan membahas CSS lebih dalam di seri lain, tidak ada salahnya untuk tahu konsepnya dari sekarang.
- Struktur (HTML):
<p>Teks ini mau saya buat di tengah.</p> - Tampilan (CSS):
p { text-align: center; }
Fokus kita saat ini adalah belajar HTML, jadi cukup pahami bahwa untuk semua hal yang berkaitan dengan gaya (warna, ukuran, perataan), solusinya ada di CSS.
Kesimpulan & Praktik Terbaik untuk Pemula
Mari kita rangkum apa yang telah kita pelajari:
- Gunakan tag
<p>untuk membuat blok teks atau paragraf. - Browser akan mengabaikan spasi dan baris baru berlebih di dalam kode Anda.
- Gunakan
<br>jika Anda butuh membuat baris baru di dalam satu paragraf. - Gunakan
<hr>untuk membuat garis pemisah visual. - Jangan gunakan atribut
align. Styling seperti perataan teks sebaiknya dilakukan menggunakan CSS.
Menguasai paragraf adalah langkah besar dalam perjalanan Anda belajar HTML. Teruslah berlatih dan sampai jumpa di artikel berikutnya!
