Skip to main content

Penjelasan Struktur HTML

Congratss. Website pertama kalian sudah jadi. Dan sekarang kita akan breakdown kodenya.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website Pertamaku</title>
</head>
<body>
	<h1>Halo Websiteku</h1>
</body>
</html>

Tags​

Sebelum jelasin strukturnya baris per baris, aku berikan salah satu konsep HTML yaitu Tag. Tag adalah element utama untuk menstruktur website kalian menggunakan HTML. Tag dapat ditulis seperti ini: <nama-tag></nama-tag>. Ada banyak tag di html seperti yang sudah kalian lihat sebelumnya. <html></html>, <body></body>, <h1></h1>, dan banyak lagi yang akan dibahas di bagian-bagian selanjutnya.

Ada tiga bagian dalam tag:

  • Pembuka Tag: <nama-tag>
  • Isi Tag isi konten yang akan ditampilkan dalam tag (Opsional, kadang pakai kadang engga)
  • Penutup Tag: </nama-tag>

Kalau kalian lihat lagi di bagian kode yang sudah kalian koding sebelumnya:

<body>
	<h1>Halo Websiteku</h1>
</body>

Ada dua tag yang dipakai disini. body dan h1.

Kita lihat dari tag body. Dalam kasus ini isi tag body adalah <h1>Halo Websiteku</h1> atau tag body berisi tag h1 yang di dalamnya berisi Halo Websiteku.

Tag Attribute​

Tag juga bisa memiliki atribut. Apa itu? atribut atau attribute adalah cara kita untuk memodifikasi sebuah elemen tag. Jadi seperti aturan-aturan yang bisa berikan kepada tag "Mau kita gimanain tag ini?" begitu. Dan setiap tag punya attribute mereka masing-masing. Dan ga semua attribut harus kamu hafal. Ada beberapa attribut yang biasanya ada di setiap tag seperti atribut id dan class.

Kita lihat di beberapa tag meta yang ada di dalam tag head.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Dapat dilihat ada dua tag meta. Tag meta adalah tag yang berisi metadata dari website kita. Kita lihat dari tag meta pertama, bahwa tag ini gapunya penutup "Emang bisa?" bisaa. Ada beberapa tag yang memang gaperlu pakai isi dan aturan mereka biasanya lewat atribut. Kita lihat bahwa atribut dari tag meta pertama adalah charset dengan value atau nilai "utf-8" disini kita set metadata charset dengan "utf-8. Dan sekarang di tag meta kedua ada dua atribut: name dan content dengan aturannya.

Begitulah kawan-kawan gambaran awal dari penggunaan tag di HTML. Untuk lebih dalamnya soal atribut akan kita bahas di bagian selanjutnya. Untuk sekarang kuharap kalian udah ada gambaran mengenai tag di HTML okay?

Penjelasan Tiap Bagian​

Kuberikan lagi kode yang akan kita bahas:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website Pertamaku</title>
</head>
<body>
	<h1>Halo Websiteku</h1>
</body>
</html>

Kita mulai dari yang paling atas.

1​

<!DOCTYPE html>

Disini kita memberi tahu browser versi HTML yang digunakan (HTML 5), supaya browser bisa menampilkan halaman dengan aturan yang benar. Jadi sebenere ini bukan tag HTML, tapi instruksi untuk browser: "Ini dokumen HTML 5, tolong tampilkan dengan aturan terbaru."

2​

<html>

Tag pembuka untuk html. Ini adalah struktur tag yang pastinya wajib ya agar struktur html-nya jelas. Intinya ini tuh kek awal mula bagian utama dari website kita.

3​

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website Pertamaku</title>
</head>

Bagian head. "Apa ini?". Di dalam bagian head berisi tentang aturan-aturan atau settings dari website kita. Bisa berisi metadatanya apa aja, modul-modul apa yang mau diimport, hingga judul dari website-nya.
Kita lihat bahwa ada dua bagian metadata disitu. Kemudian ada tag title yang berisi judul Website Pertamaku yang akan ditampilkan di tab browser. Yep, sekarang kalian tahu kan judul di tab browser itu ditulisnya dimana? heheh.

Oiya kalian mungkin bertanya. "Fungsi metadatanya itu apa sih kak yang ditulis disitu?" Jadi itu tuh buat ngasih tau ke browser kalau website kita bakal responsif. Atau mendukung berbagai ukuran layar. Kan kita tahu kalau browser itu sifatnya universal, bisa kita buka di HP, Laptop, dll. Jadi pastinya butuh adaptif atau responsif dengan ukuran layar.

Jadi kalau kalian hapus kedua tag meta itu dan kalian buka html atau websitenya di HP. Pasti akan kecil textnya. Karena mereka nyesuaiin ukuran layar besar seperti monitor komputer.

Jadi dengan menggunakan metadata untuk responsif, kalau kita buka di HP. Ukurannya bakal tetap disesuaiin. Biar tetep enak dilihat.

4​

<body>
	<h1>Halo Websiteku</h1>
</body>

Bagian body seperti namanya. Ini adalah badan dari html kita. Disinilah konten website kita ditampilkan. Jadi apapun yang kalian isi disini akan ditampilkan ke browser.

Terlihat bahwa di dalam body atau badan html atau website kita terdapat <h1>Halo Websiteku</h1. Itu adalah konten yang untuk sekarang kita tampilkan. Apa itu h1? dia adalah tag untuk Heading. Kalian pasti pernah pakai Microsoft Word atau sejenisnya kan? ada tuh yang namanya heading... Ya itu... jadi dia bakal ketulis besar tebel layaknya judul. Dan ada enam heading di HTML, dari h1 sampai h6.

Setelah ini, kalau kita mau nambahain konten di website kita, kita lakukan di dalam tag body ini. Jadi di antara <body> dan </body.

Sekalian gua kasih contoh ya. Kalo aku mau ngasih subjudul misal h2 yang berisi Ini subjudul. Jadi akan kutambahin <h2>Ini subjudul</h2> di dalam body. Disini akan kutaruh di bawah elemen h1 yang sudah aku tambahin. Hasilnya:

<body>
	<h1>Halo Websiteku</h1>
	<h2>Ini subjudul</h2>
</body>

Halo Websiteku

Ini subjudul


Mudah bukan? sipp.

5​

</html>

Penutup tag html dan yap ini penutup file html atau website kita.

Hasil Website Sekarang​

Setelah membaca tiap bagian dan melakukan sedikit modifikasi (menambahkan subjudul dengan tag h2). Sekarang file html kita menjadi seperti ini.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website Pertamaku</title>
</head>
<body>
	<h1>Halo Websiteku</h1>
	<h2>Ini subjudul</h2>
</body>
</html>

Halo Websiteku

Ini subjudul


Aku harap kalian sudah bisa mengerti ya struktur dari file HTML. Kalau misal belum it's okay. Kalian bisa baca ulang lagi sampai paham, coba praktekin ulang lagi dengan ganti-ganti kode, atau bisa kontak aku biar aku jelasin lagi. Yang penting jangan pernah menyerah, okeyy? sipp. Kalau kalian siap, kita bisa lanjutt.