- Beranda
- »
- HTML
- »
- Elemen P (Paragraf) Pada HTML
Next Page
Elemen <p> (paragraf) merupakan elemen HTML yang digunakan untuk menandai sekumpulan teks sebagai suatu paragraf. Sebuah paragraf dibuat untuk menyusun dan menata halaman sehingga menjadi lebih terstruktur dengan baik. Elemen paragraf dapat memuat kumpulan elemen lainnya, baik itu berupa elemen div, img (gambar), ol ul (daftar list), table dan lainnya. Di dalam elemen ini juga dapat berisi elemen paragraf lainnya yang menjadi sub dari elemen paragraf utama.
Untuk elemen <p> yang berdiri sendiri (stand alone) tanpa elemen induk yang menaungi elemen ini, elemen ini dibuka dengan <p> dan ditutup dengan </p>. Namun jika elemen ini menginduk pada elemen lainnya seperti div, addres, article, aside, header, footer, h1, h2 maka tag penutup pada elemen <p> bersifat opsional, yang artinya boleh disertakan atau juga tidak disertakan.
Secara teknik penyertaan tag penutup pada elemen <p> adalah hal yang bersifat opsional, namun sebaiknya teknik ini dihindari. Hal ini untuk memastikan bahwa dokumen HTML yang disusun benar-benar valid dan sah sesuai dengan kaidah pengkodean pada halaman HTML.
Berikut ini adalah contoh penggunaan elemen <p> :
12345678910111213141516171819202122232425
26
<!DOCTYPE html><html><head><title>Latihan Menggunakan Elemen tag HTML P (paragraf)</title><style> .judul { color : #EF5B0C; font-weight : bold; }</style></head><body> <h3>Belajar Menggunakan Elemen Tag HTML P</h3> <div class="judul">Contoh paragraf dengan tag penutup :</div> <p>Ini adalah paragraf yang pertama.</p> <p>Ini adalah paragraf yang kedua.</p> <p>Ini adalah paragraf yang ketiga.</p> <div class="judul">Contoh paragraf tanpa tag penutup :</div> <div> <p>Ini adalah paragraf yang pertama. <p>Ini adalah paragraf yang kedua. <p>Ini adalah paragraf yang ketiga. </div> </body> </html>Jika script tersebut dijalan maka hasilnya akan terlihat seperti gambar di bawah ini :
Atribut Align Pada Paragraf :
Atribut align digunakan untuk mengatur perataan teks pada halaman HTML. Nilai atribut align="left", akan menghasilkan paragraf dengan perataan teks di sebelah kiri. Nilai atribut align="right" akan menghasilkan paragraf dengan perataan teks di sebelah kanan. Dan nilai atribut align="center", akan menghasilkan paragraf dengan perataan teks di tengah.
123456789101112131415161718
19
Jika script tersebut dijalan maka hasilnya akan terlihat seperti gambar di bawah ini :
Browser Pendukung :
| Elemen | |||||
| <p> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <p> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <p> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <p> pada HTML :
123456
7
p{ display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;}Sebuah sel di dalam suatu tabel secara default memiliki nilai perataan teks dengan rata kiri. Untuk mengatur perataan teks pada suatu tabel dilakukan dengan memberikan nilai pada atribut align. Seperti halnya elemen division, dan paragraf, tabel juga memiliki atribut align yang digunakan untuk perataan teks. Atribut align digunakan untuk mengatur perataan teks dengan berbagai nilai seperti rata kiri, rata kanan, rata tengah, rata justify (rata kanan kiri).
Jika nilai perataan teks ini ditempatkan pada elemen tabel row <tr>, maka seluruh tabel data <td> yang menginduk pada tabel baris <tr> akan mengikuti nilai yang ditetapkan pada tabel row tersebut. Misalnya <tr align="right">, maka tabel data <td> yang berada di tabel baris <tr> tersebut akan ditetapkan dengan nilai perataan kanan.
Penulisan Syntax:
<td align="left|right|center|justify">
Berikut ini contoh perataan teks pada tabel:
HTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Atribut align pada tabel</title>
5. </head>
6. <body>
7. <h4>Menggunakan atribut align pada tabel</h4>
8. <table border="1">
9. <tr><th>Description</th></tr>
10. <tr>
11. <td align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
12. </tr>
13. <tr>
14. <td align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
15. </tr>
16. <tr>
17. <td align="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
18. </tr>
19. <tr>
20. <td align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
21. </tr>
22. </table>
23. </body>
24. </html>
Nilai atribut valign pada tabel :
| left | Membuat konten dengan nilai perataan kiri |
| center | Membuat konten dengan nilai perataan tengah |
| right | Membuat konten dengan nilai perataan kanan |
| justify | Membuat konten dengan nilai perataan kiri dan kanan |
Atribut align Deprecated Pada HTML5
Atribut align digunakan untuk meratakan konten pada tabel, namun sayangnya atribut ini sudah dianggap deprecated pada HTML5. Sebagai penggantinya silahkan menggunakan cascade style sheet (CSS) untuk mengatur perataan konten secara horisontal pada tabel. Berikut ini contoh pengaturan perataan konten dengan menggunakan CSS :
HTML
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title>Demo Penataan align dengan style CSS</title>
6. <style>
7. .left{text-align: left;}
8. .center{text-align: center;}
9. .right{text-align: right;}
10. .justify{text-align: justify;}
11. </style>
12. </head>
13. <body>
14. <h2>Penataan align dengan style CSS</h2>
15. <table border="1">
16. <tr><th>Description</th></tr>
17. <tr>
18. <td class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
19. </tr>
20. <tr>
21. <td class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
22. </tr>
23. <tr>
24. <td class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
25. </tr>
26. <tr>
27. <td class="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
28. </tr>
29. </table>
30. </body>
31. </html>
32.
Jika dijalankan akan menghasilkan gambar sebagai berikut :