HTML Dasar: Tag Element Attribute

Apa itu Tag?

HTML adalah sebuah markup yang membentuk struktur tubuh halaman web. HTML tersusun dari berbagai element. Dan tiap element, selalu ditulis dengan sebuah tag pembuka <nama-tag> dan tag penutup </nama-tag>. Meskipun ada beberapa tag yang hanya perlu dibuka, dan tidak perlu ditutup.

Jadi, tag adalah teks yang berada di antara tanda <..> dan juga </...>.

Dan, tag di dalam HTML bertugas untuk membuat atau membangun sebuah elemen [1].

Di antara contoh-contoh tag dalam HTML:

<html> - elemen root dari dokumen HTML
<head> - untuk mendefinisikan meta data, judul, styles, dan lain-lain dari dokumen HTML
<body> - untuk mendefinisikan body dari dokumen HTML (body adalah bagian yang terlihat oleh user)
<p> - untuk membuat elemen paragraf
<a> - untuk membuat elemen link
<button> - untuk membuat elemen tombol

Apa itu Elemen?

Elemen dalam HTML adalah sebuah komponen HTML. Elemen juga bisa dikatakan sebagai node atau simpul yang membentuk hirarki pohon dokumen HTML [2].

Bayangkan kita memiliki dua buah tombol html seperti berikut:

Berarti, kita memiliki 2 buah elemen HTML berupa tombol.

Cara membuatnya pun dengan menuliskan dua buah tag dengan nama <button>.

Sebagaimana dalam kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Elemen Pada HTML</title>
  </head>
  <body>
    <button>Tombol Kiri</button>
    <button>Tombol Kanan</button>
  </body>
</html>

Seperti yang telah dijelaskan di atas, tiap elemen HTML akan membentuk satu node (simpul) tersendiri dalam susuan hirarki HTML. Sehingga jika kita gambar dalam bentuk pohon diagram, penampakan dari 2 tombol di atas adalah seperti ini:

NB: elemen <head> dan turunannya adalah elemen yang tidak tampak secara langsung pada user. Berbeda dengan elemen <body> yang mana hasilkan akan langsung terlihat oleh user.

Apa itu Atribut?

Selain dua unsur penting di atas HTML juga memiliki sebuah istilah lain yang tidak kalah penting, yaitu atribut.

Apa itu atribut?

Atribut adalah sebuah tambahan argumen atau aksesoris terhadap suatu elemen HTML. Atribut hanya ditulis pada tag pembuka. Dan atribut berfungsi untuk menambahkan informasi tambahan pada suatu elemen HTML [3].

Contoh:

<img src="https://jagongoding.com/images/jagongoding-logo-full.png">

Kode di atas akan menampilkan sebuah gambar berikut:

Kita juga bisa mengatur panjang dan tinggi dari elemen gambar dengan menambahkan atribut width dan atribut height. Perhatikan contoh berikut:

<img
  src="https://jagongoding.com/images/jagongoding-logo-full.png"
  width="120"
  height="40">

Hasilnya:

Penjelasan

Tag <img> bertugas untuk membuat elemen gambar
Tag <img> termasuk tag yang hanya perlu pembuka, tanpa tag penutup
Tag <img> memiliki atribut src, height dan width
Atribut src berfungsi untuk menambahkan informasi url gambar yang akan ditampilkan oleh elemen <img>
Atribut height memberikan informasi tinggi gambar
Atribut width memberikan informasi lebar gambar

Kesimpulan

Setelah melakukan beberapa percobaan di atas, kita bisa memetik beberapa kesimpulan kunci. Di antaranya:

HTML adalah dokumen yang tersusun dari berbagai macam elemen
Elemen didefinisikan dengan menuliskan tag pembuka dan tag penutup (kecuali beberapa elemen yang tidak perlu tag penutup)
Tag adalah apa yang ada di antara tanda <...> dan </...>
Elemen bisa memiliki atribut, yang berfungsi untuk memberikan informasi tambahan pada suatu elemen

Kode Program Lengkap

Untuk kode program lengkap dari tutorial ini, bisa kalian akses pada repository github html-dasar.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang struktur dasar dokumen HTML.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Glossary/Tag - diakses tanggal 14 Februari 2021
[2] https://en.wikipedia.org/wiki/HTML_element - diakses tanggal 14 Februari 2021
[3] https://www.w3schools.com/html/html_attributes.asp - diakses tanggal 14 Februari 2021