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:
Hello HTML Halo dunia HTMLSebelum membahas struktur tersebut lebih lanjut, sebaiknya terlebih dahulu kita bahas secara singkat mengenai elemen, tag dan atribut di dalam bahasa Markup seperti 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: ,
, , .Tag penutup sama dengan tag pembuka, tetapi diawali dengan / dan tidak dapat berisi atribut. Contoh tag penutup:
Self closing tag membuka dan menutup dirinya sendiri. Biasanya ditandai dengan spasi, garis miring dan simbol lebih besar sebagai penutupnya. Contoh self closing tag:
,
Tutup Tag Dengan Benar
Jangan lupa untuk menutup tag karena jika lupa akan menimbulkan kerancuan pada hasil yang dikeluarkan.
Contoh salah
<h1>Judul Satu <p>Ini paragrafSeharusnya
<h1>Judul Satu</h1> <p>Ini paragraf</p>Selain itu pada saat membangun website nantinya kita akan menemukan tag yang bertumpuk, artinya dalam tag akan ada tag lagi. Pastikan urutan untuk menutup tag yang bertumpuk itu tepat. Karena jika tidak tepat akan mengakibatkan kode HTML yang ditulis tidak valid. Contoh salah dan benar untuk menutup tag bertumpuk ini bisa dilihat pada contoh di bawah.
Contoh salah
Seharusnya
<p><b><i><u>Selamat Datang</u></i></b></p>Walaupun dalam beberapa tag bertumpuk hasilnya bisa dibilang masih sesuai dengan yang diinginkan, namun penulisan tag yang keliru tempat tersebut sangat salah.
Tag yang Wajib Ditulis
Ada banyak tag di HTML, beberapa diantaranya bersifat wajib untuk ditulis, karena bila tidak ditulis maka akan menyebabkan error validasi menurut W3C. Tag-tag yang wajib ditulis di dokumen HTML adalah sebagai berikut:
- <!DOCTYPE html> – deklarasi tipe dokumen
- <html> – tag pembuka
- <head> – kepala halaman
- <title> – judul halaman
- <body> – tubuh halaman
Namun tenang saja, karena masalah ini sudah diatasi oleh beberapa teks editor, contohnya sublime, dengan hanya mengetikkan html maka template untuk membuat dokumen html langsung terbentuk dalam sekejap.
Apa itu Elemen di HTML?
Elemen HTML merupakan semua hal yang didefinisikan mulai dari tag pembuka, konten tag, dan tag penutup.
Lebih jelasnya dapat dilihat pada gambar di bawah ini
Nested Elemen
Isi dari elemen tidak selalu berupa teks, sering dijumpai juga suatu elemen memiliki isi berupa elemen lain, yang mana hal ini disebut dengan nested elemen atau elemen bersarang.
Untuk lebih jelasnya perhatikan gambar berikut:
Empty Elemen HTML
Pembahasan empty elemen atau void elemen sempat disinggung di awal artikel. Empty elemen atau void elemen adalah elemen yang tidak memiliki tag penutup. Ia hanya terdiri dari satu tag pembuka dengan terkadang diakhiri tanda slash sebelum tanda >.
Salah satu tag yang masuk ke dalam kategori ini adalah tag
yang mewakili line break atau garis baru.