Paragraf dan perataannya

Tulis blok teks dengan p dan atur rata kanan-kirinya.

Pahami konsepnya

Tag p membungkus satu paragraf — blok teks yang dipisahkan jarak dari blok sebelum dan sesudahnya secara otomatis. Browser mengabaikan pemenggalan baris manual di dalam teks; satu spasi atau sepuluh, semuanya diratakan menjadi aliran teks tunggal. Memecah paragraf memang pekerjaan tag p, bukan tombol Enter.

Untuk perataan, cara modern adalah properti CSS text-align — bukan atribut align yang dulu dipakai di HTML lama. Nilainya: left (rata kiri), right (rata kanan), center (tengah), dan justify (rata kedua sisi). Menaruhnya di CSS menjaga HTML tetap murni "isi", sementara tampilan dikendalikan terpisah.

Butuh jeda baris di tengah paragraf — misalnya alamat atau baris puisi? Gunakan tag <br>; ia melompat satu baris tanpa memulai paragraf baru. Kombinasi p untuk blok dan br untuk jeda menutup hampir semua kebutuhan teks.

Coba contoh kode

<!doctype html>
<html>
<head>
  <style>
    .tengah { text-align: center; }
    .rata   { text-align: justify; }
  </style>
</head>
<body>
  <p>Paragraf pertama, rata kiri secara bawaan.</p>
  <p class="tengah">Paragraf kedua, berada di tengah.</p>
  <p class="rata">Paragraf ketiga rata kiri dan kanan sekaligus,
  sehingga sisi kanannya terlihat rapi seperti kolom koran.</p>
</body>
</html>

Perataan diatur lewat kelas CSS (text-align) — perhatikan bahwa baris baru dalam teks ketiga tidak memutus paragraf; browser meratakannya sendiri. Bandingkan: tanpa class, paragraf pertama memang condong kiri secara bawaan.

Jeda baris dengan br

<p>
  Jl. Merdeka No. 17<br>
  Bandung, Jawa Barat
</p>

Alamat dua baris ini tetap satu paragraf utuh — br hanya menurunkan baris. Tanpa br, "Bandung..." akan mengalir menyambung di baris yang sama.

Latihan singkat

Tulis tiga paragraf tentang kota asalmu: satu rata kiri, satu tengah, satu justify, lalu tambahkan satu alamat dua baris dengan br.