Tag HTML Bersarang

Cara Nest HTML Tag dengan benar

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 teks kalimat .

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

terlebih dahulu, 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.

Menambahkan Lebih Banyak Tag Bersarang

Bagaimana jika Anda hanya menginginkan satu atau dua kata untuk dicetak tebal, dan satu lagi dicetak miring? Beginilah cara melakukannya.

Contoh: Ini adalah kalimat dan juga memiliki beberapa teks miring juga.

Anda dapat melihat bahwa kotak luar kita,

, sekarang memiliki dua tag bersarang di dalamnya - dan . Keduanya harus ditutup sebelum kotak yang berisi dapat ditutup.

Contoh: Ini adalah kalimat dan juga memiliki beberapa teks miring juga.

Ini adalah paragraf yang lain. < / p>

Dalam hal ini kita memiliki kotak di dalam kotak! Kotak paling banyak adalah

atau "pembagian". Di dalam kotak itu ada sepasang tag paragraf bertingkat, dan di dalam paragraf pertama kami memiliki pasangan tag dan berikutnya. Sekali lagi, lihatlah halaman web apa pun hari ini dan Anda akan melihat ini dan lebih banyak bersarang terjadi! Ini adalah bagaimana halaman dibangun - kotak di dalam kotak.

Mengapa Anda Peduli Tentang Nesting

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 kelas teks" konten utama "" pada laman, kesalahan bersarang membuat sulit bagi browser untuk mengetahui di mana menerapkan gaya ini. Mari kita lihat beberapa HTML:

Contoh: Ini adalah kalimat dan juga memiliki beberapa teks miring juga.

Ini adalah paragraf 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 {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.