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>.
Tag-Tag Dasar HTML dan Fungsinya
Berikut tag yang paling sering akan kamu gunakan saat membangun struktur website.
1. Heading (Judul)
Digunakan untuk membuat judul atau sub-judul. HTML menyediakan 6 tingkat heading, dari <h1> (paling besar/penting) hingga <h6> (paling kecil).
<h1>Judul Utama Artikel</h1>
<h2>Sub Judul</h2>
<h3>Sub-sub Judul</h3>Tips SEO
Gunakan <h1> hanya satu kali per halaman untuk judul utama konten. Ini sangat penting untuk optimasi mesin pencari (SEO). Gunakan <h2> sampai <h6> untuk hierarki di bawahnya.
2. Paragraph (Paragraf)
Tag <p> digunakan untuk membungkus blok teks. Browser akan otomatis memberikan jarak (margin) di atas dan di bawah paragraf.
<p>Ini adalah paragraf pertama yang berisi penjelasan.</p>
<p>Ini adalah paragraf kedua.</p>3. Anchor (Link)
Tag <a> digunakan untuk membuat hyperlink ke halaman lain atau website lain.
<a href="about.html">Tentang Kami</a>
<a href="https://google.com" target="_blank">Buka Google</a>href: Tujuan link.target="_blank": Membuka link di tab baru.
4. Image (Gambar)
Tag <img> digunakan untuk menampilkan gambar. Ingat, ini adalah self-closing tag.
<img src="gambar-kucing.jpg" alt="Seekor kucing lucu sedang tidur" width="300" />src: Lokasi file gambar (bisa path lokal atau URL internet).alt: Teks alternatif yang muncul jika gambar gagal dimuat. Ini wajib diisi untuk aksesibilitas (membantu tuna netra memahami gambar).
5. List (Daftar)
Ada dua jenis daftar yang umum digunakan:
- Unordered List (
<ul>): Daftar tidak berurutan (poin/bullet). - Ordered List (
<ol>): Daftar berurutan (nomor 1, 2, 3...). Keduanya harus berisi tag<li>(List Item) di dalamnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<ol>
<li>Bangun Tidur</li>
<li>Mandi</li>
<li>Sarapan</li>
</ol>
</body>
</html>6. Container (Wadah)
Ada dua tag generik yang digunakan untuk mengelompokkan elemen lain, biasanya untuk keperluan styling (CSS).
<div>: Elemen blok (membuat baris baru). Digunakan untuk mengelompokkan bagian besar layout.<span>: Elemen inline (tidak membuat baris baru). Digunakan untuk menandai bagian kecil teks dalam paragraf.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h2>Bagian Header</h2>
<p>Teks ini ada di dalam <span style="color: red;">sebuah tag span</span></p>
</div>
</body>
</html>