Halo teman-teman semuanya, setelah sebelumnya kita mengenal struktur dasar HTML, sekarang saatnya kita memahami lebih dalam tentang tag dan elemen HTML, dua hal yang menjadi inti dari penulisan HTML.
Dengan memahami perbedaan dan cara kerja tag serta elemen, kita bisa menulis HTML yang benar, rapi, dan mudah dipahami.
Apa Itu Tag dalam HTML?
Tag adalah instruksi yang digunakan untuk memberitahu browser bagaimana cara menampilkan konten. Tag ditulis di antara tanda kurung sudut (< >), seperti:
<p>Ini paragraf</p>
Dalam contoh di atas:
<p> adalah tag pembuka (opening tag)</p> adalah tag penutup (closing tag)Ini paragraf adalah isi dari elemen tersebut
Apa Itu Elemen HTML?
Elemen adalah gabungan dari tag pembuka, isi, dan tag penutup. Jadi, seluruh baris ini:
<p>Ini paragraf</p>
...adalah elemen paragraf.
Kesimpulan:
- Tag adalah bagian dari elemen.
- Elemen = tag pembuka + isi + tag penutup.
Elemen HTML yang Umum Digunakan
Berikut beberapa elemen HTML yang sering kita gunakan:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<p>Paragraf teks biasa.</p>
<a href="https://santrikoding.com">Ini link</a>
<img src="gambar.jpg" alt="Contoh gambar">
Penjelasan:
<h1> sampai <h6>: Untuk heading atau judul, dari yang paling besar (<h1>) ke paling kecil (<h6>)<p>: Untuk menulis paragraf<a>: Untuk membuat hyperlink<img>: Untuk menampilkan gambar (elemen ini tidak memiliki tag penutup)
Elemen yang Tidak Memiliki Tag Penutup
Beberapa elemen HTML disebut elemen kosong (void elements) karena tidak memiliki konten dan tidak perlu tag penutup, seperti:
<br> <!-- Ganti baris -->
<hr> <!-- Garis horizontal -->
<img src="gambar.jpg" alt="Deskripsi gambar">
<input type="text">
Penulisan seperti ini sudah sah dan benar dalam HTML5. Kita cukup menuliskannya satu kali saja.
Nesting: Menyusun Elemen di Dalam Elemen
HTML memungkinkan kita menyusun elemen di dalam elemen lainnya, contohnya:
<p>Ini paragraf dengan <strong>teks yang ditebalkan</strong>.</p>
Dalam contoh ini, <strong> berada di dalam <p>, dan ini disebut nested element. Pastikan kita selalu menutup elemen dengan benar agar struktur HTML tetap valid.
Kesimpulan
Di artikel ini, kita sudah belajar apa itu tag dan elemen HTML, mengenal beberapa tag yang umum digunakan, serta memahami konsep elemen kosong dan nested elements.
Di artikel selanjutnya, kita akan membahas tentang Heading, Paragraf, dan Line Break, agar kita bisa mengatur teks dalam halaman HTML dengan lebih baik.
Terima Kasih