Struktur kode HTML
Pada topik sebelumnya, kita hanya mengetikkan hello world di dalam file hello.htm. Sebetulnya teks hello world tersebut masih belum sempurna. Karena HTML memiliki struktur yang harus diikuti sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<!-- Kode head -->
<title>Hello HTML</title>
</head>
<body>
Halo dunia HTML
</body>
</html>
Sebelum membahas struktur tersebut lebih lanjut, sebaiknya terlebih dahulu kita bahas secara singkat mengenai elemen, tag dan atribut di dalam bahasa Markup seperti HTML.
Elemen, Tag dan Atribut pada HTML
Tag pada HTML adalah potongan teks yang diawali dengan < dan diakhiri dengan >. Terdapat tiga jenis tag, yaitu tag pembuka (opening tag), tag penutup (closing tag), dan tag yang menutup dirinya sendiri (self closing tag).
Tag pembuka adalah tag muncul terlebih dahulu. Murni merupakan teks yang diapit oleh tanda < dan >. Contoh tag pembuka: <table>, <h1>, <strong>, <a>.
Tag penutup sama dengan tag pembuka, tetapi diawali dengan / dan tidak dapat berisi atribut. Contoh tag penutup: </table>, </h1>, </strong>, </a>.
Self closing tag membuka dan menutup dirinya sendiri. Biasanya ditandai dengan spasi, garis miring dan simbol lebih besar sebagai penutupnya. Contoh self closing tag: <br />, <img />, <hr />. Tidak jarang, self closing tag diketik tanpa tanda garis miring di belakangnya sepeti <br>, <img> dan <hr>. Browser pada umumnya cukup pintar dan pemaaf untuk mengenali hal ini. Akan tetapi sangat disarankan untuk mengikuti format yang benar.
Tag di dalam HTML biasanya berpasangan mengapit isi di dalamnya. Sepasang tag beserta isinya biasanya disebut elemen. Terkecuali self-closing-tag yang menutup dirinya sendiri, hanya terdiri dari satu tag yang membuka sekaligus menutup dirinya sendiri. Self closing tag bisa dianggap satu elemen HTML.
Teks di dalam suatu tag menentukan jenis dan perilaku tag tersebut. Misalkan tag <strong> akan menyebabkan teks yang diapit oleh tag pembuka dan penutupnya dicetak tebal. Elemen <strong>Tebal</strong> akan tampak seperti:
Tebal
Atribut adalah parameter pada elemen HTML yang diketikkan pada tag pembuka. Atribut ini mengatur lebih lanjut perilaku suatu elemen HTML. Misalkan <a href="http://facebook.com">link ke pesbuk</a> akan tampil seperti:
Atribut href mengatur situs yang dituju bila tag <a> diklik. Terdapat juga atribut seperti color dan bgcolor yang mengatur warna teks. Akan tetapi atribut pengaturan ukuran warna dan teks tersebut sudah jarang dipakai karena kemunculan teknologi CSS yang lebih mudah. Akan tetapi atribut seperti href, src, id, class, style tetap tidak dapat tergantikan.
Penjelasan struktur HTML
Mari kita kembali ke contoh pertama di atas. Pada contoh tersebut, paling atas terdapat tag doctype: <!DOCTYPE html>. Tag doctype merupakan tag khusus yang menyatakan format HTML yang dipakai. Tag ini secara khusus mengatakan pada browser untuk mengolah HTML yang diketik berikutnya menggunakan standar HTML 5.
Struktur HTML yang lengkap terdiri dari elemen html, dan di dalamnya terdapat elemen head dan body. Ini adalah struktur minimal sebuah dokumen / file html.
Isi di dalam elemen head tidak tampil ke layar dan biasanya diisi dengan elemen-elemen yang mempengaruhi perilaku dokumen html tersebut. Elemen head dapat berisi misalnya:
- title, yaitu judul yang tampil pada tab browser
- link rel="shortcut icon", yaitu ikon pada tab browser
- script dan style, yaitu skrip Javascript atau CSS
- meta name="viewport", yaitu keterangan lebih lanjut mengenai target ukuran layar
- meta name="description", yaitu keterangan topik untuk search engine
Sedangkan isi di dalam elemen body adalah isi yang akan ditampilkan ke layar browser. Kebanyakan orang lebih senang membahas elemen-elemen yang berada di dalam elemen body.
Komentar pada HTML
Komentar adalah bagian dari skrip program yang tidak diolah. Pada HTML, komentar diketik dalam format
<!-- komentar apa saja -->
Diawali dengan <!-- dan diakhiri dengan -->. Dapat berisi teks apa saja yang dapat diketik sebagai suatu keteranga di dalam dokumen html.