List pada HTML

List pada HTML

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat daftar pada HTML

List pada HTML

Daftar Tunggal (Unordered List)

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
HTML

Daftar Berurutan (Ordered List)

HTML
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
HTML

Daftar Deskriptif (Description List)

HTML
<dl>
  <dt>Item 1</dt>
  <dd>Deskripsi item 1</dd>
  <dt>Item 2</dt>
  <dd>Deskripsi item 2</dd>
  <dt>Item 3</dt>
  <dd>Deskripsi item 3</dd>
</dl>
HTML

Daftar Tunggal dengan Simbol Kustom (Unordered List with Custom Symbol)

HTML
<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
HTML

Daftar Berurutan dengan Tipe Kustom (Ordered List with Custom Type)

HTML
<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
HTML

Daftar Tunggal dengan Indentasi (Nested Unordered List)

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
HTML

Daftar Berurutan dengan Indentasi (Nested Ordered List)

HTML
<ol>
  <li>Item 1</li>
  <li>Item 2
    <ol>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>
HTML

Daftar Deskriptif dengan Indentasi (Nested Description List)

HTML
<dl>
  <dt>Item 1</dt>
  <dd>Deskripsi item 1</dd>
  <dt>Item 2</dt>
  <dd>
    <dl>
      <dt>Subitem 1</dt>
      <dd>Deskripsi subitem 1</dd>
      <dt>Subitem 2</dt>
      <dd>Deskripsi subitem 2</dd>
    </dl>
  </dd>
  <dt>Item 3</dt>
  <dd>Deskripsi item 3</dd>
</dl>
HTML

Output:

See the Pen List pada HTML by De Orchids (@De-Orchids) on CodePen.

Gunakan contoh kode di atas untuk membuat daftar Liast pada halaman HTML Anda. Anda dapat menyesuaikan gaya dan tipe daftar sesuai kebutuhan Anda.

Artikel Terbaru ⭐