Struktur dasar HTML

Website serupa berkas dokumen yang ada seperti koran, majalah atau buku. Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari yang kita baca. Pada sebuah majalah terdapat judul, gambar yang ditampilkan dan teks dalam bentuk paragraf. Terkadang, jika konten tersebut panjang terdapat sub-judul untuk memisahkannya menjadi beberapa bagian.

Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki dari informasi. Misalnya, judul dengan ukuran besar merupakan judul utama dalam sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang menjelaskan informasi dengan lebih mendetail lagi.
Berkas HTML dasarnya memiliki struktur yang nampak seperti ini:




  3.     

  4.     Judul Halaman

  5.     

  6.     

  7.         
    Heading Utama

  8.         
    Sebuah Paragraph.

  9.     



Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa elemen. Pada setiap elemen HTML terdapat dua tag, yaitu pembuka tag dan penutup tag . Lihat gambar berikut untuk lebih jelasnya.
201912031641017a2703ae21734113e6d926f70dddb673.png
Di antara tag pembuka dan penutup sebuah elemen, kita dapat meletakkan sebuah konten. Konten dapat berupa teks ataupun sebuah elemen HTML lain. Contohnya, elemen  memiliki konten yaitu elemen  dan juga elemen . Lalu, elemen  memiliki konten berupa elemen  yang di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan. Begitu pula dengan elemen lainnya, sehingga hirarki elemen HTML nampak seperti ini.
20191203164238146eb7901315c49ca0b6209902e89336.png

Elemen

Hirarki elemen teratas pada berkas HTML adalah elemen HTML-nya itu sendiri. Elemen ini digunakan untuk memberitahu kepada browser bahwa ini merupakan sebuah berkas HTML sekaligus menjadi root dari sebuah berkasnya itu. Seluruh elemen lainnya tentunya dituliskan pada konten elemen ini.

Elemen

Elemen  pada berkas HTML berfungsi sebagai tempat disimpannya informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style atau link. Dan juga pada elemen ini judul dari dokumen HTML didefinisikan dengan menggunakan elemen . Berikut contoh elemen yang berada pada konten head:
  •  
Pada HTML versi 4.01, elemen  wajib ada dalam sebuah berkas HTML. Berikut contoh penulisan sebuah elemen beserta contoh konten di dalamnya:



  2.     <meta charset="utf-8">

  3.     Judul halaman

  4.      Style 



Tetapi sejak HTML5, penggunaan  dapat dihilangkan. Sehingga struktur dasar berkas HTML menjadi seperti ini:




  3.     <meta charset="utf-8">

  4.     Judul halaman

  5.      Style 

  6.     

  7.         
    Heading Utama

  8.         
    Sebuah Paragraph.

  9.     



Elemen

Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman website. Maka dari itu, elemen ini digunakan untuk menampung seluruh konten atau elemen yang ditampilkan ke dalam jendela browser. Silakan coba tuliskan kode berikut, simpan dalam format HTML dan jalankan pada browser:



  2.     

  3.         Ini merupakan judul dari dokumen HTML

  4.     

  5.     

  6.         
    header yang diletakan di dalam elemen body

  7.         
    Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten body, sehingga konten ini dapat dilihat oleh pengguna pada jendela browser.

  8.     



Maka seluruh konten yang dituliskan di dalam elemen  akan nampak pada browser.
2019120316462313645a821f206149c09f7a146e50c5a2.png
Kecuali jika kita ingin menuliskan sebuah notes pada berkas HTML, kita perlu gunakan commenting tag (). Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun, termasuk pada tampilan di jendela browser. Pada HTML, tag komentar dituliskan seperti ini:



  2. <!-- Ini merupakan

  3.   sebuah komentar yang

  4.   terdiri lebih dari satu baris -->


Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah dokumen yang panjang, terlebih ketika kita bekerja secara tim