Jika Anda melihat HTML markup untuk halaman web mana pun hari ini, Anda akan melihat elemen HTML yang terkandung di dalam elemen HTML lainnya. Unsur-unsur yang "di dalam" unsur-unsur lain ini dikenal sebagai elemen bersarang, dan mereka sangat penting untuk membangun laman web apa pun saat ini.
Apa Artinya Sarang Tag HTML?
Cara termudah untuk memahami bersarang adalah dengan memikirkan tag HTML sebagai kotak yang menampung konten Anda. Konten Anda dapat mencakup teks, gambar, dan media terkait. Tag HTML adalah kotak di sekitar konten. Terkadang, Anda perlu menempatkan kotak di dalam kotak lain. Kotak "dalam" itu bersarang di dalam kotak lain.
Jika Anda memiliki blok teks yang ingin Anda tebalkan di dalam paragraf, Anda akan memiliki dua elemen HTML serta teks itu sendiri.
Contoh: Ini adalah kalimat teks.
Teks itulah yang akan kita gunakan sebagai contoh kita. Berikut adalah bagaimana hal itu akan ditulis dalam HTML:
Contoh: Ini adalah kalimat teks.
Untuk membuat kata kalimat tebal, tambahkan tag pembuka dan penutup sebelum dan sesudah kata itu.
Contoh: Ini adalah kalimat dari teks.
Seperti yang Anda lihat, kami memiliki satu kotak (paragraf) yang berisi isi kalimat, ditambah kotak kedua ( kuat pasangan tag), yang membuat kata itu menjadi tebal.
Saat Anda menumpuk tag, tutup tag dengan urutan yang berlawanan saat Anda membukanya. Anda membuka
pertama, diikuti oleh , yang berarti Anda membalikkan itu dan menutup dan kemudian.
Cara lain untuk memikirkan hal ini adalah sekali lagi menggunakan analogi kotak. Jika Anda menempatkan sebuah kotak di dalam kotak lain, Anda harus menutup bagian dalam sebelum Anda dapat menutup kotak luar atau kotak yang berisi.
Menambahkan Lebih Banyak Tag Bersarang
Bagaimana jika Anda hanya ingin satu atau dua kata menjadi tebal, dan set lainnya menjadi miring? Berikut cara melakukannya.
Contoh: Ini adalah kalimat teks dan juga memiliki beberapa teks miring terlalu.
Anda dapat melihat bahwa kotak luar kami,
, sekarang memiliki dua tag bersarang di dalamnya— dan . Keduanya harus ditutup sebelum kotak yang berisi itu bisa ditutup.
Contoh: Ini adalah kalimat teks dan juga memiliki beberapa teks miring terlalu.
Ini adalah paragraf lain.
Dalam hal ini, kami memiliki kotak di dalam kotak! Kotak terluar adalah
atau a. divisi. Di dalam kotak itu ada sepasang sarang. tag paragraf, dan di dalam paragraf pertama, kita memiliki paragraf berikutnya. dan pasangan tanda.Mengapa Anda Harus Peduli Tentang Bersarang
Alasan No. 1 bahwa Anda harus peduli tentang bersarang adalah jika Anda akan menggunakan CSS. Lembar Gaya Cascading mengandalkan tag untuk secara konsisten bersarang di dalam dokumen sehingga dapat mengetahui di mana gaya dimulai dan diakhiri. Penyarangan yang salah mempersulit browser untuk mengetahui di mana harus menerapkan gaya ini. Mari kita lihat beberapa HTML:
Contoh: Ini adalah kalimat teks dan juga memiliki beberapa teks miring terlalu.
Ini adalah paragraf lain.
Menggunakan contoh di atas, jika kita ingin menulis a gaya CSS yang akan memengaruhi tautan di dalam divisi ini, dan hanya tautan itu (berlawanan dengan tautan lain di bagian lain halaman), kita perlu menggunakan sarang untuk menulis gaya ini, seperti:
.main-konten a {
warna: #F00;
}
Pertimbangan lainnya
Aksesibilitas dan kompatibilitas browser juga penting. Jika HTML Anda salah bersarang, HTML tidak akan dapat diakses oleh pembaca layar dan browser lama—dan bahkan dapat merusak tampilan visual halaman jika browser tidak dapat menemukan cara merender halaman dengan benar karena elemen dan tag HTML tidak berfungsi tempat.
Terakhir, jika Anda berusaha untuk menulis HTML yang benar-benar benar dan valid, Anda harus menggunakan nesting yang benar. Jika tidak, setiap validator akan menandai HTML Anda sebagai salah.