Home / HTML / Belajar HTML – Struktur Dasar HTML

Belajar HTML – Struktur Dasar HTML

File hello_world.html yang dibawah ini  sebenarnya telah memenuhi struktur dasar dari sebuah file HTML. Mari kita lihat kode HTML tersebut:


<!DOCTYPE html>

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

Jika anda perhatikan, 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”>

HTML5 mencoba mengubah hal ini agar lebih praktis. Pengembang HTML5 (organisasi WHATWG) memutuskan bahwa HTML5 akan sepenuhnya terlepas dari aturan SMGL. Dengan kata lain, HTML5 tidak lagi bagian dari SMGL, dan merupakan bahasa markup yang sepenuhnya berdiri sendiri. Oleh karena itu, penulisan DTD sebenarnya tidak lagi diperlukan. Akan tetapi, penghapusan DTD dari HTML terkendala dengan sebuah mekanisme di dalam web browser yang dinamakan quirks mode.

Quirks mode adalah sebuah model tampilan yang digunakan web browser ketika menampilkan kode HTML yang tidak standar. Umumnya, halaman HTML yang tidak standar ini berasal dari situs website ‘tua’ yang dibuat puluhan tahun lalu.

Untuk membedakan apakah sebuah halaman web termasuk standar atau tidak, web browser akan melihat apakah di dalam dokumen terdapat DTD atau tidak. Jika tidak ditemukan, web browser akan tampil dalam quirks mode. Ketika sebuah dokumen di proses dalam quirks mode, web browser akan membuat beberapa perlakuan khusus. Misalnya, menampilkan web dengan tampilan yang berbeda. Ini akan menjadi masalah karena desain web yang telah dirancang bisa jadi berantakan. Sebagai web developer, sedapat mungkin kita harus menghindari hal ini.

Pihak WHATWG kemudian mencari solusi dengan membuat DTD sesingkat mungkin agar web browser tidak masuk ke dalam quirks mode. Caranya adalah dengan menggunakan penulisan DTD: <!DOCTYPE html>. Dengan demikian, web browser tetap menggunakan mode normal yang dinamakan Standards Compliance Mode. Posisi DTD juga harus ditulis pada baris paling awal. Beberapa web browser (terutama IE versi awal) akan masuk ke dalam quirks mode jika ditemukan ada karakter lain sebelum penulisan DTD (walaupun itu adalah sebuah spasi).

Belajar HTML - Struktur Dasar HTML

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 di dalam 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.

Atribut lang sepenuhnya opsional (boleh ditulis, boleh juga tidak). Namun anda akan sering menemukan atribut ini. Daftar lengkap tentang dua digit kode negara bisa dilihat di wikipedia.

Belajar HTML - Struktur Dasar HTML

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 menginstruksikan 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

Mengenal HTML Tree / Document Object Model (DOM)

Jika diperhatikan, tag-tag yang ada pada HTML memiliki struktur tersendiri. Struktur ini biasa disebut HTML tree (pohon HTML) atau istilah kerennya Document Object Model (DOM). Sesuai dengan istilah tersebut, kode-kode HTML dapat diibaratkan seperti pohon, dimana setiap tag saling terhubung satu sama lain. Agar lebih mudah dipahami, perhatikan gambar diagram dibawah ini.

Belajar HTML - Struktur Dasar HTML

Diagram diatas adalah struktur DOM dari kode HTML halaman hello_world.html yang kita bahas sebelumnya. Tag paling atas, yakni tag <html> disebut sebagai tag “akar” (root) karena seluruh kode HTML lain harus berada di dalam tag ini. Konsep struktur DOM ini sangat penting untuk dipahami, terutama sebagai dasar ketika mempelajari JavaScript.

Selain sebagai “pohon”, diagram diatas juga bisa dibaca seperti diagram keluarga. Sebagai contoh, tag <head> dan tag <body> berada persis dibawah tag <html>. Oleh karena itu, tag <head> dan tag <body> disebut sebagai “anak” (child) dari tag <html>, dan tag <html> disebut sebagai “induk” (parent). Begitu juga dengan tag <h1> dan <p> yang merupakan anak dari tag <body>.

Contoh diagram DOM yang kita bahas disini adalah versi sederhana dari kode HTML yang sebenarnya. Untuk halaman yang lebih kompleks, diagram diatas bisa mencapai 10 tingkatan atau lebih.

 

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 *