Aturan Penulisan Paragraf HTML
Elemen HTML <p> mendefinisikan sebuah paragraf:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Catatan: Browser secara otomatis menambahkan beberapa spasi putih (margin) sebelum dan sesudah paragraf.
Tampilan HTML
Anda tidak bisa memastikan bagaimana HTML akan ditampilkan.
Layar besar atau kecil, dan jendela ukuran akan menciptakan hasil yang berbeda.
Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi tambahan atau baris tambahan dalam kode HTML Anda.
Browser akan menghapus spasi tambahan dan garis tambahan saat halaman ditampilkan:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Jangan Lupakan Tag Akhir
Sebagian besar browser akan menampilkan HTML dengan benar meskipun Anda lupa tag akhir:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
<p>Don't forget to close your HTML tags!</p>
</body>
</html>
Contoh di atas akan bekerja di sebagian besar browser, tapi jangan mengandalkannya.
Catatan: Mengabaikan tag akhir dapat menghasilkan hasil atau kesalahan yang tidak diharapkan.
HTML Line Breaks
Elemen HTML <br> mendefinisikan jeda baris.
Gunakan <br> jika Anda menginginkan jeda baris (baris baru) tanpa memulai paragraf baru:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
Tag <br> adalah tag kosong, yang berarti tag tersebut tidak memiliki tag akhir.
Masalah Puisi
Puisi ini akan ditampilkan dalam satu baris:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
Caranya dengan menggunakan Elemen HTML <pre>
Elemen HTML <pre> mendefinisikan teks terformat.
Teks di dalam elemen <pre> ditampilkan dalam font dengan lebar tetap (biasanya Kurir), dan menyimpan kedua spasi dan jeda baris:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
HTML Tag Reference
| Tag | Description |
|---|---|
| <p> | Mendefinisikan sebuah paragraf |
| <br> | Menyisipkan jeda baris tunggal |
| <pre> | Mendefinisikan teks yang telah diformat |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2