Hypertext Markup Language juga dikenal sebagai HTML, digunakan untuk membangun aplikasi web. Tag HTML, umumnya dikenal sebagai elemen, adalah aspek terpenting dari bahasa HTML. Tag HTML menyematkan dan menampilkan konten atau informasi pada halaman web. Ada dua jenis tag HTML: Tag Kosong dan Wadah.
Blog ini akan memandu cara bekerja dengan tag kosong dan tag kontainer dalam HTML.
Tag Kosong
Tag kosong juga dikenal sebagai “ tunggal ' atau ' ruang kosong ” tag. Tag kosong tidak pernah berisi konten apa pun, tetapi atribut dapat ditentukan. Tag ini tidak memiliki tag penutup dan mungkin berisi garis miring terbalik pada tag. Contoh tag kosong adalah “
”, “”, “”, “
Sintaksis
Sintaks untuk menyebutkan elemen void dalam HTML adalah sebagai berikut:
< kosong-tag />
Untuk melihat cara bekerja dengan tag kosong, lihat contoh di bawah ini. “
” tag dikenal sebagai tag pemecah baris dan digunakan untuk memutus baris:
< p > Tag Kosong HTML < br > Garis merusak Menandai p >
Output menunjukkan bahwa “
” tag telah melanggar batas:
Kita dapat menambahkan properti penataan CSS ke tag HTML. “
< jam gaya = 'border-top: 3px putus-putus merah;' > Garis merusak Menandai
p >
“ perbatasan-atas ” properti CSS diterapkan ke “
Keluaran
Sejauh ini, kami telah membahas tag kosong HTML. Sekarang, kita akan membahas tag penampung HTML di bagian selanjutnya.
Tag Wadah
Tag wadah HTML terdiri dari tiga bagian: tag awal, konten, dan tag penutup. Sintaks tag wadah HTML diberikan sebagai berikut:
< mulai_hari > Isi tag akhir >Lihat contoh di bawah ini untuk mempelajari cara kerja tag penampung di HTML.
Contoh 1: Bagaimana Cara Menambahkan Paragraf di HTML?
“ ” tag digunakan untuk menyematkan paragraf dalam dokumen HTML:
< p > Ini adalah tag paragraf p >Keluaran
Contoh 2: Bagaimana Cara Menambahkan Heading di HTML?
Ada enam tingkat tag penampung judul yang dapat digunakan untuk menambahkan judul ke halaman web. Mari kita tempatkan di dokumen HTML untuk melihat cara kerjanya dan tampilannya di halaman web:
< h1 > Linux h1 >< h2 > Linux h2 >
< h3 > Linux h3 >
< h4 > Linux h4 >
< h5 > Linux h5 >
< h6 > Linux h6 >
Keluaran
Kami dapat menyediakan gaya inline untuk tag ini. Pertimbangkan contoh di bawah ini, yang menunjukkan cara menerapkan berbagai properti gaya CSS ke tag ini:
< h1 gaya = 'warna latar belakang: thistle; font-family: kursif;' > Linux h1 >< h2 gaya = 'warna latar belakang: gandum; perataan teks: tengah;' > Linux h2 >
< h3 gaya = 'warna latar belakang: tomat; warna: putih;' > Linux h3 >
< h4 gaya = 'font-family: 'Trebuchet MS'; background-color: yellowgreen;' > Linux h4 >
< h5 gaya = 'warna latar belakang: ungu;' > Linux h5 >
< h6 gaya = 'warna latar belakang: asap putih;' > Linux h6 & gt
Berikut adalah penjelasan dari sifat-sifat yang disebutkan di atas:
- “ warna latar belakang ” properti menambahkan warna ke latar belakang elemen.
- “ font-family ” properti menyesuaikan gaya font elemen.
- “ perataan teks ” menyesuaikan penempatan atau perataan teks.
Keluaran
Kami telah menunjukkan kepada Anda cara menggunakan tag kosong dan wadah HTML.
Kesimpulan
Tag kosong dan tag penampung adalah komponen utama dokumen HTML yang menyematkan konten dan informasi pada halaman web. Tag kosong tidak berisi konten apa pun dan hanya terdiri dari tag awal dengan garis miring terbalik di bagian akhir, seperti
. Namun, tag penampung berisi tag awal dan akhir beserta kontennya. Blog ini telah menguraikan cara kerja elemen kosong dan wadah dalam HTML.