tRikSonic

HTML p Tag

Terakhir diperbarui : 25 Mei 2018 - 06.26

Tutorial HTML <p>

HTML p mendefinisikan sebuah paragraf yang membungkus/memblock konten berupa teks. Dalam penulisannya element p tidak bisa tulis bertumpuk, yang artinya didalam elemen p tidak dipebolehkan ada element p lainnya.
background html
Berikut element html yang dianjurkan tidak boleh ada didalam rentang element <p>...</p> :
  1. <address>
  2. <article>
  3. <aside>
  4. <blockquote>
  5. <dd>
  6. <div>
  7. <dl>
  8. <dt>
  9. <fieldset>
  10. <figcaption>
  11. <figure>
  12. <footer>
  13. <form>>
  14. <h1 - h6>
  15. <header>
  16. <hr>
  17. <main>
  18. <nav>
  19. <ol>
  20. <p>
  21. <pre>
  22. <section>
  23. <table>
  24. <ul>

Contoh HTML <p>

<article>
  <h2>Judul artikel</h2>
  <p>paragraf 1</p>
  <p>paragraf 2</p>
</article>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<article>
  <h2>Judul artikel</h2>
  <p>paragraf 1</p>
  <p>paragraf 2</p>
</article>

</body>
</html>

Contoh HTML <p>

<main>
  <h1>Judul Blog</h1>
  <p>Deskripsi blog</p>
  <article>
    <h2>Judul artikel</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet...</p>
    </blockquote>
  </article>
  <footer>
    <p>example.com</p>
  </footer>
</main>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<main>
  <h1>Judul Blog</h1>
  <p>Deskripsi blog</p>
  <article>
    <h2>Judul artikel</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet...</p>
    </blockquote>
  </article>
  <footer>
    <p>example.com</p>
  </footer>
</main>

</body>
</html>

Attribute HTML <p>

align
Menentukan keselarasan atau posisi
Catatan : Dalam penerapan di HTML5 attribute ini sudah tidak valid
Contoh :
<p align="left">paragraf dengan attribute align = left</p>
<p align="right">paragraf dengan attribute align = right</p>
<p align="center">paragraf dengan attribute align = center</p>
<p align="justify">paragraf dengan attribute align = justify</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.text-center {
 text-align : center;
}
</style>
</head>
<body>


<p align="left">paragraf dengan attribute align = left</p>
<p align="right">paragraf dengan attribute align = right</p>
<p align="center">paragraf dengan attribute align = center</p>
<p align="justify">paragraf dengan attribute align = justify</p>

<hr/>

<h2>Tips :</h2>

<p style="text-align:right">
 Untuk html5, gunakan attribut style dengan value text-align<br/>
 atau gunakan nama kelas(className) pada css
</p>

<p class="text-center">
 <em>contoh dengan attribute class</em>
</p>

</body>
</html>

Global Attributes:

Element <p> mencakup Global Attributes HTML.

Event Attributes:

Element <p> mencakup Event Attributes HTML.

Browser Support :

Desktop

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <p>, mempunyai nilai default :
p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.