Home / HTML / Belajar Html – Pengertian Tag, Atribut dan Element HTML

Belajar Html – Pengertian Tag, Atribut dan Element HTML

Dalam Postingan ini akan dibahas tentang cara penulisan HTML. Kita akan mulai dengan mempelajari pengertian tag, element, dan atribut pada HTML, melihat struktur dasar dari kode HTML, mengenal aturan penulisan HTML, serta melakukan validasi kode HTML agar memenuhi standar W3C. Tag, atribut dan element adalah 3 bagian inti yang membangun

HTML. Mari kita bahas sejenak pengertian ketiga aspek ini.

Pengertian Tag

<!DOCTYPE html>
  <html>
   <head>
     <meta charset="UTF-8">
       <title>Belajar HTML</title>
  </head>
  <body>
  <h1>Belajar HTML</h1>
  <p>Hello World…</p>
  </body>
  </html>

Dari file hello_world.html diatas  yang telah kita jalankan dalam posting sebelumnya, tentunya anda sudah mengetahui bahwa file HTML ditulis dengan menggunakan tanda-tanda seperti <html>, <head>, <body>atau <p>. Tanda-tanda ini dikenal dengan sebutan HTML tag.

Tag di dalam HTML berfungsi untuk memberi tahu web browser apa dan bagaimana sebuah teks harus ditampilkan. Sebagaimana yang telah kita pelajari, file HTML hanyalah sebuah file text biasa. Web browser lah yang akan memproses file tersebut dan menampilkan hasilnya. Sebagian besar tag-tag HTML ditulis secara berpasangan, yang terdiri dari tag pembuka dan tag penutup. Tag pembuka ditulis menggunakan kurung siku, seperti <p>. Sedangkan tag penutup ditulis dengan menambahkan tanda garis miring atau slash seperti </p>. Tanda p disini berarti paragraf, dimana kita memberitahukan kepada web browser bahwa seluruh teks yang berada diantara tag pembuka <p> dan tag penutup </p> adalah sebuah paragraf.

Sebagai contoh, jika saya ingin membuat struktur teks yang terdiri dari 2 paragraf, maka saya menulisnya sebagai berikut:

<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua </p>

Ketika web browser membaca kode diatas, teks diantara tag <p> dan tag </p> akan ditampilkan sebagai paragraf yang terpisah. Setiap tag memiliki fungsi dan peran masing-masing. Total, terdapat sekitar seratusan tag di dalam HTML. Walaupun HTML memiliki banyak tag, tidak semuanya harus digunakan. Sebagai contoh, tag <p> akan sangat sering kita jumpai, tetapi tag <wbr> relatif jarang ditemukan. Dalam buku ini saya akan membahas sebagian besar tag-tag yang ada di dalam HTML, namun kita akan fokus kepada tag-tag yang sering digunakan dan memiliki peran penting untuk membuat struktur halaman. Dalam menjalankan tugasnya, tag HTML memerlukan atribut.

Pengertian Atribut

Atribut adalah informasi tambahan yang ditulis pada tag pembuka. Fungsi dari atribut ini bermacam-macam tergantung nilai dan pada tag mana ia ditempatkan. Beberapa atribut bersifat umum dan bisa digunakan dalam seluruh tag (dikenal sebagai global atribut), tetapi kebanyakan hanya berfungsi untuk tag tertentu saja. Atribut terdiri dari pasangan nama atribut dan nilai atribut. Sebagai contoh, untuk menambahkan atribut class dengan nilai pertama ke dalam tag <p>, cara penulisannya adalah sebagai berikut:

<p class="pertama">Ini adalah paragraf pertama</p>

Penulisan nilai dari atribut boleh menggunakan tanda kutip dua ( “ ) seperti diatas, atau boleh juga menggunakan tanda kutip satu ( ‘ ) seperti contoh berikut:

<p class='pertama'>Ini adalah paragraf pertama</p>

Dalam HTML, penulisan nilai atribut diantara tanda kutip sebenarnya bersifat opsional (boleh tidak ditulis). Contoh diatas juga bisa dibuat sebagai berikut:

<p class=pertama>Ini adalah paragraf pertama</p>

Penulisan nilai atribut tanpa tanda kutip seperti ini tidak salah dan tetap valid di dalam HTML. Akan tetapi, jika nilai atribut terdiri dari 2 kata atau lebih, maka kita harus menggunakan tanda kutip, seperti contoh berikut:

<p class="pertama penting">Ini adalah paragraf pertama dan penting</p>

Belajar Html - Pengertian Tag, Atribut dan Element HTML

Pengertian Element

Istilah ketiga yang masih berkaitan dengan tag dan atribut adalah element. Di dalam HTML, element adalah satu bagian utuh yang terdiri dari tag, atribut, dan seluruh teks yang berada di antara tag pembuka dan penutup. Agar lebih jelas, konsep dari element ini dapat anda lihat dalam gambar dibawah ini.

Belajar Html - Pengertian Tag, Atribut dan Element HTML

Dari gambar diatas kita dapat melihat bahwa element mencakup tag, atribut dan seluruh isi dari tag tersebut, termasuk jika didalamnya juga terdapat tag lain.

Belajar Html - Pengertian Tag, Atribut dan Element HTML

Tag, atribut dan element adalah inti dari HTML. Kita akan mempelajarinya sepanjang buku ini.

About admin

Check Also

Sejarah dan Perkembangan Bahasa HTML

Belajar HTML – Title Element

Tag <title> mungkin menjadi tag paling penting di bagian <head>. Tag ini berfungsi untuk menampilkan …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *