Belajar HTML Archives

Di dunia nyata, setiap tulisan punya struktur: ada judul, paragraf, dan kadang butuh baris baru.
Begitu juga di HTML. Supaya teks kita terbaca rapi di browser, kita perlu tahu heading, paragraf, dan line break.

Yuk kita bahas satu-satu dengan contoh nyata 👇

1. Heading (Judul)

Heading dipakai untuk membuat judul atau subjudul di halaman web.
HTML menyediakan enam level heading:

<h1>Judul Utama (H1)</h1>
<h2>Sub Judul (H2)</h2>
<h3>Sub Judul Tingkat 3 (H3)</h3>
<h4>Sub Judul Tingkat 4 (H4)</h4>
<h5>Sub Judul Tingkat 5 (H5)</h5>
<h6>Sub Judul Tingkat 6 (H6)</h6>

🔑 Tips Penting:

Gunakan <h1> hanya sekali untuk judul utama.
Gunakan <h2>–<h6> untuk sub judul sesuai hierarki.
Heading bukan untuk memperbesar teks semata, tapi untuk struktur dan SEO.

2. Paragraf

Paragraf di HTML dibuat dengan tag <p>.
Contoh:

<p>Ini adalah paragraf pertama.</p>
<p>Ini paragraf kedua. Biasanya untuk memisahkan ide atau penjelasan berbeda.</p>

📌 Browser akan otomatis memberi jarak antar paragraf, jadi tidak perlu menambahkan <br> untuk pindah ke paragraf baru.

3. Line Break (Pindah Baris)

Kadang, kita ingin pindah ke baris baru tanpa memulai paragraf baru.
Gunakan <br>.

Contoh:

<p>
    Halo, ini baris pertama.<br>
    Dan ini baris kedua.
</p>

Hasil di browser:

Halo, ini baris pertama.
Dan ini baris kedua.

4. Latihan Praktis

Coba ketik kode berikut di editor HTML kamu:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Heading, Paragraf, dan Line Break</title>
</head>
<body>
    <h1>Belajar HTML Dasar</h1>
    <h2>Heading</h2>
    <p>Heading digunakan untuk membuat judul dan subjudul.</p>

    <h2>Paragraf</h2>
    <p>Paragraf digunakan untuk menulis teks lebih panjang.</p>
    <p>Browser otomatis memberi jarak antar paragraf.</p>

    <h2>Line Break</h2>
    <p>
        Ini baris pertama.<br>
        Ini baris kedua.<br>
        Dan ini baris ketiga.
    </p>
</body>
</html>

Lalu buka di browser → kamu akan melihat judul besar, paragraf-paragraf rapi, dan contoh line break.

5. Kesimpulan

Heading (<h1>–<h6>) → untuk judul dan subjudul, penting juga untuk SEO.
Paragraf (<p>) → untuk menulis teks yang lebih panjang.
Line Break (<br>) → untuk memindahkan teks ke baris baru tanpa paragraf baru.

Dengan ini, halaman web-mu sudah lebih terstruktur dan enak dibaca 👌.

Kalau di artikel sebelumnya kita sudah kenalan dengan apa itu HTML, sekarang saatnya melangkah ke hal yang paling sering ditemui saat menulis kode HTML: Tag dan Elemen.
Tenang, kita bahas pelan-pelan biar gampang dipahami 👌.

Apa Itu Tag ?

Bayangkan kamu lagi menulis surat.
Kamu pasti butuh pembuka (“Halo…”) dan penutup (“Salam hangat…”).

Nah, HTML juga punya cara komunikasi yang mirip: menggunakan tag.

Tag pembuka → <p>
Tag penutup → </p>

Contoh:

<p>Halo, saya lagi belajar HTML!</p>

Tag ini memberi tahu browser:
“Eh, teks di dalam sini itu paragraf, ya.”

Apa Itu Elemen ?

Kalau tag itu cuma pembuka dan penutupnya, maka elemen adalah keseluruhan “paketnya”.
Mulai dari tag pembuka, isi/konten, sampai tag penutup.

Contoh elemen paragraf:

<p>Ini adalah satu elemen paragraf lengkap.</p>

👉 Jadi elemen = tag pembuka + isi + tag penutup

Tag Tanpa Penutup (Self-Closing Tag)

Tidak semua tag butuh penutup, lho.
Ada beberapa yang cukup self-closing, alias menutup dirinya sendiri.

Contoh paling terkenal:

<br>
<img src="gambar.png" alt="Deskripsi gambar">

<br> → buat baris baru (enter).
<img> → untuk menampilkan gambar.

Ilustrasi Singkat

Bayangkan kamu punya kotak:

Tag pembuka = tutup kotak bagian atas
Isi = barang yang ada di dalam kotak
Tag penutup = tutup kotak bagian bawah

Kalau salah satu tutupnya hilang? Barang bisa berantakan, dan browser juga bisa bingung membaca kode kita.

Yuk, Latihan Kecil 🚀