Setelah di Bagian 3 kamu memahami anatomi HTML dan atribut, sekarang saatnya masuk ke elemen yang paling sering digunakan dalam website, yaitu teks.
Hampir semua website berisi:
-
Judul
-
Subjudul
-
Paragraf
-
Penegasan teks
Semua itu diatur oleh elemen teks HTML.
Heading dalam HTML
Heading digunakan untuk membuat judul dan subjudul dalam halaman web.
HTML menyediakan 6 level heading:
<h1>Judul Utama</h1> <h2>Sub Judul</h2> <h3>Judul Bagian</h3> <h4>Sub Bagian</h4> <h5>Judul Kecil</h5> <h6>Judul Paling Kecil</h6>
📌 <h1> adalah judul terpenting
📌 Semakin besar angka, semakin kecil ukurannya
Aturan Penggunaan Heading
Agar struktur rapi dan SEO baik:
✔ Gunakan 1 buah <h1> per halaman
✔ <h2> untuk sub judul utama
✔ <h3> untuk turunan <h2>
❌ Jangan lompat: <h1> langsung ke <h4>
Paragraf (<p>)
Tag <p> digunakan untuk teks paragraf.
<p>Ini adalah sebuah paragraf dalam HTML.</p>
Ciri-ciri paragraf:
-
Otomatis memiliki jarak atas & bawah
-
Digunakan untuk teks panjang
📌 Jangan gunakan <br> untuk paragraf panjang.
Line Break (<br>)
<br> digunakan untuk pindah baris, bukan paragraf baru.
Teks baris satu<br> Teks baris dua
📌 Gunakan secukupnya.
Elemen Penegasan Teks
HTML menyediakan elemen untuk menegaskan teks:
🔹 Teks Tebal (<strong>)
<strong>Teks penting</strong>
Biasanya bermakna penting, bukan sekadar tebal.
🔹 Teks Miring (<em>)
<em>Teks miring</em>
Digunakan untuk penekanan makna.
🔹 Teks Tebal & Miring (<b> dan <i>)
<b>Teks Tebal</b> <i>Teks Miring</i>
📌 Lebih dianjurkan gunakan <strong> dan <em> untuk SEO & aksesibilitas.
Teks Kecil (<small>)
Digunakan untuk:
-
Catatan
-
Hak cipta
-
Informasi tambahan
<small>Hak cipta 2026</small>
Kutipan (<blockquote>)
Digunakan untuk teks kutipan panjang.
<blockquote> Belajar coding adalah investasi jangka panjang. </blockquote>
Horizontal Line (<hr>)
Membuat garis pemisah konten.
<hr>
Contoh Gabungan Elemen Teks
<h1>Belajar HTML</h1> <p>HTML adalah dasar pembuatan website.</p> <h2>Manfaat HTML</h2> <p><strong>HTML</strong> mudah dipelajari dan cocok untuk pemula.</p> <hr> <small>Ditulis oleh Admin</small>
Kesalahan Umum Pemula
❌ Semua judul pakai <h1>
❌ Paragraf pakai <br> berulang
❌ Salah membedakan <b> dan <strong>
❌ Tidak memperhatikan struktur heading
Ringkasan
✔ Heading untuk judul & struktur
✔ <p> untuk paragraf
✔ <strong> dan <em> untuk penekanan
✔ Elemen teks membantu keterbacaan
✔ Struktur rapi = website profesional
✅ Contoh File HTML Lengkap untuk Pemula
📄 Nama file: index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML Dasar</title>
</head>
<body> <!-- JUDUL UTAMA -->
<h1>Belajar Coding dengan HTML</h1> <!-- PARAGRAF PEMBUKA -->
<p> HTML adalah dasar utama dalam pembuatan website. Dengan HTML, kita dapat menampilkan teks, gambar, dan link pada
halaman web. </p>
<hr>
<!-- SUB JUDUL -->
<h2>Apa Itu HTML?</h2>
<p> <strong>HTML (HyperText Markup Language)</strong> adalah bahasa markup yang digunakan untuk menyusun struktur
halaman website. </p>
<!-- PENEKANAN TEKS -->
<p> HTML <em>bukan</em> bahasa pemrograman, tetapi bahasa markup. </p>
<hr>
<!-- SUB JUDUL -->
<h2>Contoh Elemen HTML</h2>
<!-- PARAGRAF DENGAN ATRIBUT -->
<p id="contoh" class="teks"> Ini adalah contoh paragraf dengan atribut <strong>id</strong> dan
<strong>class</strong>.
</p>
<!-- LINK -->
<p> Kunjungi website favorit: <a href="https://www.google.com">Google</a> </p> <!-- GAMBAR --> <img
src="https://via.placeholder.com/300" alt="Contoh Gambar"> <br><br>
<!-- KUTIPAN -->
<blockquote> Belajar coding adalah investasi jangka panjang. </blockquote>
<hr>
<!-- CATATAN KECIL -->
<small> © 2026 | Belajar HTML untuk Pemula </small>
</body>
</html>
Penutup
Di Bagian 4 ini, kamu sudah mempelajari:
-
Heading HTML
-
Paragraf
-
Elemen teks penting
-
Penegasan & pemisah konten
