VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Belajar HTML Part 6 - Elemen List HTML

Element List merupakan salah satu yang sering digunakan dalam pembuatan sebuah website. elemen list memungkinkan untuk mengorganisir informasi secara terstruktur, sehingga mudah dipahami oleh audience atau pengguna.

Kali ini kita akan mempelajari list HTML dari mulai penggunaanya dan berbagai jenis list yang dapat digunakan.

Belajar Elemen List HTML
Element List HTML


Pengenalan Elemen List HTML

Element list ini biasa digunakan untuk menyusun elemen-elemen berdasarkan hubungan atau keterkaitan diantara mereka. dengan begitu developer dapat membuat informasi secara terstruktur atua hierarki sehingga mudah dipahami oleh penggunanya.

Jenis-jenis Elemen List HTML

Ada tiga jenis elemen list yaitu 

1. Ordered List (List Berurutan)

Ordered list biasa digunakan untuk menampilkan daftar item yang memiliki urutan atau nomor tertentu. elemen tersebut dikelompokan pada elemen <ol> dan didalamnya terdapat item yang ditandai dengan elemen <li>.

contoh penggunaanya 


<ol>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ol>


Hasilnya

  1. list 1
  2. list 2
  3. list 3

2. Unordered List (List Tidak Berurutan)

Undordered list ini kebalikan dari ordered list yaitu menampilkan daftar item tanpa adanya urutan tertentu.  elemen tersebut dikelompokan pada elemen <ul> dan didalamnya terdapat item yang ditandai dengan elemen <li>

contoh penggunaanya


<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ul>


Hasilnya

  • list 1
  • list 2
  • list 3

3. Description List (List Deskripsi)

Description list ini biasa digunakan untuk menyajikan item berserta deskripsinya. elemen tersebut dikelompokan pada elemen <dl> dan di dalamnya terdapat elemen <dt> (definition list) dan didalamnya terdapat elemen <dd> (definition Description).

Contoh penggunannya


<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>Javscript</dd>
</dl>


Hasilnya

HTML

Hypertext Markup Language

CSS

Cascading Style Sheets

JS

Javascript

Atribut Elemen List HTML

Elemen list ini terdapat fitur mengenai penggunaan atribut. ada beberapa atribut yang umum digunakan yaitu:

1. Atribut type (Ordered List)

Atribut type ini digunakan pada elemen <ol> untuk menentukan jenis pengurutannya. untuk nilainya antara lain adalah 1 (angka) , A (huruf kapital), a (huruf kecil), I (romawi kapital), dan i (romawi kecil).

contoh penggunaanya


<ol type="I">
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ol>


Hasilnya

Elemen List Atribut Type



2. Atribut start (Ordered List)

Atribut start digunakan pada elemen <ol> untuk menetukan nilai awal urutan, sangat berguna jika inigin memulai urutan dari angka tertentu.

contoh pengunannya


<ol start="2">
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ol>


Hasilnya

Elemen List Atribut Start



Kesimpulan

Dengan menguasai penggunaan Elemen List jenis Ordered List, Unordered List dan Decription List beserta atribut yang umum digunakan, diharapkan bisa meningkatkan kualitas struktur konten halaman.

Silahkan uji coba elemen list tersebut dan beberapa atributnya sehingga anda bisa menyesuaikan jenis elemen list yang dibutuhkan.

Semoga artikel ini membantu memhami mengenai Elemen List dan mengimplementasikan pada proyek website anda agar optimal.

Posting Komentar

Posting Komentar