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.
Berikut element html yang dianjurkan tidak boleh ada didalam rentang element
<p>...</p> :
<address><article><aside><blockquote><dd><div><dl><dt><fieldset><figcaption><figure><footer><form>><h1 - h6><header><hr><main><nav><ol><p><pre><section><table><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
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
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;
}