Website merupakan berkas dokumen yang ada seperti koran, majalah atau buku dalam bentuk digital. Memiliki struktur konten yang serupa layaknya dokumen sehari-hari yang kita baca, pada website juga memuat judul, gambar yang ditampilkan dan teks dalam bentuk paragraf. Berkas HTML dasarnya memiliki struktur yang nampak seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Heading Utama</h1>
<p>Sebuah Paragraph.</p>
</body>
</html>
Setelah mempelajari di atas, kita dapat mengetahui bahwa struktur dasar HTML dituliskan dari beberapa elemen yang pada setiap elemen HTML memiliki dua tag, yaitu pembuka tag <> dan penutup tag </> atau penggunaan satu tag untuk gambar <img />, garis <hr/>, enter <br/> dan masih banyak lagi. Lihat berikut untuk lebih jelasnya ya.
<nama tag>conten</nama tag>
<p> aku sedang makan </p>
<img src='link gambar'/>
Di antara tag pembuka dan penutup sebuah elemen, elemen tersebut kita dapat meletakkan sebuah konten dalam betuk teks. Teks tersebut dapat berupa teks biasa ataupun teks yang mengandung sebuah elemen HTML lain. Contohnya, elemen <html> terdapat konten seperti elemen <head> dan juga elemen <body>. Pada elemen <head> terdapat konten berupa elemen <title> yang di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan dan meta yang berisi informasi detai tentang web. Begitu pula dengan elemen yang lain, sehingga menghasilkan hirarki elemen HTML nampak seperti ini.
Elemen HTML ini digunakan untuk memberitahukan bahwa ini merupakan sebuah berkas HTML. Seluruh elemen yang lain tentunya dituliskan pada konten elemen ini.
Elemen HEAD atau <head> pada berkas HTML sebagai tempat disimpannya data informasi dari dokumen HTML. Informasi dapat berupa elemen seperti meta, style atau link. Dan juga pada elemen ini, judul dari dokumen HTML ini didefinisikan dengan menggunakan elemen <title>. Berikut contoh refrensi elemen yang berada pada konten head:
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
Pada HTML v 4.01, elemen <head> wajib ada dalam sebuah berkas HTML dikarenakan web tanpa head akan terlihat aneh. Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di dalamnya:
<head>
<meta charset="utf-8">
<title>Judul halaman</title>
<style> Style </style>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Judul halaman</title> <style> Style </style>
</head>
<body>
<h1>Heading Utama</h1>
<p>Sebuah Paragraph.</p>
</body>
</html>
Elemen Body atau <body> ini memiliki fungsi untuk menampilkan seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman website. Maka dari itu, elemen ini digunakan untuk seluruh konten atau elemen yang ditampilkan ke dalam jendela browser. Silakan coba tuliskan kode berikut, simpan dalam format HTML dan jalankan pada browser:
<html>
<head>
<title>Ini merupakan judul dari dokumen HTML</title>
</head>
<body>
<h1>header yang diletakan di dalam elemen body</h1>
<p>Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten body, sehingga konten ini dapat dilihat oleh pengguna pada jendela browser.</p>
</body>
</html>
Maka seluruh konten yang dituliskan di dalam elemen <body> akan nampak pada browser.
Kecuali jika kita ingin menuliskan sebuah pesan atau komentar pada berkas HTML, yang kita perlu gunakan yaitu commenting tag (<!-- -->). Semua yang dituliskan di antara tag komentar tidak akan memberikan pengaruh apa pun dan tidak akan tampil pada halaman website kecuali jika menggukan tools browser seperti source view atau juga menggunakan inspect elemen, berikut merupakan contok membuat commenting tag:
<!-- Ini merupakan sebuah komentar -->
<!-- Ini merupakan
sebuah komentar yang
terdiri lebih dari satu baris-->
Sebuah komentar ini berguna untuk memberikan label dan mengorganisir sebuah dokumen yang panjang agar terlihat lebih rapi dan terlebih ketika kita bekerja secara tim.