Estimasi Waktu Baca: 4 menit

Apa itu Tag di HTML?

Dalam artikel sebelumnya saya hanya memberi definisi bahwa tag merupakan kombinasi atau gabungan dari simbol dan huruf. Namun untuk lebih detailnya, tag merupakan penanda awal dan akhir dari suatu elemen HTML. Tag dibuat dengan tanda (<…..>) kemudian di dalam tanda tersebut terdapat huruf atau kata yang mewakili nama dari tag tersebut. Contoh tag <html>, <head>, <h1>, <p>, dan lain-lain.

Dalam setiap elemen HTML terdiri dari sepasang tag, tag pembuka dan tag penutup. Perbedaan antara tag pembuka dan tag penutup terdapat pada tanda slash yang dimiliki tag penutup. Contoh </html>, </head>, </h1>, </p>, dan lain-lain.


<h>....</h>
<p>....</p>

Namun tidak semua tag terdiri atas tag pembuka dan tag penutup (sepasang), ada juga beberapa yang berdiri sendiri seperti <br>, <hr>, <img>, dan lain-lain.

Jenis tag yang tidak memiliki pasangan ini dipanggil tag yang berdiri sendiri atau dapat juga disebut self-closing tag. Sedangkan dalam konteks elemen bisa disebut empty elemen atau void elemen.

Fungsi tag bermacam tergantung masing-masing tag, ada yang digunakan untuk,

  • membuat judul
  • membuat paragraf
  • membuat daftar
  • membuat tabel
  • dan lain-lain.

Pada awalnya tag di HTML hanya berjumlah 18 buah namun seiring berjalannya waktu kini html memiliki tag sebanyak 250 buah.

Apakah semua tag tersebut harus dihafal?

Tidak perlu, kita cukup menghafal tag dasarnya saja, tag yang sering kita temui saat membuat website besok. Beberapa tag dasar ini dapat dilihat pada tabel di bawah ini:

TagKegunaan
<html>Memulai dokumen HTML
<head>Membuat bagian kepala halaman
<body>Membuat bagian tubuh halaman
<title>Membuat judul halaman
<h1> sampai <h6>Membuat judul pada konten halaman
<p>Membuat paragraf
<a>Membuat link
<img>Memasukkan gambar
<!– –>Membuat komentar

Untuk tag dasar lainnya akan kita pelajari secara perlahan di materi berikutnya

Bagaimana Menulis Tag HTML dengan Benar?

Menulis tag html tidak bisa sembarangan, ada beberapa aturan yang seharusnya perlu diperhatikan, walaupun beberapa aturan memang tidak mutlak, namun dengan memperhatikan hal-hal di bawah ini diharapkan kode yang ditulis nantinya akan terlihat rapi dan dipastikan valid oleh validator W3C.

Gunakan huruf kecil

Tag dalam HTML tidak case sensitif. Meskipun begitu, jangan sekali-sekali gunakan huruf besar untuk menulis tag karena akan terlihat buruk. W3C juga menyarankan untuk selalu menulis tag dalam lower case atau huruf kecil.

Contoh yang salah


<BODY>
   <H1>....</H1>
   <P>....</P>
</BODY>

Contoh yang benar


<body>
   <h1>....</h1>
   <p>....</p>
</body>

Selain itu dengan menggunakan huruf kecil akan memudahkan kita untuk mengetiknya dan kode terlihat lebih rapi. Kecuali untuk DOCTYPE yang lebih disarankan menggunakan huruf besar (upper case) walaupun menggunakan huruf kecil juga valid menurut W3C.

Namun tidak dengan dokumen XHTML yang akan berakibat error bila doctype ditulis dengan huruf kecil.

Tutup Tag Dengan Benar

Jangan lupa untuk menutup tag karena jika lupa akan menimbulkan kerancuan pada hasil yang dikeluarkan.

Contoh salah


<h1>Judul Satu	
<p>Ini paragraf

Seharusnya


<h1>Judul Satu</h1>
<p>Ini paragraf</p>

Selain itu pada saat membangun website nantinya kita akan menemukan tag yang bertumpuk, artinya dalam tag akan ada tag lagi. Pastikan urutan untuk menutup tag yang bertumpuk itu tepat. Karena jika tidak tepat akan mengakibatkan kode HTML yang ditulis tidak valid. Contoh salah dan benar untuk menutup tag bertumpuk ini bisa dilihat pada contoh di bawah.

Contoh salah


<p><b><i><u>Selamat Datang</p></b></i></u>

Seharusnya


<p><b><i><u>Selamat Datang</u></i></b></p>

Walaupun dalam beberapa tag bertumpuk hasilnya bisa dibilang masih sesuai dengan yang diinginkan, namun penulisan tag yang keliru tempat tersebut sangat salah.

Tag yang Wajib Ditulis

Ada banyak tag di HTML, beberapa diantaranya bersifat wajib untuk ditulis, karena bila tidak ditulis maka akan menyebabkan error validasi menurut W3C. Tag-tag yang wajib ditulis di dokumen HTML adalah sebagai berikut:

  • <!DOCTYPE html> – deklarasi tipe dokumen
  • <html> – tag pembuka
  • <head> – kepala halaman
  • <title> – judul halaman
  • <body> – tubuh halaman

Namun tenang saja, karena masalah ini sudah diatasi oleh beberapa teks editor, contohnya sublime, dengan hanya mengetikkan html maka template untuk membuat dokumen html langsung terbentuk dalam sekejap.

Apa itu Elemen di HTML?

Elemen HTML merupakan semua hal yang didefinisikan mulai dari tag pembuka, konten tag, dan tag penutup.

Lebih jelasnya dapat dilihat pada gambar di bawah ini

Nested Elemen

Isi dari elemen tidak selalu berupa teks, sering dijumpai juga suatu elemen memiliki isi berupa elemen lain, yang mana hal ini disebut dengan nested elemen atau elemen bersarang.

Untuk lebih jelasnya perhatikan gambar berikut:

Empty Elemen HTML

Pembahasan empty elemen atau void elemen sempat disinggung di awal artikel. Empty elemen atau void elemen adalah elemen yang tidak memiliki tag penutup. Ia hanya terdiri dari satu tag pembuka dengan terkadang diakhiri tanda slash sebelum tanda >.

Salah satu tag yang masuk ke dalam kategori ini adalah tag <br> yang mewakili line break atau garis baru.