Tutorial HTML #4 Paragraf dalam html

Assalamualaikum sobat blogger semua, kali ini gua akan melanjutkan seri tutorial HTML Dasar kita. Setelah sebelumnya kita sudah mengupas tuntas cara membuat Heading, sekarang saatnya kita belajar elemen yang paling sering dipakai untuk menulis konten, yaitu Paragraf di HTML.

Secara fungsi, membuat paragraf di HTML sama saja seperti kita menulis paragraf pada umumnya di buku atau Microsoft Word. Bedanya, di dalam dunia web programming, semua teks paragraf wajib kita bungkus di dalam tag spesifik agar browser tahu bahwa teks tersebut adalah sebuah satu kesatuan paragraf.

Di HTML, kita menggunakan tag  (singkatan dari Paragraph) untuk membuatnya. Yuk, kita langsung praktekkan biar ngga bingung!

Cara Membuat Paragraf di HTML

Silakan ikuti langkah-langkah mudah di bawah ini buat langsung nyobain di laptop lu:

Buka code editor andalan kalian (di sini gua pakai Visual Studio Code).
Buat folder baru dengan nama latihan-html di komputer kalian sebagai tempat menyimpan file.
Buka folder tersebut di dalam VS Code.
Buat file baru bernama index.html di dalam folder tersebut.
Ketikkan struktur dasar HTML beserta judul dokumennya seperti kode di bawah ini:

Struktur Dasar Dokumen:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Paragraf HTML</title>
</head>
<body>

</body>
</html>

6. Nah, sekarang di dalam tag <body>, silakan tambahkan tag  lalu isi dengan kalimat sesuka kalian untuk membuat paragraf pertama.

Kode Lengkapnya:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Paragraf HTML</title>
</head>
<body>

    <p>Ini adalah paragraf pertama yang gua buat di HTML. Teks di dalam sini akan otomatis diatur oleh browser sebagai satu blok paragraf.</p>
    
    <p>Ini adalah paragraf kedua. Perhatikan bahwa di antara paragraf pertama dan kedua nanti akan ada jarak spasi vertikal otomatis.</p>

</body>
</html>

7. Simpan file tersebut (Ctrl + S), lalu buka file index.html tadi di browser kesayangan lu (Google Chrome / Edge) untuk melihat hasilnya.

Hasil Output di Browser:

Ini adalah paragraf pertama yang gua buat di HTML. Teks di dalam sini akan otomatis diatur oleh browser sebagai satu blok paragraf.

Ini adalah paragraf kedua. Perhatikan bahwa di antara paragraf pertama dan kedua nanti akan ada jarak spasi vertikal otomatis.

💡 Hal Penting yang Wajib Lu Tahu Soal Tag Paragraf

Ada satu sifat unik dari tag  yang sering bikin pusing pemula. Browser HTML itu sifatnya mengabaikan spasi berlebih dan ganti baris (Enter) yang lu ketik secara manual di dalam editor.

Misalnya lu nulis kodingan kayak gini:

<p>
    Ini teks baris satu.
    Ini teks baris dua (Gua enter manual).
</p>

Meskipun di VS Code lu enter ke bawah, pas dibuka di browser kodenya akan tetap tampil menyamping dalam satu baris datar. Kenapa? Karena untuk mengganti baris di dalam paragraf tanpa membuat paragraf baru, lu wajib menggunakan tag bantuan khusus bernama   (Break line).

Kesimpulan

Membuat paragraf di HTML kuncinya cuma bungkus teks lu pakai tag pembuka  dan tutup dengan tag . Setiap lu bikin tag  baru, browser otomatis bakal ngasih jarak (*margin*) atas dan bawah secara rapi, jadi teks tutorial lu gak bakal saling menempel.

Sampai di sini dulu tutorial kali ini. Silakan langsung dipraktekkan di laptop masing-masing ya, bro! Kalau ada langkah yang eror atau bingung, langsung aja corat-coret di Kolom Komentar bawah.

🔥 Langkah Selanjutnya: Belajar Bikin Struktur Data!

Lu udah bisa bikin Judul (Heading) dan isi artikel (Paragraf). Sekarang, gimana caranya menyajikan data dalam bentuk poin-poin atau urutan nomor yang rapi?

Lanjut ke Tutorial #5: Membuat Daftar Di HTML →