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.

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.

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
<!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>



Comments