HTML, singkatan dari HyperText Markup Language, adalah tulang punggung dari setiap halaman web yang Anda lihat di internet. Ini bukan bahasa pemrograman seperti JavaScript atau Python, melainkan bahasa markah yang digunakan untuk menyusun dan memberikan struktur pada konten web—seperti teks, gambar, tautan, dan tabel.
Memahami HTML adalah langkah pertama yang krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web. Tanpa HTML, web akan terlihat seperti dokumen teks biasa tanpa hierarki atau interaktivitas visual.
Setiap dokumen HTML dimulai dengan deklarasi tipe dokumen dan elemen akar <html>. Di dalamnya, terdapat dua bagian utama: <head> dan <body>.
<head>: Berisi metadata tentang dokumen HTML, seperti judul halaman (yang muncul di tab browser), tautan ke CSS, dan informasi penting lainnya yang tidak ditampilkan langsung di halaman.<body>: Berisi semua konten yang terlihat oleh pengguna, seperti paragraf, gambar, tautan, dan heading.Ini adalah kerangka dasar yang harus Anda mulai ketika membuat file HTML baru:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Setelah menguasai struktur dasar, Anda perlu mengenal beberapa tag esensial untuk membangun konten:
Digunakan untuk mendefinisikan hierarki judul dari yang paling penting (H1) hingga kurang penting (H6).
<h1>Judul Utama</h1><h2>Sub Judul</h2>
Tag <p> digunakan untuk blok teks utama, sedangkan <br> digunakan untuk memaksakan pemisah baris (break line).
<p>Ini teks di dalam paragraf.</p>
Teks ini akan di baris baru tanpa paragraf baru.<br>Baris kedua.
Tag <a> digunakan untuk membuat link yang mengarahkan pengguna ke halaman lain. Atribut href menentukan tujuan tautan.
<a href="https://www.contoh.com">Kunjungi Situs Contoh</a>
Tag <img> menyisipkan gambar. Atribut src menunjuk lokasi gambar, dan alt memberikan teks deskriptif untuk aksesibilitas.
<img src="gambar.jpg" alt="Deskripsi gambar yang jelas">
Terdapat dua jenis daftar utama:
<ul>): Daftar berpoin (bullet).<ol>): Daftar bernomor.<ul> <li>Item satu</li> <li>Item dua</li> </ul>
Saat belajar coding HTML hari ini, sangat penting untuk selalu memikirkan bagaimana tampilan halaman Anda di perangkat seluler. Inilah mengapa atribut <meta name="viewport"> sangat vital dan harus selalu ada di bagian <head>.
Tag meta viewport ini memberitahu browser bahwa lebar halaman harus sesuai dengan lebar perangkat (width=device-width) dan skala awal saat dimuat adalah 1.0 (initial-scale=1.0). Tanpa ini, website desktop akan dipaksa masuk ke layar kecil, membuat pengguna harus melakukan zoom terus-menerus.
Meskipun tata letak (layout) dan desain visual sebagian besar ditangani oleh CSS, fondasi semantik dan struktur yang baik dalam HTML Anda (menggunakan tag yang tepat) akan sangat membantu saat Anda mulai menerapkan desain responsif.
Setelah Anda nyaman dengan elemen-elemen dasar di atas—seperti tag struktural, teks, tautan, dan gambar—langkah selanjutnya dalam perjalanan belajar coding HTML Anda adalah:
<table>): Untuk menampilkan data dalam format baris dan kolom.<header>, <nav>, <section>, dan <footer> untuk memberikan makna yang lebih jelas pada struktur halaman Anda kepada mesin pencari dan pembaca layar.<form>): Untuk mengumpulkan input pengguna.Konsisten dalam praktik adalah kunci. Cobalah membuat halaman sederhana untuk diri sendiri setiap hari, dan jangan ragu untuk memeriksa kode sumber situs web favorit Anda untuk melihat bagaimana mereka menyusun konten mereka.