Nesting & Void Elements

Setelah lesson ini, kamu dapat memperbaiki nesting dan menggunakan elemen void serta atribut boolean dengan benar.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Bayangkan dua kotak bersarang. Kotak di dalam harus ditutup dahulu sebelum kotak luarnya. HTML juga membutuhkan hubungan yang rapi agar maknanya tidak tertukar.

Memperbaiki nesting dan menggunakan elemen void serta atribut boolean dengan benar.

PAHAMI KONSEPNYA

Parent dan child

Dalam Bawa air., p adalah parent dan strong adalah child. Tutup strong sebelum menutup p. Strong memberi kepentingan pada kata; p tetap membungkus seluruh kalimat. Indentasi membantu manusia membaca, tetapi hubungan dibentuk oleh tag.

Tidak semua elemen membungkus isi

Img, br, hr, input, dan meta adalah void elements. Mereka tidak memiliki konten anak atau tag penutup. Br memberi pergantian baris yang bermakna, misalnya alamat; hr menandai pergantian tema. Jangan memakai banyak br untuk mengatur jarak layout.

Atribut boolean ditentukan kehadirannya

Atribut seperti disabled atau required aktif bila ditulis. Disabled="false" tetap membuat kontrol disabled karena atributnya ada. Untuk menonaktifkan sifat tersebut, hapus atributnya. Kita akan memakai required saat belajar form.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<p>Ingat: <strong>bawa air</strong> sebelum berangkat.</p>
<hr>
<p>Taman Kota<br>Jalan Kenanga 8</p>
<input type="text" aria-label="Contoh input nonaktif" disabled>

HASIL DI BROWSER

Strong ditutup sebelum p. Hr, br, dan input tidak memiliki tag penutup; disabled hadir tanpa nilai.

KESALAHAN YANG SERING TERJADI

<p>Ingat <strong>air</p></strong>
<br></br>

Penutup bersilangan merusak nesting. Tutup strong sebelum p. Br adalah void element: hapus .

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Bagaimana membuat input dengan disabled="false" dapat digunakan lagi?

Ganti false menjadi 0Hapus atribut disabledTambahkan </input>

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

TULIS · LIHAT · PAHAMI

Rapikan pengingat

Perbaiki nesting strong di dalam paragraf dan hapus penutup br. Pertahankan kata “sarung tangan” dalam strong, satu br untuk alamat, dan hr sebagai pemisah tema.

<p>Bawa <strong>sarung tangan</p></strong>
<hr>
<p>Kebun Bersama<br></br>Jalan Melati 2</p>

index.htmlHTMLLn 1, Col 13 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.

Tutup elemen anak sebelum parent.
Void elements tidak punya anak maupun penutup.
Atribut boolean aktif karena hadir, bukan karena nilai true.

Sintaks HTMLAtribut

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

Hubungkan dengan konsep lain

HTML element °Void element °HTML attribute °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →