Headings & Paragraphs

Setelah lesson ini, kamu dapat menyusun satu judul utama, subjudul bertingkat, dan paragraf sesuai hierarki isi.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Saat memindai artikel panjang, kamu mencari judul bagian dahulu. Pembaca layar juga dapat memakai heading untuk berpindah langsung ke bagian yang dibutuhkan.

Menyusun satu judul utama, subjudul bertingkat, dan paragraf sesuai hierarki isi.

PAHAMI KONSEPNYA

Heading adalah peta isi

H1 sampai h6 menunjukkan tingkat judul. Untuk halaman sederhana ini, gunakan satu h1 sebagai judul utama, h2 untuk bagian utama, dan h3 untuk subbagian h2. Angkanya menunjukkan kedalaman, bukan pilihan ukuran huruf.

Paragraf menyampaikan satu gagasan

Bungkus tiap gagasan dalam p. Menekan Enter berkali-kali pada kode biasanya tidak menghasilkan paragraf baru: whitespace biasa diringkas browser. Buat elemen p baru ketika gagasannya berganti.

Pilih tingkat berdasarkan hubungan

Jika “Perawatan” adalah h2, maka “Penyiraman” di dalamnya masuk akal sebagai h3. Jangan melompat dari h1 ke h4 hanya untuk mendapatkan ukuran kecil. Tampilan diatur CSS; hierarki ditentukan makna konten.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<h1>Panduan Kebun Balkon</h1>
<p>Ruang kecil juga bisa menjadi tempat tumbuh.</p>
<h2>Persiapan</h2>
<p>Pilih pot yang memiliki lubang drainase.</p>
<h2>Perawatan</h2>
<h3>Penyiraman</h3>
<p>Periksa kelembapan media sebelum menyiram.</p>

HASIL DI BROWSER

Dua h2 adalah bagian sejajar; Penyiraman berada satu tingkat di bawah Perawatan.

KESALAHAN YANG SERING TERJADI

<h1>Panduan Kebun</h1>
<h4>Persiapan</h4>

Persiapan adalah bagian langsung dari panduan, sehingga gunakan h2. Jangan memilih h4 hanya karena tampil lebih kecil.

COBA BERSAMA

Praktik memperjelas pemahaman.

Lengkapi tingkat subbagian di bawah h2 Perawatan.

<>Penyiraman</h3>

Lihat petunjuk

Turun satu tingkat dari h2.

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Buat kerangka panduan membaca

Susun h1 “Membaca Lebih Nyaman”, h2 “Persiapan”, h2 “Kebiasaan”, dan h3 “Catatan Singkat” di bawah Kebiasaan. Tambahkan setidaknya dua paragraf yang bermakna.

<h1>Membaca Lebih Nyaman</h1>
<h4>Persiapan</h4>
Kebiasaan
Catatan Singkat

index.htmlHTMLLn 1, Col 14 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Heading menyatakan hierarki, bukan ukuran.
Gunakan p untuk paragraf baru.
Susun tingkat judul tanpa melompat agar hubungan isi jelas.

Teks bermaknaAksesibilitas

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Heading °Semantic HTML °Accessibility °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →