Belajar HTML Dasar Part 7: Cara Membuat Paragraf di HTML (tag p)

Pada tutorial Belajar HTML kali ini kita akan membahas tentang tag paragraf, bagaimana penulisan tag paragraf dan bagaimana cara membuat paragraf di HTML.


Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML yang dibuat pada tutorial sebelum ini, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:

Contoh penggunaan tag paragraf:

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

Save sebagai paragraf.html, lalu jalankan di web browser.

Cara Membuat Paragraf di HTML

Kita akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Dalam HTML, spasi akan diabaikan, termasuk jika kita merubahnya menjadi :

Contoh penggunaan tag paragraf 2:

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

Kita harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf.


Tag Paragraf (<p>)

HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.

Contoh penggunaan tag paragraf 3:

<!DOCTYPE html>
<html>
<head>
  <title>title dari websiteku</title>
</head>
<body>
  <p>ini adalah paragraf pertama</p>
  <p>ini adalah paragraf kedua</p>
</body>
</html>

Cara Membuat Paragraf di HTML 1

Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.


Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).

Contoh penggunaan tag <br>:

<!DOCTYPE html>
<html>
<head>
  <title>title dari websiteku</title>
</head>
<body>
  ini adalah paragraf pertama
  <br />
  ini adalah paragraf kedua
</body>
</html>

Jika kode HTML diatas dijalankan, maka hasilnya hampir sama dengan menggunakan tag <p>. Namun pemisahan paragraf menggunakan tag <br> bukanlah untuk membuat paragraf. Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain. Jika yang kita butuhkan adalah struktur paragraf, maka gunakan tag <p>.

Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.

Tag untuk penebalan dan garis miring (<em> dan <strong>)

Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan menebalkan kata, atau dengan garis miring.

Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.

Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.

Contoh penggunaan tag <em> dan <strong>:

<!DOCTYPE html>
<html>
<head>
  <title>title dari websiteku</title>
</head>
<body>
  <p>ini adalah kalimat <em>pertama</em>, 
  sedangkan ini adalah kalimat <strong>kedua</strong></p>
</body>
</html>

Cara penggunaan tag em dan strong

Walaupun tanda spasi tidak akan dianggap dalam HTML, namun untuk membuat kode HTML, menjorokkan (indent) beberapa baris dalam suatu tag akan membuat kode mudah dibaca.

Kita juga akan menemukan bahwa HTML memiliki tag <i> (italic) untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf. Pakar HTML yang mendukung pemisahan konten dengan tampilan tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag ini akan mempengaruhi tampilan dari HTML.

Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5, tag <i> dan <b> kembali dianggap relevan.

Pembahasan lebih jauh tentang cara penulisan dan cara men-format text dalam HTML, akan dibahas secara lebih detail pada tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Text dan Format Text HTML

Setelah memahami cara pembuatan paragraf di dalam HTML, pada tutorial selanjutnya, kita akan mempelajari Cara Membuat Judul di HTML menggunakan tag <h1>.


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

54 Comments

  1. rido
    03 Dec 13
    • Andre
      17 Dec 13
  2. wahyu
    16 May 14
  3. Andre
    17 May 14
  4. mutya
    25 Oct 14
    • Andre
      31 Oct 14
  5. mephizto
    20 Feb 15
  6. Bikai
    22 Mar 15
    • Andre
      23 Mar 15
  7. Bayu
    04 May 15
  8. Anonymous
    03 Aug 15
    • Andre
      03 Aug 15
  9. Rivaldi Rifqi Parry
    21 Aug 15
    • Andre
      22 Aug 15
  10. Farras
    27 Aug 15
    • Andre
      27 Aug 15
  11. Abizard
    07 Jan 16
  12. Ryo
    05 Feb 16
  13. Rizki
    05 Mar 16
  14. alfi
    04 Jun 16
    • Andre
      17 Jun 16
  15. khamim
    08 Jul 16
  16. Kevin Moniaga Suharta
    03 Aug 16
    • Andre
      03 Aug 16
  17. Ari
    24 Aug 16
    • Andre
      24 Aug 16
  18. zul
    19 Oct 16
    • Andre
      19 Oct 16
  19. UpinIpin
    10 Dec 16
  20. Fauzan
    20 Feb 17
  21. Cak Adib
    23 Mar 17
  22. nasrul haq
    26 Mar 17
  23. Widi Utami
    10 Mar 18
    • Andre
      10 Mar 18
  24. Anonymous
    11 Mar 18
    • Andre
      14 Mar 18
  25. Alvin
    04 Apr 18
    • Andre
      05 Apr 18
  26. Faisal Setiadi
    07 Apr 18
    • Andre
      08 Apr 18
  27. Hendry
    19 Aug 18
  28. setting mikrotik
    28 Oct 18
    • Andre
      28 Oct 18
  29. pemula
    18 Feb 20
  30. desa
    11 Jun 20
    • Andre
      11 Jun 20
  31. Nusamandiri
    26 Jun 21

Add Comment

Leave a Reply to rido Cancel reply