Rabu, 26 April 2017

Pengertian Tag, Element, dan Atribut pada HTML

Kali ini saya akan melanjutkan tutorial yang kemarin, mungkin sebelumnya kamu sudah belajar bagaimana cara menjalankan file html. namun sekarang kita akan belajar apa itu tag element, dan atribut pada HTML.

Pengertian Tag dalam HTML

Karena sebagai bahasa markup, HTML juga membutuhkan cara untuk memberitahu kepada web browser untuk apa fungsi dan kegunaan sebuah text. Mungkin saja text tersebut ditulis sebagai sebuah paragraf, link, atau sebagai list? Nah, pada HTML, tanda inilah yang dikenal dengan istilah tag.

Pengertian Tag, Element, dan Atribut pada HTML

Hampir semua tag pada HTML ditulis secara berpasangan, yaitu tag pembuka dan tag penutup, dimana terdapat objek yang dikenai perintah tag berada pada antara tag pembuka dan tag penutup.

Yang dimaksud Objek disini yaitu dapat berupa sebuah text, video, maupun gambar. Penulisan tag berada di antara 2 kurung siku : “<” dan “>”.

Berikut adalah format dasar penulisan tag pada HTML:

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

Sebagai contoh, perhatikan kode HTML berikut :

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

Penjelasan :
  • <p> adalah sebuah tag pembuka, dalam contoh ini p adalah sebuah tag untuk paragraf.
  • </p> adalah sebuah tag penutup sebuah paragraf. 

Jika kamu lupa memberikan penutup pada tag, maka pada umumnya semua browser akan “ memaafkan ” kesalahan ini dan browser tetap akan menampilkan hasilnya seolah-olah kamu menuliskan tag penutup. Meskipun hal ini sepertinya lebih memudahkan, tapi tidak jarang malah akan membuat kamu bingung nantinya.

Sebagai contoh lainnya, jika kamu ingin membuat sebuah text dalam suatu paragraf yang di tulis tebal atau miring, pada HTML maka dapat ditulis sebagai berikut:


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


Maka hasil dari kode HTML diatas, akan diterjemahkan oleh browser menjadi:

"  Ini adalah paragraf. kumpulan beberapa kalimat. Paragraf ini terdiri dari 2 kalimat.  "

Penjelasan :


Tag <i> pada syntax HTML diatas berfungsi untuk menampilkan text secara garis miring ( italic ), dan tag <b> berfungsi untuk menebalkan tulisan ( bold ).

Namun terdapat pengecualian bagi beberapa tag yang tidak berpasangan, contohnya seperti <br> berfungsi untuk break ( pindah baris ) atau <hr> yang berfungsi untuk horizontal line ( garis horizontal ). Tag ini juga dikenal dengan sebutan Self closing tag atau yang biasa disebut void tag, karena untuk penulisannya bisa ditulis dengan <br> ataupun <br />.

Pada awalnya, HTML tidak case-sensitif, maksudnya dalam artian penulisan tag <p> maka dianggap sama juga dengan tag <P>. Karena pada awal kemunculan HTML, para programmer web pada umumnya menggunakan huruf besar pada seluruh tag. hal ini agar dapat membedakan dengan text yang berupa isi dari suatu web. Namun varian HTML, xHTML mewajibkan penulisan huruf kecil untuk semua tag. Maka dari itu pada HTML5, sebenarnya aturan ini tidak diharuskan. Namun karena sudah menjadi kebiasaan para web programmer saat ini untuk menggunakan huruf kecil pada seluruh tag.

Pengertian Element dalam HTML

Element merupakan isi dari tag yang berada antara suatu tag pembuka dan tag penutup, termasuk tag itu sendiri dan juga atribut yang dimikinya ( jika ada ). Sebagai contoh coba kamu perhatikan kode HTML berikut ini :


<p> Ini adalah  paragraf </p>


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

Element tidak mesti hanya berisi text, namun juga bisa diisi dengan tag yang lainnya.

Contoh:

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


Dari contoh diatas, <p> Ini adalah <em> paragraf </em> </p> merupakan elemen dari p. Memang dalam pembahasan maupun tutorial mengenai HTML, maka tidak jarang istilah “tag” dan “element” saling dipertukarkan.


Pengertian Atribut dalam HTML

Atribut ialah sebuah informasi tambahan yang diberikan pada suatu tag. Informasi ini bisa berupa sebuah instruksi untuk mengganti warna dari text, besar huruf dll. Setiap atribut memiliki pasangan nama dan nilai (value) tersendiri, dan dapat ditulis dengan name=”value”.

Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).

Contoh kode pada HTML :

<a href="http://anggiabdkhalid.blogspot.co.id/"> ini adalah sebuah contoh link </a>


Pada syntax HTML diatas, href=”http://anggiabdkhalid.blogspot.co.id/” adalah sebuah atribut. href merupakan nama dari suatu atribut, dan http://anggiabdkhalid.blogspot.co.id/ adalah nilai atau value dari atribut tersebut.

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

Pada HTML terdapat banyak atribut yang beberapa diantaranya hanya cocok pada tag tertentu saja. Contohnya, atribut “href” diatas yang hanya digunakan pada tag <a> saja dan beberapa tag lain.

Mugkin sekian dulu untuk artikel mengenai tag, element, dan atribut pada HTML. sampai jumpa pada artikel selanjutnya