Tag, atribut dan element adalah 3 bagian inti yang membangun HTML. Mari kita bahas sejenak
pengertian ketiga aspek ini.
Pengertian Tag
Dari file hello_world.html yang telah kita jalankan dalam bab 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 <br> relatif jarang ditemukan.
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 kedalam 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>
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.
Struktur Dasar 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.
adapun Struktur HTML adalah sebagai berikut.
Jika diperhatikan, sebagian besar tag-tag diatas saling berpasangan, kecuali tag <!DOCTYPE
html> dan <meta charset="UTF-8">. Beberapa tag juga berada di dalam tag lain. Mari kita bahas
mulai dari baris pertama.
DTD: Document Type Declaration
Pada baris pertama file hello_world.html, terdapat tag <!DOCTYPE html>. Tag khusus ini
dikenal dengan sebutan DTD (Document Type Declaration) atau doctype. DTD berfungsi untuk
menginformasikan web browser tentang aturan penulisan dari suatu dokumen.
DTD berasal dari sistem SGML (bahasa markup dimana HTML berasal). Di dalam SGML,
setiap dokumen harus berisi penjelasan mengenai tipe dan jenisnya, dan harus ditulis pada baris
pertama.
Sebelum HTML5, penulisan DTD di dalam HTML sangat panjang dan hampir mustahil untuk
dihafal. Sebagai contoh, berikut adalah DTD untuk HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Tag <html>
Setelah penulisan DTD, struktur halaman HTML kemudian diikuti dengan tag <html>. Dapat
anda perhatikan bahwa tag <html> akan ‘membungkus’ seluruh kode-kode HTML lain.
Tag pembuka <html> berada di baris paling atas setelah <!DOCTYPE html>, dan tag penutup
</html> berada di baris paling akhir dari kode HTML. Seluruh tag HTML lain harus berada
didalam tag ini.
Di dalam tag <html>, bisa diletakkan atribut lang. Atribut ini diisi dengan dua digit kode
bahasa yang akan digunakan untuk isi website. Sebagai contoh, jika kita membuat website
dengan bahasa indonesia, bisa menulis tag <html> sebagai: <html lang="id">. Atau <html
lang="en">jika akan membuat website dengan bahasa inggris.
Tag <head>
Tag <head> berfungsi sebagai ‘penampung’ berbagai tag yang umumnya tidak akan terlihat
dalam web browser. Tag-tag di dalam bagian <head> berfungsi untuk memberikan informasi
tambahan mengenai halaman yang sedang diproses, atau menyediakan referensi ke file lain
(seperti file CSS atau JavaScript).
Beberapa tag HTML lain yang biasa terdapat pada bagian <head> adalah: <meta>, <title>, dan
<link>.
Tag <meta>
Tag <meta>merupakan singkatan dari metadata. Metadata adalah data yang berisi informasi
tentang suatu dokumen. Tag <meta> berisi informasi/instruksi mengenai halaman HTML yang
sedang dijalankan.
Salah satu tag <meta> yang terdapat dalam struktur diatas adalah <meta charset="UTF-8">.
Tag ini akan mengistruksikan web browser untuk menggunakan karakter set UTF-8 dalam
memproses halaman HTML.
Tag <title>
Tag <title> merupakan satu dari sedikit tag yang bisa terlihat di web browser yang berada pada
bagian <head>.
Sesuai dengan namanya, tag ini berfungsi untuk membuat title dari sebuah halaman. Title adalah
teks yang ditampilkan pada bagian atas jendela web browser. Selain itu, jika kita men-bookmark
sebuah halaman, title inilah yang akan menjadi nama bookmark tersebut.
Tag <body>
Tag <body> berfungsi sebagai penampung (container) dari seluruh kode HTML yang tampil di
dalam web browser. Disinilah terletak 90% tag-tag HTML yang akan kita tulis nantinya.
Tag <h1> dan <p>
Tag <h1> merupakan singkatan dari “header1”, yang digunakan untuk membuat struktur judul
di dalam HTML. HTML menyediakan 6 tipe header, mulai dari <h1>, <h2>, sampai dengan <h6>.
Tag <p> adalah singkatan dari “paragraf” yang digunakan untuk…(yah) membuat paragraf. Saya
akan membahas tag <h1> dan tag <p> dengan lebih detail dalam bab selanjutnya.
