Jika Anda melihat markup HTML untuk laman web apa pun hari ini, Anda akan melihat elemen HTML yang terdapat dalam elemen HTML lainnya. Elemen-elemen ini yang "di dalam" dari yang lain adalah apa yang dikenal sebagai "elemen bertingkat", dan mereka sangat penting untuk membangun halaman web apa pun hari ini.
Apa Berarti untuk Tag HTML Nest?
Cara termudah untuk memahami cara bersarang adalah dengan menganggap tag HTML sebagai kotak yang menyimpan konten Anda. Konten Anda dapat menyertakan teks, gambar, dll. Tag HTML adalah kotak di sekitar konten. Terkadang, Anda perlu menempatkan kotak di dalam kotak lain. Kotak-kotak "dalam" itu bersarang di dalam yang lain.
Jika Anda memiliki blok teks yang ingin dicetak tebal di paragraf, Anda akan memiliki dua elemen HTML serta teks itu sendiri.
Contoh: Ini adalah kalimat teks.
Teks itu adalah apa yang akan kita gunakan sebagai contoh kita. Di sini adalah bagaimana itu akan ditulis.
Contoh: Ini adalah kalimat teks. Karena Anda ingin kata "kalimat" menjadi tebal, Anda menambahkan membuka dan menutup tag tebal sebelum dan sesudah kata itu.
Contoh: Ini adalah kalimat teks. Seperti yang Anda lihat, kami memiliki satu kotak (paragraf) yang berisi konten / teks kalimat kami, ditambah kotak kedua (pasangan tag yang kuat), yang akan menjadikan kata itu sebagai tebal. Saat Anda menumpuk tag, sangat penting bagi Anda untuk menutup tag dalam urutan sebaliknya saat Anda membukanya. Anda membuka pertama, diikuti oleh , yang berarti Anda membalik itu dan menutup dan kemudian Cara lain untuk memikirkan hal ini adalah dengan sekali lagi menggunakan analogi kotak. Jika Anda menempatkan kotak di dalam kotak lain, Anda harus menutup kotak sebelah dalam sebelum Anda dapat menutup kotak luar atau kotak yang mengandung. Bagaimana jika Anda hanya menginginkan satu atau dua kata untuk dicetak tebal, dan satu lagi dicetak miring? Beginilah cara melakukannya. Contoh: Ini adalah kalimat teks dan juga memiliki beberapa teks dicetak miring terlalu. Anda dapat melihat bahwa kotak luar kita, the , sekarang memiliki dua tag bersarang di dalamnya - dan . Keduanya harus ditutup sebelum kotak yang berisi dapat ditutup. Contoh: Ini adalah kalimat teks dan juga memiliki beberapa teks dicetak miring terlalu. Ini paragraf yang lain. Dalam hal ini kita memiliki kotak di dalam kotak! Kotak paling banyak adalah Alasan nomor satu yang harus Anda perhatikan saat bersarang adalah jika Anda akan menggunakan CSS. Cascading Style Sheets mengandalkan tag untuk secara konsisten bersarang di dalam dokumen sehingga dapat mengetahui di mana gaya dimulai dan diakhiri. Jika Anda menyiapkan gaya yang seharusnya memengaruhi semua "tautan yang ada di dalam divisi dengan teks" konten utama "kelas di laman, kesalahan bersarang membuat sulit bagi browser untuk mengetahui di mana menerapkan gaya ini. Mari kita lihat beberapa HTML: Contoh: Ini adalah kalimat teks dan juga memiliki beberapa teks dicetak miring terlalu. Ini paragraf yang lain. Menggunakan contoh yang baru saja saya sebutkan, jika saya ingin menulis gaya CSS yang akan memengaruhi tautan di dalam divisi ini, dan hanya tautan itu (sebagai lawan dari tautan lain di bagian lain dari laman), saya akan perlu menggunakan bersarang untuk menulis gaya saya, seperti: .main-konten a { warna: # F00;}
Alasan lain termasuk aksesibilitas dan kompatibilitas browser. Jika HTML Anda tidak benar, tidak akan dapat diakses oleh pembaca layar dan browser yang lebih lama - dan itu bahkan dapat benar-benar merusak tampilan visual dari suatu halaman jika browser tidak dapat menemukan cara yang tepat untuk merender halaman karena elemen HTML dan tag tidak pada tempatnya. Akhirnya, jika Anda berusaha untuk menulis HTML yang benar dan valid, Anda harus menggunakan penumpukan yang benar. Jika tidak, setiap validator akan menandai HTML Anda sebagai salah. Menambahkan Lebih Banyak Tag Bersarang
Mengapa Anda Peduli Tentang Nesting
