{"id":479,"date":"2026-05-02T10:49:56","date_gmt":"2026-05-02T03:49:56","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=479"},"modified":"2026-05-02T10:49:56","modified_gmt":"2026-05-02T03:49:56","slug":"bab-5-materi-paragraf-dalam-html","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-5-materi-paragraf-dalam-html\/","title":{"rendered":"BAB 5 : MATERI PARAGRAF DALAM HTML"},"content":{"rendered":"\n

1. Pengertian Paragraf dalam HTML<\/h2>\n\n\n\n

Paragraf dalam HTML digunakan untuk menampilkan teks atau isi konten<\/strong> dalam sebuah halaman web.<\/p>\n\n\n\n

Tag yang digunakan adalah:<\/p>\n\n\n\n

<p>Ini adalah paragraf<\/p><\/code><\/pre>\n\n\n\n
Tag <p><\/code> merupakan singkatan dari paragraph<\/strong>.<\/p>\n\n\n\n
\n\n\n\n
2. Fungsi Paragraf<\/h2>\n\n\n\n
Paragraf memiliki beberapa fungsi penting:<\/p>\n\n\n\n
    \n
  • Menampilkan isi teks utama<\/li>\n\n\n\n
  • Membuat konten lebih rapi dan mudah dibaca<\/li>\n\n\n\n
  • Memberikan jarak antar blok teks secara otomatis<\/li>\n\n\n\n
  • Membantu struktur konten website<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    3. Cara Kerja Paragraf di HTML<\/h2>\n\n\n\n
    Browser akan secara otomatis:<\/p>\n\n\n\n
      \n
    • Memberikan jarak atas dan bawah<\/strong><\/li>\n\n\n\n
    • Menampilkan teks dalam satu blok<\/li>\n\n\n\n
    • Mengabaikan spasi berlebih<\/li>\n<\/ul>\n\n\n\n
      Contoh:<\/p>\n\n\n\n
      <p>Ini paragraf pertama<\/p>
      <p>Ini paragraf kedua<\/p><\/code><\/pre>\n\n\n\n
      Hasil:<\/p>\n\n\n\n
        \n
      • Paragraf akan terpisah dengan jarak<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        4. Karakteristik Paragraf HTML<\/h2>\n\n\n\n
        4.1 Mengabaikan Spasi Berlebih<\/h3>\n\n\n\n
        HTML tidak peduli jumlah spasi atau enter dalam kode.<\/p>\n\n\n\n
        <p>
        Ini     adalah
        paragraf
        yang     panjang
        <\/p><\/code><\/pre>\n\n\n\n
        Hasil di browser:<\/p>\n\n\n\n
        Ini adalah paragraf yang panjang<\/code><\/pre>\n\n\n\n
        \ud83d\udc49 Semua spasi berlebih akan dirapikan menjadi satu spasi.<\/p>\n\n\n\n
        \n\n\n\n
        4.2 Tidak Otomatis Pindah Baris<\/h3>\n\n\n\n
        Jika ingin pindah baris di dalam paragraf, gunakan:<\/p>\n\n\n\n
        <br><\/code><\/pre>\n\n\n\n
        Contoh:<\/p>\n\n\n\n
        <p>
        Nama: Budi<br>
        Kelas: X RPL<br>
        Sekolah: SMK
        <\/p><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        4.3 Membuat Garis Pemisah<\/h3>\n\n\n\n
        Gunakan:<\/p>\n\n\n\n
        <hr><\/code><\/pre>\n\n\n\n
        Contoh:<\/p>\n\n\n\n
        <p>Paragraf pertama<\/p>
        <hr>
        <p>Paragraf kedua<\/p><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        5. Atribut pada Tag <p><\/code><\/h2>\n\n\n\n
        5.1 Atribut style<\/h3>\n\n\n\n
        Digunakan untuk mengatur tampilan teks.<\/p>\n\n\n\n
        Contoh:<\/p>\n\n\n\n
        <p style=\"color:blue;\">Teks berwarna biru<\/p>
        <p style=\"text-align:center;\">Teks rata tengah<\/p>
        <p style=\"font-size:20px;\">Teks lebih besar<\/p><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        5.2 Atribut align (tidak direkomendasikan lagi)<\/h3>\n\n\n\n
        <p align=\"center\">Teks tengah<\/p><\/code><\/pre>\n\n\n\n
        \u26a0\ufe0f Catatan:<\/p>\n\n\n\n
          \n
        • Atribut ini sudah deprecated<\/strong><\/li>\n\n\n\n
        • Sebaiknya gunakan CSS<\/strong><\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          6. Perbedaan Paragraf dan Heading<\/h2>\n\n\n\n
          Elemen<\/th>Fungsi<\/th><\/tr><\/thead>
          <p><\/code><\/td>Isi teks<\/td><\/tr>
          <h1> - <h6><\/code><\/td>Judul<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          Contoh:<\/p>\n\n\n\n
          <h1>Judul Artikel<\/h1>
          <p>Ini adalah isi artikel.<\/p><\/code><\/pre>\n\n\n\n
          \n\n\n\n
          7. Best Practice Industri<\/h2>\n\n\n\n
          Sebagai web developer profesional, gunakan paragraf dengan benar:<\/p>\n\n\n\n
          \u2714 Gunakan paragraf untuk isi teks<\/h3>\n\n\n\n
          \u2714 Jangan gunakan <br><\/code> berlebihan<\/h3>\n\n\n\n
          \u2714 Gunakan CSS untuk styling<\/h3>\n\n\n\n
          \u2714 Pisahkan konten per ide<\/h3>\n\n\n\n
          Contoh bagus:<\/p>\n\n\n\n
          <p>HTML adalah dasar dari semua website.<\/p>
          <p>Dengan HTML, kita bisa membuat struktur halaman.<\/p><\/code><\/pre>\n\n\n\n
          \n\n\n\n
          8. Kesalahan Umum Siswa<\/h2>\n\n\n\n
          \u274c 1. Tidak menggunakan <p><\/code><\/h3>\n\n\n\n
          Ini teks tanpa paragraf<\/code><\/pre>\n\n\n\n
          \ud83d\udc49 Salah karena tidak terstruktur<\/p>\n\n\n\n
          \n\n\n\n
          \u274c 2. Menggunakan <br><\/code> untuk paragraf<\/h3>\n\n\n\n
          Ini paragraf<br><br>
          Ini paragraf lagi<\/code><\/pre>\n\n\n\n
          \ud83d\udc49 Tidak profesional<\/p>\n\n\n\n
          \n\n\n\n
          \u274c 3. Paragraf terlalu panjang<\/h3>\n\n\n\n
          <p>Paragraf sangat panjang tanpa jeda...<\/p><\/code><\/pre>\n\n\n\n
          \ud83d\udc49 Sulit dibaca<\/p>\n\n\n\n
          \n\n\n\n
          9. Studi Kasus (Dunia Nyata)<\/h2>\n\n\n\n
          Kasus: Artikel Website Sekolah<\/h3>\n\n\n\n
          <h1>Profil Sekolah<\/h1>

          <p>
          SMK Negeri 1 Teknologi adalah sekolah unggulan yang berfokus pada bidang IT.
          <\/p>

          <p>
          Sekolah ini memiliki berbagai jurusan seperti RPL, TKJ, dan Multimedia.
          <\/p><\/code><\/pre>\n\n\n\n
          \ud83d\udc49 Ini adalah contoh penggunaan paragraf yang benar dalam dunia nyata.<\/p>\n\n\n\n
          \n\n\n\n
          10. Contoh Program Lengkap<\/h2>\n\n\n\n
          <!DOCTYPE html>
          <html>
          <head>
              <title>Belajar Paragraf<\/title>
          <\/head>
          <body>

          <h1>Belajar HTML<\/h1>

          <p>HTML adalah bahasa dasar untuk membuat website.<\/p>

          <p>
          Dengan HTML, kita dapat membuat teks, gambar, dan link.
          <\/p>

          <p>
          Nama: Andi<br>
          Kelas: X RPL<br>
          Sekolah: SMK
          <\/p>

          <hr>

          <p style=\"text-align:center;\">
          Terima kasih telah belajar HTML
          <\/p>

          <\/body>
          <\/html><\/code><\/pre>\n\n\n\n
          \n\n\n\n
          11. Latihan Siswa<\/h2>\n\n\n\n
          Latihan 1 (Dasar)<\/h3>\n\n\n\n
          Buat 3 paragraf tentang:<\/p>\n\n\n\n
            \n
          • Diri sendiri<\/li>\n\n\n\n
          • Sekolah<\/li>\n\n\n\n
          • Cita-cita<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            Latihan 2 (Menengah)<\/h3>\n\n\n\n
            Buat halaman HTML berisi:<\/p>\n\n\n\n
              \n
            • 1 Judul<\/li>\n\n\n\n
            • 3 Paragraf<\/li>\n\n\n\n
            • 1 <br><\/code><\/li>\n\n\n\n
            • 1 <hr><\/code><\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n
              Latihan 3 (Lanjutan)<\/h3>\n\n\n\n
              Buat artikel:<\/p>\n\n\n\n
                \n
              • Judul<\/li>\n\n\n\n
              • Minimal 5 paragraf<\/li>\n\n\n\n
              • Gunakan style (warna \/ rata tengah)<\/li>\n<\/ul>\n\n\n\n
                \n\n\n\n
                12. Mini Project<\/h2>\n\n\n\n
                Buat halaman:<\/p>\n\n\n\n
                \u201cProfil Diri Siswa\u201d<\/strong><\/p>\n\n\n\n
                Isi:<\/p>\n\n\n\n
                  \n
                • Judul<\/li>\n\n\n\n
                • Paragraf perkenalan<\/li>\n\n\n\n
                • Paragraf hobi<\/li>\n\n\n\n
                • Paragraf cita-cita<\/li>\n<\/ul>\n\n\n\n
                  \n\n\n\n
                  13. Kesimpulan<\/h2>\n\n\n\n
                  Paragraf adalah elemen penting dalam HTML untuk:<\/p>\n\n\n\n
                    \n
                  • Menampilkan isi teks<\/li>\n\n\n\n
                  • Membuat halaman lebih rapi<\/li>\n\n\n\n
                  • Membantu pembaca memahami konten<\/li>\n<\/ul>\n\n\n\n
                    Tag utama:<\/p>\n\n\n\n
                    <p>...<\/p><\/code><\/pre>\n\n\n\n
                    \n\n\n\n
                    <\/p>\n","protected":false},"excerpt":{"rendered":"
                    1. Pengertian Paragraf dalam HTML Paragraf dalam HTML digunakan untuk menampilkan teks atau isi konten dalam sebuah halaman web. Tag…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-479","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=479"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/479\/revisions"}],"predecessor-version":[{"id":480,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/479\/revisions\/480"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}