HTML – Paragraf – Tutorial Sigit

Paragraph (paragraf) di HTML adalah elemen yang digunakan untuk menampilkan teks dalam bentuk paragraf. Dalam HTML, paragraf dibuat menggunakan tag:

<p>... isi paragraf ...</p>

📌 Fungsi Paragraf dalam HTML

Membagi teks menjadi bagian-bagian terstruktur
Agar konten mudah dibaca dan tidak menumpuk dalam satu blok.
Memberikan jarak otomatis antar paragraf
Browser memberikan spasi di atas dan bawah <p> secara default.
Membantu search engine memahami konten
Struktur paragraf yang rapi meningkatkan SEO.

📌 Contoh Paragraf Sederhana

<p>Ini adalah paragraf pertama dalam halaman web.</p>
<p>Ini adalah paragraf kedua yang menjelaskan informasi tambahan.</p>

Browser akan otomatis membuat spasi di antara dua paragraf tersebut.

📌 Paragraf dengan Format Teks

Di dalam tag <p>, kamu bisa menggunakan tag HTML lain:

<p>
    Ini adalah paragraf yang mengandung <b>teks tebal</b>, 
    <i>teks miring</i>, dan <u>teks bergaris bawah</u>.
</p>

📌 Paragraf Panjang

Jika isi teks sangat panjang, sebaiknya tetap dibungkus dengan <p> agar rapi:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Integer mollis, nunc non consequat rutrum, sapien arcu dictum sem, 
    at laoreet orci quam vel enim.
</p>

📌 Catatan Penting

Tidak boleh menyimpan elemen blok besar di dalam <p>, seperti:
- <div>
- <h1>
- <section>
Karena <p> hanya boleh berisi teks dan elemen inline (seperti <a>, <b>, <span>).

📌 Paragraf Kosong

Untuk membuat jarak kosong, jangan pakai <p></p>, tapi gunakan CSS:

Salah:

<p></p>

Benar:

.margin-space {
    margin-top: 20px;
}

Berikut contoh halaman HTML lengkap berisi heading, paragraf, dan gambar—simpel dan mudah dipahami:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Heading, Paragraf, dan Gambar</title>
</head>
<body>

    <h1>Belajar HTML Dasar</h1>
    <p>
        HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. 
        Dengan HTML, kita dapat menambahkan teks, gambar, tabel, link, dan elemen lainnya.
    </p>

    <h2>Apa itu Heading?</h2>
    <p>
        Heading adalah judul atau subjudul dalam halaman web. HTML menyediakan 
        enam level heading, mulai dari <code>&lt;h1&gt;</code> (paling penting) sampai 
        <code>&lt;h6&gt;</code> (paling kecil).
    </p>

    <h2>Menambahkan Paragraf</h2>
    <p>
        Paragraf ditulis menggunakan tag <code>&lt;p&gt;</code>. Elemen ini biasanya digunakan 
        untuk menuliskan teks dalam jumlah banyak agar lebih rapi dan mudah dibaca.
    </p>

    <h2>Contoh Menampilkan Gambar</h2>
    <p>
        Gambar dapat ditampilkan menggunakan tag <code>&lt;img&gt;</code>. 
        Berikut contoh gambar dengan atribut <code>src</code> dan <code>alt</code>:
    </p>

    <img src="https://via.placeholder.com/400x200" alt="Contoh Gambar" width="400">

    <p>
        Atribut <code>alt</code> digunakan sebagai teks alternatif jika gambar tidak bisa dimuat,
        dan juga bermanfaat untuk SEO serta aksesibilitas.
    </p>

</body>
</html>

Tutorial Sigit

HTML – Paragraf