Pemahaman Struktur Dokumen HTML

Setelah selesai membuat halaman web pertama (lihat artikel sebelumnya disini), kini kita perlu mengetahui dan memahami istilah dan struktur dokumen html yang telah kita susun. Seluruh kode yang telah kita tulis pada latihan sebelumnya disebut dengan sintaks. Berikut ini merupakan beberapa penjelasannya.

Struktur Data HTML

1. Doctype
Doctype adalah deklarasi untuk memberitahu web browser mengenai versi html yang digunakan pada sebuah halaman web. Penulisannya di bagian paling awal dokumen html kita. Pada contoh dibawah ini, Doctype memberitahu browser bahwa dokumen yang dibuat adalah HTML5.

<!DOCTYPE html>

Seperti yang telah diulas di awal, HTML memiliki beberapa versi. Sekedar untuk referensi, deklarasi Doctype pada HTML 4.01 Transitional adalah sebagai berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Adapun deklarasi Doctype pada XHTML 1.1 adalah sebagai berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Pendeklarasian Doctype di HTML5 disederhanakan, sehingga lebih mudah untuk dihafal. Mengingat kita akan membangun sebuah web yang modern, tentunya gunakanlah HTML5.

2. Root
Root adalah elemen dasar, yaitu kode mulai dari <html> sampai </html>. Doctype tidak termasuk kedalam Root. Semua elemen lain harus berada dalam Root.

3. Elemen
Elemen adalah bagian-bagian dari dokumen HTML. Contohnya seperti kode mulai dari <body> sampai </body> disebut elemen body. Kode mulai dari <title> sampai </title> disebut elemen title atau judul. Kode mulai <p> sampai </p> disebut elemen paragraf, dan seterusnya. Pada artikel selanjutnya kita akan bahas mengenai elemen-elemen lainnya.

4. Tag
Tag adalah kode untuk menandai awal dan akhir sebuah elemen di dalam HTML. Tag menggunakan kode tanda kurung sudut < ... > </ ... >. Contoh <html></html>, <head></head>, <body></body> dan lain sebagainya.

5. Tag Name
Atau nama tag adalah karakter yang ada di dalam tanda tag. Misalnya nama tag pada contoh berikut ini: html, body, head, body dan seterusnya.

6. Opening Tag
Adalah tanda awal sebuah elemen seperti <html>, <head>, <title> dan lain-lain.

7. Closed Tag
Yaitu tanda akhir sebuah elemen dengan menambahkan kode '/' atau slash di dalam tag. Contoh </html>, </body> dan sebagainya.

8. Single Tag
Single tag atau tag tunggal adalah tag khusus tanpa menggunakan tag penutup, seperti tag <img> adalah tag tunggal.
tag ini lazim disebut tag self-closing atau element void. Selain <img>, tag tunggal di HTML5 meliputi <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <input>, <link>, <meta>, <param> dan <source>.

9. Attribute
Atribut adalah informasi atau aturan tambahan yang disisipkan dalam sebuah tag. Misalnya tag <a> disisipi atribut href='http://google.com'. <a> berfungsi untuk membuat link, atributnya berisi informasi mengenai tujuan atau target link-nya. Bagian href disebut atibut sedangkan http://google.com adalah nilai atributnya.

10. Comments
Komentar adalah baris kode yang diabaikan oleh browser dan tidak muncul di halaman web. Komentar di tandai dengan simbol awal . Komentar hanya berfungsi sebagai catatan si pembuat kode untuk mengingat fungsi kode yang di terapkan pada halaman web nya. Seperti contoh ini:

<!-- script fungsi otomatis -->
... source code ...

11. Text
Teks adalah isi yang ada dari sebuah elemen, baik berupa huruf, angka atau simbol.

12. Special Characters
Karakter khusus adalah kombinasi dari karakter tertentu yang digunakan untuk menampilkan suatu simbol di halaman web. Untuk menampilkan simbol '&' menggunakan kode ini: & bukan mengetikan langsung. Lalu untuk menampilkan simbol hak cipta '©' menggunakan kode seperti &copy.

Daftar karakter khusus dan kode simbol yang dihasilkan dapat kita lihat disini: http://www.degraeve.com/reference/specialcharacters.php. Namun untuk simbol dan icon yang lebih modern dan simple kita bisa menggunakan simbol dari sini http://fontawesome.io/ (klik disini cara menggunakan simbol dari font awesome).

Font Awesome

Beberapa hal yang perlu dipahami mengenai kode HTML dan tampilannya di web browser antara lain:

Dokumen HTML tersusun atas dua elemen utama, yaitu elemen head dan elemen body
Teks diantara tag pembuka <title> sampai penutup </title> akan muncul sebagai judul halaman web di jendela tab web browser.
Selain elemen title, elemen lain yang berada di elemen utama head tidak akan ditampilkan di web browser dan hanya sebagai informasi.
Apa yang ditulis pada elemen utama body, akan di ditampilkan di web browser, kecuali komentar. Elemen body inilah konten halaman web yang biasa kita baca di internet.

Sebagai catatan, file HTML dapat disimpan dengan ekstensi file (dot)html maupun (dot)htm.