Cara mengatur jarak paragraf di html

Question

Setelah belajar tentang apa itu HTML, Tag, Elemen, dan Atribut. Berikutnya, kita akan belajar tentang elemen-elemen dasar pada HTML yang sering digunakan dalam membuat web.

Table of Contents Show

Membuat Paragraf di HTML
Atribut untuk Paragraf
Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>5 untuk Membuat Paragraf
Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>4 untuk Membuat Garis
Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>6
Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>2 vs Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>3
Bonus: Paragraph Style
1. Baris Pertama Masuk ke Dalam
2. Warna untuk Paragraf
Bagaimana cara mengatur jarak antar paragraf?
Bagaimana cara membuat spasi di HTML?
Apa itu Line
Untuk apa line

Mari kita mulai dengan mengenal elemen paragraf.

Membuat Paragraf di HTML

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>

2. Selain tag ini, ada juga tag pendukung lain seperti

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>

3,

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>

4,

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>

5, dan

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> <p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf.</p> <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p> </body> </html>

6.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Hasilnya:

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

7,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

8,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

9, dll.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Hasilnya:

Atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

7 merupakan atribut yang digunakan untuk pertaan teks pada paragraf. Namun, menurut validator W3C.. penggunaan tag ini sebaiknya diganti dengan CSS.

Mengapa demikian?

Karena atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

7 dapat merubah tampilan dari web. Ini sebenarnya tigas dari CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.

Contoh perataan menggunakan CSS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi 
        beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini 
        Sedang, Belajar tentang paragraf.</p>
        <p style="text-align: center">Paragraf adalah kumpulan dari beberapa 
        kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide 
        pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Hasilnya:

Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>5 untuk Membuat Paragraf

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5 sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

2.

Fungsi utama tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5 adalah untuk membuat baris baru.

Contoh:

Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

2.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir
           Orang melihat tertawa kesenangan
           Pengangguran berserakan seperti pasir
           Kurang usaha dan keterampilan</p>
    </body>
</html>

Hasilnya:

Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia akan tetap ditampilkan seperti baris.

Di sinilah saatnya kita harus menggunakan tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5. Maka, kode di atas.. bisa kita perbaiki menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir <br />
           Orang melihat tertawa kesenangan <br />
           Pengangguran berserakan seperti pasir <br />
           Kurang usaha dan keterampilan</p>
    </body>
</html>

Hasilnya:

Oh iya, tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5 adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi 
        beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini 
        Sedang, Belajar tentang paragraf.</p>
        <p style="text-align: center">Paragraf adalah kumpulan dari beberapa 
        kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide 
        pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

9.

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5 boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.

Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>4 untuk Membuat Garis

Sama seperti tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5, tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

4 juga bukanlah tag untuk membuat paragraf.

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

4 merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Hasilnya:

Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>6

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.

Hal ini bisa dilakukan dengan bantuan tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

5. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

6.

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

6 (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Hujan Bulan Juni</h1>
<p>oleh Sapardi Djoko Damono</p>
<pre>
tak ada yang lebih tabah
dari hujan bulan Juni
dirahasiakannya rintik rindunya
kepada pohon berbunga itu

    tak ada yang lebih bijak
    dari hujan bulan Juni
    dihapusnya jejak-jejak kakinya
    yang ragu-ragu di jalan itu

tak ada yang lebih arif
dari hujan bulan Juni
dibiarkannya yang tak terucapkan
diserap akar pohon bunga itu
</pre>
</body>
</html>

Hasilnya:

Coba perhatikan!

Paragraf yang kita buat di dalam kode HTML akan ditampilkan dengan format yang sama seperti yang kita tulis di sana.

Biasanya tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

6 sering digunakan untuk menampilkan source code. Karena, tag ini menggunakan font Monospace atau Courier New (di Windows).

Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>2 vs Tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML #2</title> </head> <body> Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang, Belajar tentang paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung. </body> </html>3

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

2 dan Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

3, memiliki perilaku yang hampir sama. Tapi tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

3 sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

3 sering ‘disalahgunakan’ untuk membuat paragraf.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <div>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</div>
        <div>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</div>
    </body>
</html>

Ini boleh-boleh, saja. Tapi hasilnya tidak akan sama seperti tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

2.

Paragraf yang dibuat dengan tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

3 tidak akan memiliki jarak margin antar paragraf.

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #2</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

3 biasanya digunakan untuk membungkus teks yang ada di luar artikel. Contoh seperti teks pada footer, header, sidebar, dll.

Contoh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
        <hr />
        <footer>
            <div>&copy; 2020 Belajar HTML by Petani Kode</div>
        </footer>
    </body>
</html>

Hasilnya:

Bonus: Paragraph Style

Sebenarnya ini ranah pembahasan tentang CSS bukan HTML. Karena itu, kamu boleh baca dan juga boleh tidak.

Paragraph Style adalah style CSS yang kita berikan kepada paragraf agar tampil lebih menarik.

Berikut ini beberapa style yang bisa diberikan pada paragraf:

1. Baris Pertama Masuk ke Dalam

Baris pertama pada paragraf kadang sering ditulis masuk ke dalam atau ini juga disebut dengan indentasi.

Contoh:

Bagaimanakah cara membuat yang seperti itu di HTML?

Gampang!

Kita bisa memanfaatkan style CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Paragraf Indentasi</h1>
<p style="text-indent: 45px;">Contoh ini baris pertama yang ditulis masuk ke dalam.
Baris kedua tetap ditulis seperti biasa. Dan juga baris
Ke-3 ditulis seperti biasa.</p>
</body>
</html>

Hasilnya:

Atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Rambut berantakan tak pernah di sisir <br />
           Orang melihat tertawa kesenangan <br />
           Pengangguran berserakan seperti pasir <br />
           Kurang usaha dan keterampilan</p>
    </body>
</html>

9 merupakan atribut untuk menambahkan style CSS. Pada contoh di atas kita menambahkan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

0 dengan nilai

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

1, nilai ini akan menentukan jarak (ke dalam) dari baris pertama.

2. Warna untuk Paragraf

Warna bisa kita berikan kepada teks dan background. Properti CSS yang digunakan untuk memberikan warna adalah

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

2 (untuk teks) dan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

3 (untuk background).

Bagaimana cara mengatur jarak antar paragraf?

Buka halaman dokumen yang akan diatur jarak spasinya. Tekan tombol CTRL+A untuk menyeleksi seluruh dokumen. Buka tab Home, kemudian klik ikon 'Line and Paragraph Spacing' yang ada di menu 'Paragraph'. Setelah itu, pilih jarak paragraf yang diinginkan seperti 1, 1.5, 2.0, 2.5, atau 3.0.