Belajar HTML Dasar #3: Heading, Paragraf, dan Line Break

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 👌.

Belajar HTML Dasar #2: Tag dan Elemen HTML

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 🚀

Coba ketik kode berikut di editor HTML kamu:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Tag dan Elemen</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <br>
    <img src="https://via.placeholder.com/150" alt="Contoh Gambar">
</body>
</html>

Lalu buka di browser.
Kamu akan melihat judul besar, sebuah paragraf, baris kosong, dan gambar sederhana.

Kesimpulan

Tag → penanda pembuka & penutup.
Elemen → tag pembuka + isi + tag penutup.
Ada juga self-closing tag yang tidak butuh penutup.

Dengan memahami ini, kamu sudah selangkah lebih dekat jadi jagoan HTML 💪.

Belajar HTML Dasar #1: Pengenalan & Struktur Dasar HTML

Halo teman-teman semuanya, di seri pertama ini kita akan berkenalan dengan HTML, fondasi utama dari semua halaman web. Jika kamu baru mulai belajar web development, maka HTML adalah tempat yang tepat untuk memulai.

Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat struktur halaman web. HTML bukan bahasa pemrograman, melainkan bahasa yang digunakan untuk menandai elemen-elemen dalam dokumen agar bisa ditampilkan di web browser.

Dengan HTML, kita bisa menentukan bagian-bagian penting dalam sebuah halaman seperti heading, paragraf, gambar, link, tabel, form, dan masih banyak lagi.

Kenapa Harus Belajar HTML?

Karena tanpa HTML, tidak ada halaman web. Semua website, dari blog sederhana hingga aplikasi web kompleks, dimulai dari struktur HTML. Beberapa alasan kenapa HTML penting:

Merupakan fondasi utama dari web
Digunakan bersama dengan CSS dan JavaScript
Sangat mudah dipelajari, bahkan untuk pemula
Didukung oleh semua browser

Langkah 1 – Struktur Dasar HTML

Berikut adalah contoh struktur dasar dari sebuah dokumen HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar HTML Dasar</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini adalah paragraf pertama dalam HTML.</p>
</body>
</html>

Mari kita bahas bagian-bagian penting dari kode di atas:

<!DOCTYPE html>: Menandakan bahwa ini adalah dokumen HTML5.
<html>: Elemen root dari seluruh dokumen.
<head>: Bagian ini berisi informasi tentang halaman, seperti title, charset, dan meta tag.
<title>: Judul halaman yang akan muncul di tab browser.
<body>: Di sinilah semua konten halaman yang terlihat akan ditulis, seperti teks, gambar, dan lain-lain.
<h1> dan <p>: Tag heading dan paragraf untuk menampilkan teks di layar.

Langkah 2 – Coba di Browser

Kita bisa langsung menulis kode di atas menggunakan text editor seperti VSCode, lalu simpan file dengan ekstensi .html, misalnya: index.html. Setelah itu, buka file tersebut di browser dan kita akan melihat tulisan “Halo, Dunia!” muncul di layar.

Kesimpulan

Di artikel pertama ini, kita sudah mengenal apa itu HTML dan melihat struktur dasar dari sebuah halaman HTML. Cukup dengan beberapa baris kode, kita sudah bisa membuat halaman web pertama kita. Selanjutnya, kita akan belajar tentang tag dan elemen HTML yang lebih spesifik.