Tanda <p> HTML

Definisi dan penggunaan

<p> tandai paragraf.

Peramban akan otomatis di setiap <p> Tambahkan sebuah baris kosong sebelum dan setelah elemen.

Petunjuk:Gunakan CSS Tata gaya paragraf.

Lihat pula:

Panduan HTML:Paragraf HTML

Panduan Referensi HTML DOM:Objek Paragraph

Contoh

Contoh 1

Tandai paragraf seperti ini:

<p>Ini adalah beberapa teks di dalam paragraf.</p>

Coba Sendiri

Contoh 2

Menata rata teks di dalam paragraf (menggunakan CSS):

<p style="text-align:right">Ini adalah beberapa teks di dalam paragraf.</p>

Coba Sendiri

Contoh 3

Menggunakan CSS untuk menata gaya paragraf:

<html>
<head>
<style>
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}
</style>
</head>
<body>
<p>China, secara resmi disebut Republik Rakyat Cina (RRC), adalah negara di Asia Timur. Ini adalah negara yang ke-2 terpadat di dunia, dengan populasi melebihi 1,4 miliar. Cina melintasi sejumlah lima zona waktu dan berbatasan dengan tujuh belas negara darat. Dengan luas sekitar 9,6 juta kilometer persegi (3,700,000 mil persegi), ini adalah negara ke-3 terbesar dalam luas tanah keseluruhan. Negara ini dibagi menjadi 22 propinsi, lima wilayah otonom, empat kota administrasi, dan dua wilayah administrasi khusus yang semi-otonom. Beijing adalah ibu kota nasional, sementara Shanghai adalah kota yang paling padat penduduk dan pusat keuangan terbesar.</p>
</body>
</html>

Coba Sendiri

Contoh 4

Paragraf lainnya:

<p>
di kode asli.
Paragraf ini
berisi banyak baris.
Namun peramban
Abaikannya.
</p>

Coba Sendiri

Contoh 5

Masalah puisi di HTML:

<p>
　　Pergi di pagi dari White Emperor di antara awan warna.
　　Jiwa berpindah dari Jiangling ke rumah dalam sehari.
　　Suara monyet di pinggiran sungai tak berhenti.
　　Jalan ke laut telah melintasi ribuan bukit.
</p>

Coba Sendiri

Properti Global

<p> Tanda masih mendukung Properti Global di HTML.

Properti Acara

<p> Tanda masih mendukung Properti Acara di HTML.

Pengaturan CSS Default

Sebagian besar peramban akan menampilkan nilai default berikut: <p> Elemen:

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

Coba Sendiri

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan