Tutorial HTML Dasar Part 6: Cara Membuat Paragraf di HTML

Brian Harris / / HTML, HTML Dasar
cara membuat paragraf di html

Pada tutorial sebelumnya, kita sudah membahas tentang struktur kode HTML. Sekarang, kita akan membahas tentang tag paragraf (tag p) di HTML,  bagaimana cara penulisannya serta bagaimana cara membuat paragraf dengan tag <p> di HTML.


Cara Membuat Paragraf di HTML

Supaya lebih mudah dalam memahami cara pembuatan paragraf didalam HTML, kita akan menggunakan contoh struktur HTML yang sudah dibuat pada tutorial sebelumnya. Disini kita akan menambahkan beberapa text untuk mencoba membuat paragraf di HTML. Silahkan buka text-editor kesayangan anda masing-masing, setelah itu ketikkan kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Title Untuk Websiteku</title>
</head>
<body>
  Ini adalah paragraf pertama
  Ini adalah paragraf kedua
</body>
</html>

Simpan dengan nama paragraf.html setelah itu jalankan pada browser, maka nanti hasilnya akan seperti gambar dibawah ini.

membuat paragraf di html

Kita akan melihat bahwa paragraf tersebut tidak berada pada baris yang berbeda, tapi justru berada pada satu baris yang sama. Pada HTML, spasi akan diabaikan, hal ini sama seperti jika kita mengubah kode menjadi:

<!DOCTYPE html>
<html>
<head>
  <title>Title Untuk Websiteku</title>
</head>
<body>
  Ini adalah paragraf pertama     Ini adalah paragraf kedua
</body>
</html>

Maka dari itu kita harus memberi tahukan kepada browser bahwa kedua kalimat itu harus dipisah, dan masing-masing kalimat itu adalah paragraf.


Tag Paragraf “<p>”

HTML telah menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan tag dengan huruf p. Sekarang, mari kita perbaiki kode yang sebelumnya agar menjadi sebuah kalimat yang berbeda baris.

<!DOCTYPE html>
<html>
<head>
  <title>Title Untuk Websiteku</title>
</head>
<body>
 <p>Ini adalah paragraf pertama</p>
 <p>Ini adalah paragraf kedua</p>
</body>
</html>

Sekarang coba jalankan pada browser, maka nanti hasilnya akan menjadi seperti ini.

membuat paragraf dengan tag p

Maka sekarang kita akan melihat bahwa kedua paragraf tersebut sudah berada pada posisi masing-masing. Setiap tag paragraf, browser akan memberi spasi antar paragraf.


Tag Break “<br>”

Ada cara lain untuk memisahkan paragraf yang tadi kita buat, caranya adalah dengan menggunakan tag <br> (singkatannya adalah break).

<!DOCTYPE html>
<html>
<head>
  <title>Titlte Untuk Websiteku</title>
</head>
<body>
  ini adalah paragraf pertama
  <br/>
  ini adalah paragraf kedua
</body>
</html>

Jika kode HTML diatas dijalankan, maka hasilnya sangat mirip dengan menggunakan tag <p>. Tapi pemisahan paragraf menggunakan tag <br> bukan untuk membuat paragraf. Tag <br> berguna untuk memisahkan bagian text dengan text lainnya. Jika kita sedang membutuhkan struktur paragraf, maka gunakanlah tag <p>.


Kita sudah memahami cara membuat paragraf di dalam kode HTML. Pada tutorial selanjutnya, kita akan membahas tentang Cara Membuat Judul di HTML dengan menggunakan tag <h1><h6>.

Tinggalkan Komentar

Your email address will not be published. Required fields are marked *