Sebuah paragraf selalu dimulai pada baris baru, dan biasanya berupa blok teks. Pengunaan paragraf biasanya untuk menampilkan teks atau artikel pada sebuah halaman web untuk itu kita perlu mempelajari bagaimana cara membuat sebuah paragraf pada HTML.
Section Artikel
Paragraf HTML
Pada kode HTML elemen <p> ditutup dengan </p> mendefinisikan sebuah paragraf pada HTML.
Paragraf akan selalu dimulai dengan baris baru, dan browser akan secara otomatis menambahkan beberapa spasi (margin) sebelum dan sesudah paragraf apabila kita menggunakan elemen <p> pada HTML.
Contoh penulisan paragraf pada HTML:
<!DOCTYPE html> <html> <body> <p>Ini sebuah paragraf.</p> <p>Ini sebuah paragraf.</p> <p>Ini sebuah paragraf.</p> </body> </html>
Tampilan HTML
Kita tidak dapat memastikan bagaimana hasil tampilan sebuah teks atau paragraf yang ditampilkan oleh HTML.
Apakah ukuran layar yang ditampilkan besar atau kecil, dan mengubah ukuran jendela pada windows juga akan menghasilkan tampilan berbeda.
Pada HTML, mengubah tampilan teks tidak dapat dilakukan hanya dengan menambahkan spasi atau baris ekstra dalam kode HTML tetapi harus menggunakan elemen yang ada pada HTML.
Dengan menambahkan spasi atau baris browser secara otomatis akan menghapus spasi dan garis yang ditambahkan saat halaman ditampilkan, contoh:
<!DOCTYPE html> <html> <body> <p> Paragraf ini berisi banyak baris pada source code nya, tetapi browser akan mengabaikannya. </p> <p> Paragraf ini berisi banyak spasi pada source code nya, tetapi browser akan mengabaikannya. </p> <p> Jumlah baris dalam paragraf bergantung pada ukuran jendela browser. Jika Anda mengubah ukuran jendela browser, maka jumlah baris di paragraf ini juga akan berubah. </p> </body> </html>
Aturan Horisontal HTML
Elemen <hr> mendefinisikan jeda tematik atau memisahkan konten atau paragraf satu dengan lainnya berdasarkan pengelompokkan tema atau topik masing-masing di halaman HTML, dan paling sering ditampilkan sebagai aturan horizontal.
Elemen <hr> digunakan untuk memisahkan konten (menentukan perubahan) di halaman HTML.
Contoh:
<!DOCTYPE html> <html> <body> <h1>Ini heading 1</h1> <p>Ini beberapa teks.</p> <hr> <h2>Ini Heading 2</h2> <p>Ini beberapa teks yang lain.</p> <hr> <h2>Ini Heading 2</h2> <p>Ini beberapa teks yang lain.</p> </body> </html>
Tag HTML <hr> adalah tag kosong, artinya tidak memiliki tag akhir.
Jeda Baris (Line Breaks) HTML
Elemen HTML <br> mendefinisikan jeda baris atau pergantian baris baru.
Elemen <br> dapat digunakan jika Anda ingin membuat jeda baris (baris baru) tanpa memulai paragraf baru (masih dalam paragraf yang sama):
<!DOCTYPE html> <html> <body> <p>Ini <br>sebuah paragraf<br>dengan jeda baris.</p> </body> </html>
Tag <br> adalah tag kosong, artinya tidak memiliki tag akhir.
Masalah Pada Puisi
<html> <body> <p>Pada HTML, spasi and jeda baris akan diabaikan:</p> <p><!DOCTYPE html> Abu rokok ditumpuk-tumpuk Rencananya dijadikan pupuk Usul punya usul lebih baik Dibikin kerupuk Rasanya pasti kriyuk kriyuk Kalo tak paham jangan mangguk mangguk </p> </body> </html>
Solusi – Elemen HTML <pre>
Elemen <pre> HTML mendefinisikan teks yang telah diformat sebelumnya. Dan menampilkan sesuai dengan formatnya.
Teks di dalam elemen ditampilkan dalam font berukuran tetap (biasanya Courier), dan akan mempertahankan spasi dan jeda baris. Sehingga puisi tidak ditampilkan dalam satu baris, karena spasi dan jeda baris di pertahanakan oleh elemen <pre>.
<!DOCTYPE html> <html> <body> <p>Tag pre membuat spasi dan jeda baris ditampilkan:</p> <pre> Abu rokok ditumpuk-tumpuk Rencananya dijadikan pupuk Usul punya usul lebih baik dibikin kerupuk Rasanya pasti kriyuk kriyuk Kalo tak paham jangan mangguk mangguk. </pre> </body> </html>
