Tutorial html

Atribut HTML Penting

Atribut memberikan informasi tambahan pada tag HTML. Mari pelajari atribut-atribut yang paling sering digunakan!

Apa itu Atribut?

Atribut adalah informasi tambahan yang ditulis di dalam tag pembuka:

<tag atribut="nilai">Konten</tag>

Contoh:

<img src="foto.jpg" alt="Foto saya" width="300" />

Atribut Global (Bisa Digunakan di Semua Tag)

ID

Memberikan identitas unik pada elemen:

<h1 id="judul-utama">Selamat Datang</h1>
<p id="paragraf-pertama">Ini paragraf pertama.</p>

Aturan ID:

  • Harus unik dalam satu halaman
  • Tidak boleh ada spasi
  • Gunakan huruf kecil dan dash

Class

Memberikan nama kelas untuk styling atau JavaScript:

<p class="text-merah">Text berwarna merah</p>
<p class="text-besar text-tebal">Text besar dan tebal</p>

Tips Class:

  • Bisa digunakan berkali-kali
  • Bisa memiliki beberapa class (dipisah spasi)

Title

Memberikan tooltip saat mouse hover:

<p title="Ini adalah tooltip">Arahkan mouse ke sini</p>
<img src="foto.jpg" alt="Foto" title="Foto profil saya" />

Lang

Menentukan bahasa konten:

<p lang="en">Hello World</p>
<p lang="id">Halo Dunia</p>

Atribut untuk Link (<a>)

Href

Menentukan tujuan link:

<!-- Link ke halaman lain -->
<a href="tentang.html">Tentang Kami</a>

<!-- Link ke website -->
<a href="https://www.google.com">Google</a>

<!-- Link ke email -->
<a href="mailto:admin@example.com">Kirim Email</a>

<!-- Link ke telepon -->
<a href="tel:+6281234567890">Telepon Kami</a>

<!-- Link ke bagian halaman -->
<a href="#bagian-1">Pergi ke Bagian 1</a>

Target

Menentukan cara membuka link:

<!-- Buka di tab baru -->
<a href="https://www.youtube.com" target="_blank">YouTube</a>

<!-- Buka di window yang sama (default) -->
<a href="halaman.html" target="_self">Halaman Lain</a>

Download

Membuat link untuk download file:

<a href="dokumen.pdf" download>Download PDF</a>
<a href="foto.jpg" download="foto-profil.jpg">Download Foto</a>

Atribut untuk Gambar (<img>)

Src

Sumber/lokasi gambar:

<img src="foto.jpg" alt="Deskripsi foto" />
<img src="https://example.com/gambar.png" alt="Gambar online" />

Alt

Text alternatif (sangat penting untuk aksesibilitas):

<img src="logo.png" alt="Logo perusahaan XYZ" />
<img src="grafik.jpg" alt="Grafik penjualan tahun 2025" />

Width dan Height

Ukuran gambar:

<img src="foto.jpg" alt="Foto" width="300" height="200" />

Loading

Mengatur cara loading gambar:

<!-- Lazy loading (load saat diperlukan) -->
<img src="foto.jpg" alt="Foto" loading="lazy" />

<!-- Eager loading (load segera) -->
<img src="foto.jpg" alt="Foto" loading="eager" />

Atribut untuk Form

Type (untuk <input>)

Menentukan jenis input:

<input type="text" placeholder="Nama" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<input type="number" placeholder="Umur" />
<input type="date" />
<input type="file" />

Name

Nama field untuk pengiriman data:

<input type="text" name="nama_lengkap" />
<input type="email" name="email_user" />

Placeholder

Text petunjuk di dalam input:

<input type="text" placeholder="Masukkan nama lengkap" />
<input type="email" placeholder="contoh@email.com" />

Required

Field wajib diisi:

<input type="text" name="nama" required />
<input type="email" name="email" required />

Disabled

Menonaktifkan input:

<input type="text" value="Data tidak bisa diubah" disabled />
<button disabled>Tombol Non-aktif</button>

Readonly

Input hanya bisa dibaca:

<input type="text" value="Hanya baca" readonly />

Atribut untuk Tabel

Border

Memberikan garis pada tabel:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
</table>

Colspan dan Rowspan

Menggabungkan kolom atau baris:

<table border="1">
  <tr>
    <th colspan="2">Data Siswa</th>
  </tr>
  <tr>
    <td>Nama</td>
    <td>Umur</td>
  </tr>
  <tr>
    <td rowspan="2">Budi</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Jakarta</td>
  </tr>
</table>

Atribut Data Custom

Anda bisa membuat atribut custom dengan prefix data-:

<div data-user-id="12345" data-role="admin">Informasi pengguna</div>

<button data-action="delete" data-confirm="Yakin hapus?">Hapus</button>

Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Contoh Atribut HTML</title>
  </head>
  <body>
    <header id="header-utama">
      <h1 class="judul-besar" title="Judul utama website">Website Saya</h1>

      <nav>
        <a href="#tentang" title="Scroll ke bagian tentang">Tentang</a>
        <a href="#kontak" title="Scroll ke bagian kontak">Kontak</a>
        <a
          href="https://www.google.com"
          target="_blank"
          title="Buka Google di tab baru"
          >Google</a
        >
      </nav>
    </header>

    <main>
      <section id="tentang">
        <h2>Tentang Kami</h2>
        <img
          src="profil.jpg"
          alt="Foto profil tim kami"
          width="400"
          height="300"
          loading="lazy"
          title="Tim yang awesome!"
        />

        <p class="deskripsi" lang="id">
          Kami adalah tim yang berdedikasi untuk memberikan layanan terbaik.
        </p>
      </section>

      <section id="kontak">
        <h2>Hubungi Kami</h2>

        <form>
          <input
            type="text"
            name="nama"
            placeholder="Nama lengkap"
            required
            title="Masukkan nama lengkap Anda"
          />

          <input
            type="email"
            name="email"
            placeholder="alamat@email.com"
            required
            title="Masukkan email valid"
          />

          <textarea
            name="pesan"
            placeholder="Tulis pesan Anda..."
            rows="4"
            required
            title="Jelaskan kebutuhan Anda"
          ></textarea>

          <button type="submit" title="Klik untuk kirim pesan">
            Kirim Pesan
          </button>
        </form>
      </section>
    </main>

    <footer class="footer-utama">
      <p>&copy; 2025 Website Saya</p>
      <a href="mailto:admin@example.com" title="Kirim email ke admin">
        admin@example.com
      </a>
    </footer>
  </body>
</html>

Tips Menggunakan Atribut

  1. Selalu gunakan alt pada gambar
  2. Gunakan title untuk informasi tambahan
  3. ID harus unik, class bisa berulang
  4. Gunakan target="_blank" untuk link eksternal
  5. Tambahkan required pada field penting
  6. Gunakan placeholder yang jelas dan membantu

Atribut Validasi Form

<!-- Validasi panjang text -->
<input type="text" minlength="3" maxlength="50" />

<!-- Validasi angka -->
<input type="number" min="18" max="65" />

<!-- Validasi pattern (regex) -->
<input type="tel" pattern="[0-9]{10,12}" title="Nomor telepon 10-12 digit" />

Latihan

Buat halaman dengan:

  1. Form kontak lengkap dengan semua validasi
  2. Galeri foto dengan lazy loading dan tooltip
  3. Navigasi dengan link internal dan eksternal
  4. Tabel data dengan colspan/rowspan
  5. Atribut data custom untuk JavaScript nantinya

Gunakan atribut sebanyak mungkin untuk membuat website yang lebih interaktif dan accessible!