HTML: Element, Tag, Inner HTML dan Attribute

Pada artikel sebelumnya kita mengetahui bahwa HTML tersusun atas tag-tag dengan format seperti ini:

<tag>(Inner HTML)</tag>

di mana <tag> merupakan tag pembuka, dan </tag> merupakan tag penutup. Rangkaian yang kita tulis ini disebut sebagai elemen.

Element

Perhatikan contoh berikut ini:

<h1 align="center">Hello or Goodbye?</h1>
<p>
  <b><i>안녕</i></b> <i>(an-nyeong)</i> memiliki dua makna, yaitu "halo" dan "sampai jumpa". Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.
</p>

Hello or Goodbye?

안녕 (an-nyeong) memiliki dua makna, yaitu “halo” dan “sampai jumpa”. Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.

Pada dasarnya, setiap elemen memiliki tiga aspek, yakni tag, attribute, dan Inner HTML.

<h1 align="center">Hello or Goodbye?</h1>

Pada contoh di atas, h1 merupakan tag elemen, align adalah nama atribut, center adalah nilai atribut tersebut, dan Hello or Goodbye? merupakan Inner HTML dari elemen tersebut.

Mari kita lihat fungsi dari masing-masing aspek elemen tersebut.

Tag

Tag pada elemen berfungsi untuk menentukan jenis dari elemen.

TagFungsi
h1Membuat judul (heading) tingkat 1
pMembuat paragraf
bCetak tebal (bold)
iCetak miring (italic)

Harap diingat bahwa urutan penutup tag harus sesuai dengan urutan pembuka tag. Seperti contoh tulisan “안녕” di atas, jika urutan pembuka tag adalah B lalu I, maka penutupnya harus I terlebih dulu diikuti oleh B.

Inner HTML

Seluruh isi yang tertera di dalam elemen disebut Inner HTML. Inner HTML bisa berupa teks, elemen lain, maupun gabungan keduanya.

Jika dijabarkan, susunan elemen-elemen dari kode HTML contoh diatas adalah:

  • <H1>
    • Hello or Goodbye?
  • <P>
    • <B>
      • <I>
        • 안녕
    • <I>
      • (an-nyeong)
    • memiliki dua makna, yaitu “halo” dan “sampai jumpa”. Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.
ElemenInner HTML
H1Hello or Goodbye?
P<b><i>안녕</i></b> <i>(an-nyeong)</i> memiliki dua makna, yaitu “halo” dan “sampai jumpa”. Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.
B<i>안녕</i>
I안녕
I(an-nyeong)

Attribute

Atribut merupakan parameter tambahan yang bisa kita berikan pada suatu elemen untuk mengubah perilaku elemen tersebut atau untuk menyimpan data tertentu terkait dengan elemen tersebut. Setiap jenis elemen memiliki atribut-atribut yang berbeda.

Pemberian atribut align="center" seperti pada elemen H1 di atas menjadikan isi tulisan berada di tengah. Jika ingin membuat tulisan rata kanan, bisa kita ubah nilainya dengan "right".

Di samping atribut-atribut yang berlaku secara umum (dapat diterapkan pada hampir semua elemen), ada juga atribut yang spesifik hanya untuk tag-tag tertentu. Mengenai atribut-atribut apa saja yang didukung oleh masing-masing tag akan dibahas pada kesempatan berikutnya.

Tulis Komentar