List

List Daftar

---

Pengantar

Fungsi List adalah menyusun teks menjadi format dalam item. Sehingga penulisan menjadi lebih rapi dan teratur.
Secara garis besar List pada html terbagi menjadi 3, yaitu :

• Bulleted (Unordered List)
• Numered (Ordered)
• Definition

Bullleted (Undordered List)

Bulleted List digunakan untuk melakukan format informasi menggunakan gambar keil yang disebut sebagai bullets.
Unordered List biasanya digunakan untuk menampilkan item-item tanpa perlu urutan mana yang lebih dulu.
Unordered List dimulai dengan tag <ul>...</ul>

Tipe-tipe bullet:

Type	Hasil
Disc
Square
Circle

Syntax Penulisan

<ul> <li> element HTML </li> </ul>

Penjelasan

• Di dalam tag <ul>..</ul> hanya bisa berrisi tag <li>...</li> untuk mendefiniskan setiap item
• Didalam tag <li>...</li> berisi element atau konten item dari html yang akan dibuat. Berupa :
  • Gambar
  • Link
  • Tulisan
  • dsb.

• Untuk mengganti tipe bullet, dapat mengguanakan attribut:

  Style = "list-style-type : nama tipe/jenis bullet"

Contoh

Numered (Ordered) List

Digunakan untuk memformat informasi mengguanakan urutan angka atau huruf.
Dimulai dengan tag <ol>..</ol>
Tipe-tipe numered list :

• Huruf : A,B,C (upper-alpha)
• Huruf : a,b,c (lowe-alpha)
• Huruf Romawi : I,II,III (upper-roman)
• Huruf Romawi : i,ii,iii (lower-roman)

Syntax Penulisan

<ol>  <li> Element Html </li> <ol>

Untuk mengganti tipe numered list dapat menggunakan attribute :

Style="list-style-type : nama tipe/jenis numered list"

Contoh

Description List

Fungsi Description List untuk menandai berbagai jenis pasangan nilai, seperti istilah dan definisi, pertanyaan dan jawaban.

Elemen	Fungsi
<dl>...</dl>	Memulai dan mengakhiri daftar deskripsi
<dt>...</dt>	Mendefinisikan istilah, nama atau bagian grup dalam daftar deskripsi
<dd>...</dl>	Menjelaskan deskripsi dari <dt>

Contoh

Semantic Tag Html Baru

Tag	Keterangan
<details>...</details>	Mendefinisikan konten detil tambahan yang bias dilihat dan disembunyikan oleh pengguna
<mark>...</mark>	Mendefinisikan teks di Highlighted
<meter>...</meter>	Mendefinsikan jangkauan scalar dalam jangkauan ukuran yang bias dikenal.
<progess>...</progress>	Mendefinisikan kemajuan dari suatu proses
<summary...</summary>	Mendefinisikan judul untuk elemen <details>
<wbr>...</wbr>	Mendefinisikan word break opportunity yaitu pada posisi mana seharusnya enter terjadi pada kata yang panjang

[Melanjutkan ke Hyperlink]