HTML Basic
HTML bukanlah bahasa pemrograman (seperti JavaScript atau PHP), melainkan bahasa markah (markup language). Tugas utamanya adalah memberi struktur pada konten. HTML memberitahu browser mana yang merupakan judul, paragraf, gambar, atau tautan.
Struktur Dasar Tag HTML
HTML terdiri dari serangkaian elemen. Elemen-elemen ini dibentuk oleh Tag. Bayangkan tag sebagai label yang kita tempelkan pada konten agar browser tahu cara menampilkannya.
Sebuah elemen HTML standar biasanya terdiri dari tiga bagian utama:
- Opening Tag (Tag Pembuka): Menandai awal dari elemen. Ditulis dengan kurung siku
<nama_tag>. - Content (Konten): Informasi yang ingin ditampilkan (teks, gambar, dll).
- Closing Tag (Tag Penutup): Menandai akhir dari elemen. Ditulis dengan garis miring
</nama_tag>.
Contoh penulisan:
<p>Ini adalah sebuah paragraf.</p><p>adalah tag pembuka.Ini adalah sebuah paragraf.adalah kontennya.</p>adalah tag penutup.
Atribut (Attributes)
Tag seringkali memiliki informasi tambahan yang disebut atribut. Atribut selalu diletakkan di dalam tag pembuka. Formatnya adalah nama="nilai".
Contoh pada tag link:
<a href="[https://google.com](https://google.com)">Ke Google</a>Di sini, href adalah atribut yang berisi tujuan link, dan Ke Google adalah teks yang bisa diklik.
Jenis Tag: Open-Close vs Self-Closing
Dalam HTML, ada dua jenis perilaku tag yang perlu kamu pahami:
1. Open and Close Tag (Tag Berpasangan)
Sebagian besar tag HTML bersifat berpasangan. Mereka membungkus konten di antara tag pembuka dan penutup. Jika kamu lupa menulis tag penutup, tampilan website bisa menjadi berantakan karena browser bingung di mana elemen tersebut berakhir.
Contoh:
<h1>Judul</h1><button>Klik Saya</button><div>Sebuah kotak pembungkus</div>
2. Self-Closing Tag (Void Element)
Beberapa tag tidak memiliki konten teks di dalamnya, sehingga mereka tidak membutuhkan tag penutup. Tag ini disebut Void Elements atau Self-Closing Tags.
Biasanya tag ini digunakan untuk menyisipkan elemen visual atau metadata.
Contoh:
<img src="foto.jpg">(Menyisipkan gambar)<br>(Membuat baris baru/enter)<hr>(Membuat garis horizontal)<input type="text">(Kolom isian form)
Info Penting
Dalam HTML5 standar, tanda garis miring penutup pada self-closing tag bersifat opsional (misalnya <br>).
Membedah Struktur Dokumen HTML
Setiap file HTML yang valid harus mengikuti struktur kerangka tertentu. Mari kita bedah struktur yang sudah kita buat pada artikel sebelumnya.
Deklarasi DOCTYPE
<!DOCTYPE html>Baris paling atas ini bukan tag HTML, melainkan instruksi untuk browser. Kode ini memberitahu browser bahwa dokumen ini menggunakan standar HTML5. Tanpa ini, browser mungkin akan merender halaman dalam "Quirks Mode" (mode jadul) yang bisa merusak tampilan.
Root Element (html)
<html lang="id">
...
</html>Ini adalah elemen akar. Semua kode lain harus berada di dalam tag ini. Atribut lang="id" membantu mesin pencari dan pembaca layar (screen reader) mengetahui bahwa konten website ini berbahasa Indonesia.
Bagian Head (Kepala)
<head>
<meta charset="UTF-8">
<title>Judul di Tab Browser</title>
</head>Area ini berisi metadata. Konten di sini tidak tampil di halaman web utama.
meta charset="UTF-8": Memastikan browser bisa menampilkan karakter khusus, simbol, dan emoji dengan benar.title: Teks yang muncul di tab browser atau hasil pencarian Google.
Bagian Body (Tubuh)
<body>
<h1>Konten Utama</h1>
</body>Inilah tempat kamu bekerja. Semua teks, gambar, video, dan tombol yang dilihat pengunjung website diletakkan di dalam tag <body>.