HTML link dan Lists

20 Mar 2025

📘 HTML: Link dan List

Penjelasan tentang apa itu Link dan List

Panduan dasar dan lengkap mengenai penggunaan Link dan List dalam HTML untuk membuat halaman web yang terstruktur dan mudah dinavigasi.

🔗 Link dalam HTML

📌 Apa itu Link?

Link (hyperlink) adalah elemen HTML yang digunakan untuk menghubungkan antar halaman web, baik dalam satu website maupun ke situs eksternal.

🏷️ Tag yang Digunakan

<a href="tujuan">Teks Link</a>

🧩 Atribut Penting

Atribut Deskripsi
href Alamat atau URL tujuan
target Tempat membuka link (_blank, _self)
title Tooltip saat hover
rel Relasi dokumen (contoh: noopener, noreferrer)

✅ Contoh Link

<!-- Link internal -->
<a href="about.html">Tentang saya</a>

<!-- Link eksternal -->
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Kunjungi Google</a>

<!-- Link ke bagian tertentu di halaman -->
<a href="#kontak">Lompat ke Kontak</a>

<!-- Elemen tujuan -->
<h2 id="kontak">Kontak Kami</h2>

📋 List dalam HTML

📌 Apa itu List?

List (daftar) digunakan untuk menyusun informasi dalam bentuk yang rapi, bisa berurutan (numbering) atau tidak.

🧱 Jenis-Jenis List

Jenis List Tag HTML Keterangan
Ordered List <ol> Daftar dengan urutan (1, 2, 3)
Unordered List <ul> Daftar tanpa urutan (bullet)
Description List <dl> Daftar istilah dan deskripsi

✅ Contoh Ordered List

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

✅ Contoh Unordered List

<ul>
  <li>Beranda</li>
  <li>Blog</li>
  <li>Kontak</li>
</ul>

✅ Contoh Description List

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup dasar untuk web</dd>

  <dt>CSS</dt>
  <dd>Digunakan untuk mempercantik tampilan</dd>
</dl>

✅ Contoh Nested List

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

🎯 Tips Penggunaan

✅ Kesimpulan