List Pada HTML | Kita Ngoding HTML #10

List HTML.- Pada kesempatan yang baik ini, kita akan membahas tentang list pada html, dimana pada pembahasan sebelumnya kita telah membahas tentang tabel, bagi sahabat yang belum tahu mengenai tabel pada html, sahabat bisa berkunjung ke artikel sebelumnya. Namun bagi yang sudah siap untuk belajar tentang list, simak penjelsannya dibawah ini ya.

Apa itu list pada html?

List pada html merupakan suatu kode html untuk membuat group item dalam dokumen html. List itu sendiri terbagi menjadi beberapa yaitu ada yang tidak ber-urutan dan ada yang ber-urutan serta list yang dilengkapi dengan descriptionnya.

List Tidak Ber-urutan (Unordered List).

Untuk list yang tidak ber-urutan dilambangkan dengan tag <ul>..</ul> dan untuk mendifinisikan setiap item kita gunakan tag <li>..</li>.

Untuk contoh penggunaan list tidak berurutan adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Penggunaan List tidak ber-rutan</title>
</head>
<body>
  <h2>Unordered List</h2>
  <ul>
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
    <li>Jus</li>
  </ul>
</body>
</html>

Secara default, Unordered List menggunakan simbol titik bulet. kita dapat merubah typenya menjadi disc, square, circle dengan cara menambahkan perintah type="disc/squeare/circle"(gunakan salah satu) didalam tag <ul>. Contoh <ul type="circle">.

Baca Juga : Membuat Link HTML

List Ber-urutan (Ordered List).

Untuk list yang secara ber-urutan dilambangkan dengan tag <ol>..</ol/> dan untuk mendifinisikan setiap item kita gunakan tag <li>..</li>.

Adapun contoh penggunaan list secara ber-urutan adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Penggunaan List secara ber-rutan</title>
</head>
<body>
  <h2>Order List</h2>
  <ol>
    <li>Kopi</li>
    <li>Teh</li>
    <li>Susu</li>
    <li>Jus</li>
  </ol>
</body>
</html>

Secara default list akan diurutkan berdasarkan angka. Namun kita bisa merubah urutan angka menjadi huruf (baik huruf besar maupun huruf kecil) dan huruf romawi(romawi besar maupun kecil) dengan cara merubah tipenya. Perhatikan gambar dibawah ini:

Baca Juga : Tabel Pada HTML Dasar

Definisi List

Untuk list yang satu ini biasanya digunakan untuk membuat list beserta penjelasan/detail dari list tersebut. Tag yang digunakan adalah <dl>..</dl>.

Adapun contoh penggunaannya adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Penggunaan List tidak ber-rutan</title>
</head>
<body>
  <h2>Deskripsi List</h2>
  <dl>
    <dt>Kopi</dt>
    <dd>-Hitam</dd>
    <dd>-Susu</dd>
    <dt>Jus</dt>
    <dd>-Alpukat</dd>
    <dd>-Jeruk</dd>
    <dd>-Apel</dd>
    <dt>Es</dt>
    <dd>-Es Teh</dd>
    <dd>-Es Cendol</dd>
    <dd>-Es Doger</dd>
  </dl>
</body>
</html>

Outputnya :

Baca Juga : Cara Menggunakan CSS Di HTML

Sampai disini kita telah belajar tentang list secara berurutan atau pun tidak berurutan serta list dengan diskripsi. Sangat simple bukan?. Walaupun demikian admin sarankan untuk tetap berlatih menggunakan list supaya lebih baik lagi pemahaman sahabat.

Admin merekomendasikan kepada kalian untuk membaca salah satu artikel yang telah admin siapkan dibawah ini. Guna untuk menambah pengetahuan kalian tentang HTML.

Silahkan kalian klik link dibawah ini untuk berpindah ke halaman dengan materi yang tertera.

Postingan Terkait :

Tutorial HTML #11 | Form Pada HTML Dasar

Tutorial HTML #10 | List Pada HTML

Tutorial HTML #09 | Tabel Pada HTML Dasar

Tutorial HTML #08 | Tag Image HTML Dasar

Tutorial HTML #07 | Membuat Link HTML

Tutorial HTML #06 | Styles Dan Formating Pada HTML

Tutorial HTML #05 | Tentang Tag Heading

Tutorial HTML #04 | Tentang Tag Paragraf HTML

Tutorial HTML #03 | Pengenalan Struktur HTML

Tutorial HTML #02 | Persiapan Sebelum Mulai Menulis Kode HTML