Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Menggunakan tag heading
<h1>sampai<h6>dengan benar - Membuat paragraf dengan tag
<p> - Memahami perbedaan antara
<br>dan paragraf baru - Menebalkan dan memiringkan teks
Materi Singkat
Bayangkan kamu sedang membaca artikel di koran. Ada judul besar di atas, sub-judul yang lebih kecil, dan paragraf-paragraf teks. HTML punya tag yang tepat untuk setiap itu.
Heading: Tag <h1> sampai <h6>
HTML memiliki 6 tingkat heading:
<h1>— judul utama (paling besar, paling penting) — pakai sekali per halaman<h2>— judul bagian<h3>— judul sub-bagian<h4>,<h5>,<h6>— semakin kecil dan jarang dipakai
Ini bukan hanya soal ukuran teks. Heading punya makna hierarki — seperti daftar isi buku. Mesin pencari seperti Google menggunakan heading untuk memahami struktur kontenmu.
Aturan penting: Jangan loncat dari <h1> langsung ke <h3>. Gunakan secara berurutan.
Paragraf: Tag <p>
Setiap <p> membuat paragraf baru dengan spasi di atas dan bawahnya. Browser secara otomatis menambahkan jarak antar paragraf.
Pindah Baris: <br>
Kalau kamu mau pindah baris tanpa membuat paragraf baru (misalnya untuk puisi atau alamat), gunakan <br>. Tag ini tidak perlu ditutup.
Teks Tebal dan Miring
<strong>— teks tebal (juga bermakna "penting")<em>— teks miring (singkatan dari "emphasis", penekanan)
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Artikel Saya</title>
</head>
<body>
<h1>Belajar HTML itu Menyenangkan</h1>
<h2>Kenapa Harus Belajar HTML?</h2>
<p>HTML adalah fondasi dari setiap halaman web di dunia.
Tanpa HTML, tidak ada website.</p>
<p>Dengan HTML, kamu bisa membuat <strong>halaman web sendiri</strong>
dan berbagi ide dengan seluruh dunia.</p>
<h2>Mulai dari Mana?</h2>
<p>Mulailah dari hal yang paling sederhana.<br />
Pelajari satu konsep per hari.<br />
Praktik setiap saat.</p>
<h3>Alat yang Dibutuhkan</h3>
<p>Kamu hanya butuh <em>editor teks</em> dan browser.
Itu saja — tidak perlu instalasi rumit.</p>
</body>
</html>Tugas Kecil
- Buat file HTML baru bernama
artikel.html - Tulis artikel singkat tentang dirimu dengan struktur:
<h1>— judul artikel (contoh: "Perjalanan Belajar Coding Saya")<h2>— "Tentang Saya"- Satu
<p>yang memperkenalkan dirimu, gunakan<strong>untuk namamu <h2>— "Mengapa Belajar Coding?"- Satu
<p>berisi alasanmu belajar coding, gunakan<em>untuk kata kunci <h2>— "Target Saya"- Satu
<p>berisi target belajarmu, dengan pindah baris<br>antar target