HTML

List di HTML: Contoh dan Cara Membuat Sintaknya

List di HTML atau daftar berurutan HTML berfungsi untuk menampilkan data secara berurutan ke bawah.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>

List HTML – Unordered

List unordered dibuat menggunakan tag <ul> dan setiap itemmya menggunakan tag <li>

Item daftar(list) akan ditandai dengan peluru (lingkaran hitam kecil) secara default, seperti di bawah ini:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

List HTML – Ordered

List ordered dibuat menggunakan tag <ol> dan setiap itemmya menggunakan tag <li>

Item daftar(list) akan ditandai dengan angka secara default:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

List HTML – Description

List di HTML juga bisa digunakan untuk membuat struktur data yang berisi daftar deskripsi(daftar penjelasan). List deskripsi adalah list/daftar yang berisi deskripsi atau penjelasan dari sesuatu.

Tag<dl>mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd>menjelaskan setiap istilah, lihatlah contoh di bawah :

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

Tag List HTML

TagDeskripsi
<ul>Mendefinisikan list unordered
<ol>Mendefinisikan list ordered
<li>Mendefinisikan item list
<dl>Mendefinisikan list item deskripsi
<dt>Mendefinisikan istilah(nama) pada list deskripsi
<dd>Mendefinisikan penjelasan dari istilah(nama) pada list deskripsi

Hanifah Nurbaeti

Share
Tags: html