Paragraf HTML

Dalam tutorial ini akan belajar cara membuat paragraf dalam HTML.

Membuat Paragraf

Elemen paragraf digunakan untuk mempublikasikan teks pada halaman web.

Paragraf didefinisikan dengan tag <p>. Tag paragraf adalah tag yang sangat mendasar dan biasanya tag pertama yang diperlukan untuk mempublikasikan teks di halaman web. Berikut ini contohnya:

<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lain.</p>

CATATAN

Style sheet bawaan browser secara otomatis membuat beberapa ruang di atas dan di bawah konten paragraf (disebut margin), tetapi Anda dapat menimpanya menggunakan CSS.

Menutup Elemen Paragraf

Di HTML 4 dan versi sebelumnya, cukup untuk memulai paragraf baru menggunakan tag pembuka. Sebagian besar browser akan menampilkan HTML dengan benar bahkan jika lupa tag akhir. Sebagai contoh:

<p>Ini adalah sebuah paragraf.
<p>Ini adalah paragraf lain.

Kode HTML pada contoh di atas akan berfungsi di sebagian besar browser web, tetapi jangan bergantung padanya. Melupakan tag akhir dapat menghasilkan hasil atau kesalahan yang tidak terduga.

CATATAN

Untuk tujuan kompatibilitas ke depan dan praktik pengkodean yang baik, disarankan untuk menggunakan tag pembuka dan penutup untuk paragraf.

Membuat Line Breaks

Tag <br /> digunakan untuk menyisipkan jeda baris pada halaman web.

Karena <br /> adalah elemen kosong, maka tidak perlu tag </br> yang sesuai.

<p>Ini adalah paragraf <br> dengan jeda baris.</p>
<p>Ini adalah <br>paragraf lain <br> dengan jeda baris.</p>

CATATAN

Jangan gunakan paragraf kosong yaitu <p></p> untuk menambahkan ruang ekstra di halaman web Anda. Browser mungkin mengabaikan paragraf kosong karena ini adalah tag logis. Gunakan properti margin CSS sebagai gantinya untuk menyesuaikan ruang di sekitar elemen.

Membuat Aturan Horizontal

Anda dapat menggunakan tag <hr /> untuk membuat aturan atau garis horizontal untuk memisahkan bagian konten secara visual di halaman web. Seperti <br />, tag <hr /> juga merupakan elemen kosong. Berikut ini contohnya:

<p>Ini adalah sebuah paragraf.</p>
<hr />
<p>Ini adalah paragraf lain.</p>

Mengelola Ruang Putih

Biasanya browser akan menampilkan beberapa spasi yang dibuat di dalam kode HTML dengan menekan tombol spasi atau tombol tab pada keyboard sebagai satu spasi. Beberapa jeda baris yang dibuat di dalam kode HTML dengan menekan tombol enter juga ditampilkan sebagai satu spasi.

Paragraf berikut akan ditampilkan dalam satu baris tanpa spasi tambahan:

<p>Paragraf ini berisi banyak spasi dalam kode sumber.</p>
<p>Paragraf ini berisi banyak tab dan jeda baris dalam kode sumber.</p>

Sisipkan   untuk membuat spasi ekstra berurutan, saat menyisipkan tag <br /> untuk membuat jeda baris di halaman web Anda, seperti yang ditunjukkan dalam contoh berikut:

<p>Paragraf ini memiliki banyak&nbsp;&nbsp;&nbsp;spasi.</p>
<p>Paragraf ini memiliki beberapa<br /><br />baris<br /><br /><br />jeda.</p>

Mendefinisikan Teks yang Diformat sebelumnya

Terkadang, menggunakan  , <br />, dll. untuk mengelola ruang sangat tidak nyaman. Atau, Anda dapat menggunakan tag <pre> untuk menampilkan spasi, tab, jeda baris, dll. persis seperti yang tertulis di file HTML. Ini sangat membantu dalam menyajikan teks di mana spasi dan jeda baris penting seperti puisi atau kode.

Contoh berikut akan menampilkan teks di browser seperti pada kode sumber:

<pre>
    Berkelap-kelip, berkelap-kelip, bintang kecil,
    Betapa aku bertanya-tanya apa kamu!
    Di atas dunia begitu tinggi,
    Seperti sebuah berlian di langit.
</pre>

TIP

Teks dalam elemen <pre> biasanya dirender oleh browser dalam font monospace atau lebar tetap, seperti Courier, tetapi Anda dapat menimpanya menggunakan properti font CSS.