Estimasi Waktu Baca: 3 menit

Mengenal Paragraf di HTML

Paragraf merupakan kumpulan dari beberapa baris kalimat. Pada penerapannya paragraf sering digunakan untuk membuat artikel.

Atribut Untuk Paragraf

Sama seperti tag heading, tag paragraf tidak memiliki atribut khusus, ia biasanya digandengkan dengan atribut global seperti.

  • class
  • id
  • style
  • text-align
  • dan lain-lain

Membuat Paragraf di HTML

Paragraf di HTML diwakili dengan tag <p>. Saat tag <p> digunakan, ia akan memulai baris baru dan browser secara otomatis akan menambahkan ruang (margin) di sebelum dan sesudah blok paragraf.


<p>Belajar membuat website itu mudah dan menyenangkan</p>

Keluaran:

Kita tidak dapat menentukan bagaimana kode HTML akan ditampilkan, entah itu pada layar besar, kecil, atau pada jendela dengan ukuran tertentu, semuanya akan menampilkan hasil yang berbeda.

Termasuk untuk tag paragraf, kita tidak dapat mengatur tata letak teks hanya dengan menambahkan spasi dan baris ekstra pada kode HTML. Karena ketika kita melakukannya maka browser secara otomatis akan menghapusnya.


<h1>Contoh Paragraf 1</h1>
<p>
Begitu luas lautan
Yang harus diselami
Begitu luas wawasan
Yang harus didalami
</p>

<h1>Contoh Paragraf 2</h1>
<p>
Kucing     mengejar     tikus
Tikus lari             terbirit-birit
Jika          belajar       tak serius
    Menjadi     pintar      pun sulit
</p>

Keluaran:

Untuk mengakali masalah di atas kita dapat menggunakan beberapa tag di bawah ini.

Menggunakan Tag <br>

Tag <br> diperuntukkan untuk membuat baris baru. Ia dapat digunakan baik di luar atau di dalam (elemen) paragraf HTML.


<p>....<br></p>

<p>....</p><br>

Tag <br> adalah salah satu jenis tag tanpa pasangan penutup. Ia bisa ditulis dengan menggunakan tanda slash <br/> atau bisa juga tidak <br>.


<h1>Contoh Paragraf 1</h1>
<p>
Begitu luas lautan <br>
Yang harus diselami <br>
Begitu luas wawasan <br>
Yang harus didalami
</p>
<br>
<h1>Contoh Paragraf 2</h1>
<p>
Kucing mengejar tikus<br/> Tikus lari terbirit-birit<br/> Jika belajar tak serius<br/> Menjadi pintar pun sulit
</p>

Keluaran:

Ketika tag <br> diletakkan di dalam elemen paragraf maka ia akan memisahkan antar teks dalam elemen tersebut. Sedangkan jika diletakkan di luar maka akan memisahkan antar konten.

Menggunakan Tag <hr>

Tag <hr> sejatinya digunakan untuk memisahkan paragraf atau konten satu dengan yang lain menurut pengelompokan topik masing-masing. Sama seperti tag <br>, tag <hr> juga merupakan jenis tag yang berdiri sendiri.


<p>....</p>
<hr>
<p>....</p>

Tag <hr> nantinya akan menghasilkan Horizontal Rule atau garis lurus secara horizontal sebagai pemisah antar konten atau paragraf. Tag <hr> juga dapat ditulis dengan penutup slash <hr/>


<h1>Contoh Paragraf 1</h1>
<p>
Begitu luas lautan <br>
Yang harus diselami <br>
Begitu luas wawasan <br>
Yang harus didalami
</p>
<hr>
<h1>Contoh Paragraf 2</h1>
<p>
Kucing mengejar tikus<br> 
Tikus lari terbirit-birit<br> 
Jika belajar tak serius<br> 
Menjadi pintar pun sulit
</p>
<hr/>

Keluaran:

Sebutan lain dari tag <hr> adalah paragraf-level thematic break.

Menggunakan Tag <pre>

Tag <pre> berfungsi untuk menampilkan blok teks preformat, yang mana blok teks ini nantinya akan mempresentasikan teks yang ditulis apa adanya sesuai dengan format yang tertulis di dalam dokumen HTML.


<pre>....</pre>

Contoh penerapan untuk tag <pre> bisa dilihat di bawah ini:


	<pre>
		Begitu luas lautan
		Yang harus diselami
		Begitu luas wawasan
		Yang harus didalami

		Kucing     mengejar     tikus
		Tikus lari             terbirit-birit
		Jika          belajar       tak serius
		    Menjadi     pintar      pun sulit
	</pre>

Keluaran:

Selain itu font yang akan ditampilkan oleh tag <pre> akan berbeda dengan font yang digunakan untuk paragraf. Karena tag <pre> menggunakan font Monospace atau Courier New (Windows). Makanya tag ini sering digunakan untuk menampilkan potongan source code dari suatu program.

Tag <pre> untuk menulis kode suatu program


<pre>
  a = 1
  b = 2
  c = a+b  
  print("Hasilnya:", c)
</pre>

Keluaran: