Belajar HTML Dasar Part 5: Pengertian Tag, Elemen, dan Atribut pada HTML

Setelah berhasil menjalankan file HTML pada web browser, dalam lanjutan tutorial belajar HTML dasar kali ini kita akan membahas apa yang dimaksud dengan Tag, Elemen, dan Attribut pada HTML. Ketiganya merupakan dasar dari HTML, dan dasar dari seluruh halaman web yang ada di Internet.


Pengertian Tag dalam HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>
  • <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
  • </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” kesalahan ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun ini sepertinya memudahkan, tidak jarang malah bikin bingung.

Sebagai contoha lain, jika ingin membuat suatu text dalam sebuah paragraf yang di tulis tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:

<p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>. 
Paragraf ini terdiri dari <b>3 kalimat</b></p>.

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.”

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan dari bold).

Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untuk break (pindah baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal juga dengan sebutan self closing tag atau void tag, untuk penulisannya bisa ditulis dengan <br>,  maupun <br />.
HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>. Pada awal kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan huruf kecil untuk semua tag.

Dalam HTML5, aturan ini kembali tidak diharuskan. Akan tetapi kebiasaan web programmer saat ini adalah menggunakan huruf kecil untuk seluruh tag.


Pengertian Element dalam HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimikinya (jika ada). Sebagai contoh perhatikan kode HTML berikut:

<p> Ini adalah sebuah paragraf </p>

Pada contoh diatas, “<p>Ini adalah sebuah paragraf</p>” merupakan element p.

Element tidak hanya berisi text, namun juga bisa tag lain.

Contoh:

<p> Ini adalah sebuah <em>paragraf</em> </p>

Dari contoh diatas,<p> Ini adalah sebuah <em>paragraf</em> </p> merupakan elemen p. Dalam pembahasan atau tutorial tentang HTML, tidak jarang istilah “tag” dan “element” saling dipertukarkan.


Pengertian Atribut dalam HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).

Contoh kode HTML:

<a href="http://www.duniailkom.com">ini adalah sebuah link</a>

Pada kode HTML diatas, href=”http://www.duniailkom.com” adalah atribut. href merupakan nama dari atribut, dan http://www.duniailkom.com adalah value atau nilai dari atribut tersebut.

Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut, terutama atribut id dan class yang sering digunakan untuk manipulasi halaman web menggunakan CSS maupun JavaScript.

HTML memiliki banyak atribut yang beberapa diantaranya hanya cocok untuk tag tertentu saja. Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a> saja (dan beberapa tag lain). Penjelasan tentang tujuan dan pengertian dari atribut seperti href ini akan kita bahas pada tutorial-tutorial selanjutnya.

Pada tutorial kali ini, kita telah mempelajari salah satu aspek terpenting di dalam HTML, yakni Pengertian Tag, Elemen, dan Atribut pada HTML. Dalam tutorial HTML dasar selanjutnya, kita akan mempelajari tentang Struktur Dasar Halaman HTML.


eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.

Tutorial Terkait:

64 Comments

  1. Aldi Unanto
    20 Jun 14
    • Andre
      21 Jun 14
      • Rino Hakim
        18 Apr 16
      • Andre
        18 Apr 16
  2. afandi
    31 Jan 15
    • Andre
      02 Feb 15
  3. Takde Nama
    18 Mar 15
    • Andre
      18 Mar 15
  4. ibnu
    22 Mar 15
    • Andre
      23 Mar 15
  5. su rat
    29 Aug 15
    • Andre
      30 Aug 15
  6. majalahberita855
    06 Sep 15
    • Andre
      06 Sep 15
  7. eva nurvaizah
    05 Nov 15
    • Andre
      05 Nov 15
      • Parningotan
        16 Apr 16
        • Andre
          16 Apr 16
      • englishclass
        07 Jan 17
  8. Rhudi Rhoma
    13 Nov 15
  9. jems
    27 Feb 16
    • Andre
      27 Feb 16
  10. yudi
    08 Apr 16
  11. Ok Ta
    24 May 16
    • Andre
      26 May 16
  12. Priagung Satyagama
    06 Jul 16
    • Andre
      07 Jul 16
  13. khamim
    08 Jul 16
    • Andre
      09 Jul 16
  14. Rozy wardani
    05 Aug 16
    • Andre
      05 Aug 16
  15. Wawan Budiyono
    07 Sep 16
    • Andre
      07 Sep 16
  16. Anas
    26 Sep 16
    • Andre
      27 Sep 16
  17. Anas
    29 Sep 16
    • Andre
      30 Sep 16
  18. ratna
    03 Oct 16
    • Andre
      03 Oct 16
  19. ratna
    03 Oct 16
    • Andre
      04 Oct 16
  20. ratna
    06 Oct 16
  21. Arief Munandar
    22 Oct 16
    • Andre
      23 Oct 16
  22. Teguh Cahyono
    08 Nov 16
    • Andre
      09 Nov 16
  23. dayung
    11 Nov 16
    • Andre
      13 Nov 16
  24. Mr. P11
    16 Nov 16
    • Andre
      17 Nov 16
  25. Fauzan Amik ibrahimy
    21 Nov 16
  26. Rico
    05 Dec 16
    • Andre
      05 Dec 16
  27. iqbal
    10 Dec 16
    • Andre
      30 Dec 16
  28. Rohman
    28 Jan 17
    • Andre
      28 Jan 17
  29. Lailil Muflihah
    02 Feb 17
    • Andre
      02 Feb 17
  30. D'13
    16 Mar 17
  31. Anonymous
    27 Mar 17

Add Comment