Validasi & Best Practice | Belajar HTML Dasar: Fondasi Web | Mahir.dev | Mahir.dev Academy

Validasi & Best Practice | Belajar HTML Dasar: Fondasi Web | Mahir.dev | Mahir.dev Academy

Selalu Gunakan Doctype yang Benar:
- Mulai setiap file HTML-mu dengan <!DOCTYPE html>. Ini ngasih tau browser buat pake mode standar HTML5. Wajib hukumnya!
Tutup Semua Tag yang Perlu Ditutup:
- Untuk elemen yang bukan elemen kosong (non-void elements), pastikan kamu selalu punya tag penutup yang sesuai. Misalnya, <p> harus ada </p>, <div> harus ada </div>.
- Elemen kosong kayak <img>, <br>, <hr>, <input> gak perlu tag penutup, tapi kamu boleh pake gaya self-closing (<br />) kalau suka (konsisten aja).
Nesting Elemen yang Benar:
- Pastikan elemen anak ditutup sebelum elemen induknya ditutup. Jangan sampe tag-nya saling silang kayak tali sepatu kusut.
  - Benar: <div><p>Teks <strong>penting</strong>.</p></div>
  - Salah: <div><p>Teks <strong>penting.</p></strong></div>
Gunakan Huruf Kecil untuk Nama Tag dan Atribut:
- Secara teknis HTML case-insensitive, tapi konvensi dan praktik terbaiknya adalah selalu pake huruf kecil (lowercase). Lebih rapi, konsisten, dan gampang dibaca.
  - Baik: <p class="info">Ini paragraf.</p>
  - Kurang Baik: <P CLASS="Info">Ini paragraf.</P>
Selalu Gunakan Atribut alt pada <img>:
- Udah kita bahas berkali-kali, ini penting banget buat aksesibilitas dan kalau gambar gagal loading. Isi dengan deskripsi yang relevan. Kalau gambar murni dekoratif, kasih alt="".
Selalu Gunakan Tanda Kutip untuk Nilai Atribut:
- Walaupun kadang browser toleran, biasakan selalu ngapit nilai atribut pake tanda kutip dua (" ") atau kutip satu (' '). Kutip dua lebih umum.
  - Baik: <a href="halaman.html" id="link-utama">Link</a>
  - Kurang Baik: <a href=halaman.html id=link-utama>Link</a> (bisa error kalau nilainya ada spasi).
Indentasi Kode yang Rapi dan Konsisten:
- Indentasi (menjorokkan kode) itu gak ngaruh ke cara browser nampilin halaman, tapi NGARUH BANGET ke keterbacaan kode buat manusia. Pake spasi (biasanya 2 atau 4 spasi) atau tab secara konsisten buat nunjukin struktur nesting. Teks editor modern biasanya punya fitur auto-format.
  html
```

<div><ul><li>Item 1</li><li>Item 2</li></ul></div>
 

<div>
    <ul>
        <li>Item 1</li>
```
Gunakan HTML Semantik Sebisa Mungkin:
- Pilih tag HTML yang paling pas buat ngegambarin makna kontenmu (<article>, <nav>, <aside>, dll.), bukan cuma <div> dan <span> buat semua hal.
Fokus pada Konten dan Struktur di HTML, Urusan Tampilan Serahkan ke CSS:
- Hindari pake atribut HTML yang buat styling (kayak bgcolor, font, align di tag-tag lama – banyak yang udah deprecated!). Hindari juga inline style (style="...") berlebihan. Pisahkan struktur (HTML), tampilan (CSS), dan perilaku (JavaScript).
Beri Komentar yang Membantu Jika Perlu:
- Kalau ada bagian kode yang kompleks atau logikanya gak langsung keliatan, kasih komentar () buat ngejelasin. Jangan kebanyakan komentar buat hal yang udah jelas juga sih.
Pahami Perbedaan Elemen Block vs Inline (Singgungan Penting):
- Elemen Block: Secara default, mulai di baris baru dan makan lebar penuh kontainernya (kayak <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>, dll.). Kamu bisa ngatur width, height, margin (atas/bawah), padding.
- Elemen Inline: Gak mulai di baris baru, lebarnya cuma selebar kontennya (kayak <span>, <a>, <img>, <strong>, <em>, <input>, <label>, dll.). Kamu gak bisa langsung ngatur width, height, atau margin atas/bawahnya (kecuali kamu ubah display-nya pake CSS).
- Aturan Nesting Penting: Secara umum, kamu gak boleh naruh elemen block di dalem elemen inline. Misalnya, jangan naruh <div> di dalem <span>, atau <p> di dalem <a> (kecuali <a> yang di-style jadi block pake CSS). Tapi, elemen inline boleh di dalem elemen block atau inline lain.
  - Memahami ini bisa bantu ngindarin layout yang aneh atau validasi error.

html

<CENTER><FONT COLOR="RED" SIZE="+2">SELAMAT DATANG DI WEBSITE SAYA!!!</FONT></CENTER>
<BR><BR>
<A HREF=index.html>KLIK DISINI UNTUK KEMBALI</A>
<P>ini adalah konten website saya.
saya suka <B>kucing</B>.
<IMG SRC="kucing.JPG"> <!-- Gak ada alt -->

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selamat Datang di Website Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya!</h1>
    </header>
    <main>
        <p>Ini adalah konten website saya. Saya sangat menyukai <strong>kucing</strong>.</p>
        <figure>
            <img src="images/kucing.jpg" alt="Seekor kucing oranye yang lucu sedang duduk." width="300" height="200">
            <figcaption>Kucing kesayangan saya, si Oren.</figcaption>
        </figure>
        <nav>
            <p><a href="index.html">Kembali ke Halaman Utama</a></p>
        </nav>
    </main>
    <footer>
        <p>&copy; 2024 Nama Saya</p>
    </footer>
</body>
</html>