Pelajari dasar-dasar HTML, struktur dokumen, daftar perintah tag utama, hingga peran HTML, CSS, dan JS di artikel ini.

Dalam dunia pengembangan web (web development), HTML (HyperText Markup Language) adalah fondasi paling awal dan utama yang wajib dipelajari. Ibarat membangun sebuah rumah, HTML bertindak sebagai batu bata dan kerangka bangunan yang menentukan struktur dasar dari setiap halaman di internet.

Poin-Poin Utama (Key Takeaways)

• Bahasa Markah Utama: HTML bukan bahasa pemrograman, melainkan bahasa markah untuk menyusun kerangka dan struktur halaman web.
• Elemen & Tag: Dibatasi oleh tag (seperti <p> dan </p>) yang memberi tahu peramban (browser) bagaimana cara menampilkan teks, gambar, atau elemen lainnya.
• Hirarki Heading: Menggunakan tag <h1> hingga <h6> secara berurutan untuk menjaga struktur informasi dan aksesibilitas (SEO).
• Standar Penulisan Modern: Selalu diawali dengan deklarasi <!DOCTYPE html> dan menggunakan huruf kecil (lowercase) pada setiap nama tag.

Struktur Dasar Dokumen HTML

Setiap file HTML yang valid harus memiliki kerangka standar sebagai berikut:

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Web Anda</title>
</head>
<body>

    <!-- Konten utama website Anda ditulis di sini -->

</body>
</html>

Daftar Perintah (Tag) Dasar HTML yang Wajib Diketahui

Berikut adalah rangkuman tag-tag dasar HTML yang dikelompokkan berdasarkan fungsinya:

Contoh Penerapan Kode HTML Lengkap

Berikut adalah implementasi praktis kombinasi tag dasar HTML dalam satu dokumen:

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Situs Web Pertamaku</title>
</head>
<body>

    <!-- Header & Navigasi -->
    <header>
        <h1>Selamat Datang di Portal Belajar HTML</h1>
        <nav>
            <a href="#tentang">Tentang</a> | 
            <a href="#materi">Materi</a> | 
            <a href="#kontak">Kontak</a>
        </nav>
    </header>

    <hr>

    <!-- Konten Utama -->
    <main>
        <section id="tentang">
            <h2>Tentang HTML</h2>
            <p>
                HTML adalah bahasa dasar untuk struktur web. Dengan memahami 
                <strong>tag dasar</strong>, Anda dapat menyusun konten secara rapi.
            </p>
        </section>

        <section id="materi">
            <h2>Langkah Belajar Web Development</h2>
            <ol>
                <li>Menguasai perintah dasar <em>HTML</em>.</li>
                <li>Mempelajari pembuatan tata letak dengan <em>CSS</em>.</li>
                <li>Menambahkan interaktivitas menggunakan <em>JavaScript</em>.</li>
            </ol>
        </section>

        <section id="kontak">
            <h2>Hubungi Kami</h2>
            <form action="#" method="POST">
                <label for="nama">Nama:</label><br>
                <input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda"><br><br>

                <label for="pesan">Pesan:</label><br>
                <textarea id="pesan" name="pesan" rows="4"></textarea><br><br>

                <button type="submit">Kirim Pesan</button>
            </form>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Panduan Belajar HTML. Hak Cipta Dilindungi.</p>
    </footer>

</body>
</html>

Tips Praktis Penulisan Kode HTML yang Baik (Best Practices)

1. Gunakan Huruf Kecil (Lowercase): Tulis nama tag menggunakan huruf kecil (misal: <p> bukan <P>).
2. Selalu Tutup Tag Anda: Pastikan setiap tag pembuka memiliki tag penutup yang sesuai (misal: <p>konten</p>), kecuali untuk tag mandiri seperti <br> dan <img>.
3. Gunakan Indentasi (Spasi/Tab): Beri jarak spasi ke dalam untuk elemen yang berada di dalam tag lain agar kode mudah dibaca.
4. Gunakan Elemen Semantik: Manfaatkan tag seperti <header>, <nav>, dan <article> alih-alih menggunakan <div> untuk semua bagian agar struktur web lebih rapi dan ramah SEO.

Kesimpulan

Memahami daftar perintah dasar HTML adalah langkah paling awal untuk menjadi seorang pengembang web (web developer). Dengan menguasai struktur dasar dokumen, aturan penggunaan tag, serta penerapannya pada formulir, tabel, dan navigasi, Anda sudah siap untuk melangkah ke tahap perancangan visual menggunakan CSS.

FAQ (Frequently Asked Questions)

1. Apa bedanya tag berpasangan dan tag mandiri dalam HTML?

Tag berpasangan membutuhkan tag penutup (misal: <h1>...</h1> atau <p>...</p>), sedangkan tag mandiri (self-closing tag) tidak memerlukan tag penutup karena tidak membungkus teks di dalamnya (misal: <br>, <hr>, atau <img src="...">).

2. Apakah pengaturan responsivitas situs web diatur oleh HTML?

Tidak sepenuhnya. HTML bertugas menyediakan fondasi dan kerangka responsif—seperti menyisipkan meta tag viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0">) dan menggunakan struktur tag semantik. Namun, elemen yang mengatur aturan desain, fleksibilitas tata letak (layout), serta penyesuaian ukuran tampilan di berbagai perangkat (HP, tablet, komputer) adalah CSS melalui fitur Media Queries, Flexbox, dan CSS Grid.

3. Apa yang terjadi jika saya lupa menutup tag HTML?

Beberapa peramban modern akan mencoba memperbaiki kesalahan tersebut secara otomatis, namun hal ini dapat menyebabkan tampilan web menjadi berantakan atau elemen di bawahnya ikut terbawa gaya (style) dari tag yang tidak ditutup.

4. Apa saja yang diatur oleh HTML, dan apa yang diatur oleh CSS serta JavaScript (JS)?

Ketiga teknologi ini memiliki pembagian peran yang sangat jelas (separation of concerns):

• HTML (Struktur & Konten): Mengatur kerangka bangunan situs web—seperti menentukan mana teks judul, paragraf, gambar, tombol, formulir, dan tabel.
• CSS (Tampilan & Desain): Mengatur estetika dan tata letak (styling)—seperti warna latar belakang, jenis huruf (font), ukuran teks, animasi visual, serta responsivitas layout di layar HP/komputer.
• JavaScript / JS (Perilaku & Interaktivitas): Mengatur logika dan fungsionalitas interaktif—seperti validasi input formulir secara langsung, menampilkan menu pop-up, menjalankan slider gambar, hingga mengirim/menerima data ke server tanpa harus memuat ulang (reload) halaman.