HTML p tag | belajar <p> (Paragraph) element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML p tag. Tutorial dan panduan mengenai element <p>...</p> yang menunjukkan sebuah paragraf. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <p>.

Deskripsi
Penjelasan HTML p (paragraph)

HTML <p> element menunjukkan sebuah Paragraph, atau paragraf sebuah teks.

<p> element sebaiknya tidak boleh digunakan apabila ada element lain yang lebih cocok untuk digunakan, contohnya menggunakan <address> element, lebih tepat dibandingkan dengan <p> element dalam sebuah informasi kontak penulis artikel (author).

<ol> dan <ul> (list element) tidak boleh ditulis di dalam <p> element.

TIPS

Tag akhir: </p> tidak harus ditulis jika <p> element didahului secara langsung oleh <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul> element, atau apabila tidak ada konten lain pada induk element dan induk element tersebut merupakan HTML element selain <a>, <audio>, <del>, <ins>, <map>, <noscript>, atau <video> element.

Contoh <p> element yang ditulis tag akhirnya (</p>).

HTML 
<article>
  <h1>Kalimat Bijak</h1>
  <p>Tangan diatas lebih baik daripada tangan dibawah.</p>
</article>

Contoh <p> element yang tidak ditulis tag akhirnya (</p> tidak ada).

HTML 
<article>
  <h1>Kalimat Bijak</h1>
  <p>Tangan diatas lebih baik daripada tangan dibawah.
</article>

Perhatikan perbedaan kedua contoh diatas pada baris ke-3 (tiga), kedua-duanya adalah benar dan valid.

Global Attributes
Atribut Secara Global (Keseluruhan)

<p> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<p> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Attribute yang sudah tidak didukung oleh HTML5, tidak dibahas disini.

Example
Contoh HTML <p> (paragraf)

Contoh 1

Contoh <p> element sederhana.

HTML 
<p>
Paragraf pendek atau panjang dapat ditulis disini.
</p>
Contoh 2

Contoh <p> di dalam <article> element.

HTML 
<article>
  <h1>Judul Artikel</h1>
  <p>Paragraf Satu disini.</p>
  <p>Paragraf Dua disini.</p>
  <footer>
    <p>Ditulis: 20 September 2015</p>
    <address>Penulis: dul@example.com</address>
  </footer>
</article>

Perhatikan juga pada baris ke-7 (tujuh), apabila <address> diganti dengan <p> element, maka dalam hal ini tidak tepat penggunaannya.

Contoh 3

Contoh <p> dan <ul> yang ditulis secara terpisah. Jika <ul> ditulis di dalam <p> element, maka tidak valid (tidak benar).

HTML 
<p>Kamu akan belajar</p>
<ul>
  <li>HTML
  <li>CSS
  <li>JavaScript,
</ul>
<p>yang akan dibahas secara bertahap.</p>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML p tag</title>
    <style>

    </style>
  </head>
  <body>
    <h3>Contoh 1</h3>
    <p>
     Paragraf pendek atau panjang dapat ditulis disini.
    </p>

    <hr />
    <h3>Contoh 2</h3>
    <article>
     <h1>Judul Artikel</h1>
     <p>Paragraf Satu disini.</p>
     <p>Paragraf Dua disini.</p>
     <footer>
      <p>Ditulis: 20 September 2015</p>
      <address>Penulis: dul@example.com</address>
     </footer>
    </article>

    <hr />
    <h3>Contoh 3</h3>
    <p>Kamu akan belajar</p>
    <ul>
     <li>HTML
     <li>CSS
     <li>JavaScript,
    </ul>
    <p>yang akan dibahas secara bertahap.</p>

  </body>
</html>
SHARE
Previous Article Next Article