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 Atribut 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. 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 contoh 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 dimilikinya (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) yang ditulis dengan name="value". Value diapit tanda kutip, boleh menggunakan tanda kutip satu (') atau dua (").

Contoh kode HTML:

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

Pada kode HTML diatas, href="https://www.duniailkom.com" adalah atribut. href merupakan nama dari atribut, dan https://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.

129 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
  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
  19. ratna
    03 Oct 16
    • Andre
      04 Oct 16
  20. ratna
    06 Oct 16
  21. Arief Munandar
    22 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
  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
  32. muhammad salbiyath
    09 Apr 17
  33. Cholis
    03 May 17
    • Andre
      04 May 17
  34. Ichsan
    14 Jun 17
    • Andre
      17 Jun 17
  35. mudofar
    06 Jul 17
  36. Andra Antariksa
    11 Jul 17
  37. Anonymous
    17 Jul 17
    • Andre
      17 Jul 17
  38. Pradito Octa Budiono
    15 Sep 17
  39. aris
    20 Oct 17
    • aris
      20 Oct 17
  40. Dzika Hanifa
    31 Oct 17
    • Andre
      02 Nov 17
  41. Ikbalbulbul
    23 Nov 17
    • Andre
      26 Nov 17
      • LoOp
        13 Apr 18
  42. jacs
    30 Nov 17
  43. Abed Saragih
    01 Dec 17
    • Andre
      02 Dec 17
  44. indra
    08 Dec 17
    • Andre
      14 Dec 17
  45. yordani
    09 Dec 17
    • Andre
      18 Dec 17
  46. herman
    14 Dec 17
    • Andre
      18 Dec 17
  47. Cara Manual
    24 Jan 18
  48. Ade Hidayat
    15 Feb 18
  49. Tia
    23 Mar 18
  50. m.fadilah
    14 Jun 18
    • Andre
      19 Jun 18
  51. Nathamael simbolon
    22 Jul 18
    • Andre
      23 Jul 18
    • Andre
      05 Aug 18
  52. Guntur
    11 Aug 18
    • Andre
      13 Aug 18
  53. zhef
    05 Dec 18
    • Andre
      05 Dec 18
  54. zhef
    05 Dec 18
    • Andre
      05 Dec 18
  55. Anonymous
    09 Dec 18
  56. Dadang:v
    05 Nov 19
    • Andre
      06 Nov 19
  57. Bagas Tri Hadmodjo
    12 Nov 19
    • Andre
      13 Nov 19
  58. kade
    04 Dec 19
    • Andre
      04 Dec 19
      • Anonymous
        04 Dec 19
  59. Soddims
    31 Jan 20
    • Andre
      02 Feb 20
  60. Anonim
    14 Mar 20
    • Andre
      18 Mar 20
  61. ali
    01 Apr 20
    • Andre
      01 Apr 20
  62. Athiya
    11 Oct 20
    • Andre
      11 Oct 20
  63. Anonymous
    21 Sep 21
  64. japoy
    13 Sep 23

Add Comment