The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists [dl] are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.
When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using
Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.
The list structure [ul/ol] is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.
When HTML first came out, there were OL and UL, which, as all of the other posters have said, meant Ordered List and Unordered List.
The difference was easy. OLs displayed... a number next to them. Or a roman numeral, or a letter! You could even control whether it used capitalized symbols or lowercase! Cool!
ULs gave you bullets. 3 types of bullets, even - discs [hollow circles], squares [filled squares], circles [filled circles.]
There was no CSS. Beyond these attributes, there wasn't really a way to customize the list formats [and margins and indententations and everything else.] So, this distinction was important.
Nowadays, its all CSS. In fact, the w3 people want you to use styles rather than the html "type" attribute that you used to use. So, using UL vs OL doesn't really matter, if you are one of them newfangled CSS users.
CSS lets you change the bullet type, or opt to use an image, or change the margins/styles/indentations, or not even display a bullet at all.
Edit again: This answer isn't really meant to address the semantic merits of UL vs OL. But technically [you know, at the bits and bytes] the above outlines the differences in behavior.
HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:
- Ordered List adalah list yang terurut;
- Unordered List adalah list yang tak terurut;
- dan Descriptiona List adalah list yang berisi definisi.
Mari kita bahas satu-per-satu…
1. Ordered List di HTML
Ordered list dibuat dengan tag [list item].
Contoh:
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Hasilnya:
List diatas diurutkan berdasarkan angka dari
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Lalu bagaimana kalau kita ingin menggunakan huruf seperti
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
4 untuk alfabetMembuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
4,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
5,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
6, dan seterusnya;Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
6 untuk alfabetOrdered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
6,Ordered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
8,Ordered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
9, dan seterusnya;Ordered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
0 untuk angka romwariMembuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
0,Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
2,Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
3, dan seterusnya;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
7 untuk angka romwariMembuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
7,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
8,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
9, dan seterusnya.Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
Contoh:
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
Hasilnya:
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Contoh:
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil [disc]. Kita juga bisa menggantinya dengan atribut
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
Berikut ini nilai yang bisa diberikan untuk atribut
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
2 untuk simbol persegi;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
3 [default] untuk simbol lingkaran disc;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
4 tidak memakai simbol;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
5 untuk simbol lingkaran;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
Contoh:
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Framework untuk dipelajari:
Vuejs
Svelte
Reactjs
Tools untuk dipelajari:
Gulp
NPM
Js Lint
Pelajari juga:
JSON
XML
Markdown
Hasilnya:
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
Contohnya:
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Hasilnya:
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
6 [description list] tag untuk memulai description list;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
7 [description term] tag untuk membuat kata yang akan dideskripsikan;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
8 [description description] tag untuk membuat penjelasan dari kata.Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
Format penulisannya seperti ini:
Contoh:
Membuat Description List
Daftar istilah:
Kopi
Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.
Kopi Black Magic
Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.
White Coffee
Kopi berwarna putih, kandungan kafeinnya sedikit.
Kopi++
Kopi ini mampu meningkatkan imajinasi 99 kali lipat.
Hasilnya:
List di dalam List [Nested List]
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.
Apa itu ul dan li di HTML?
- dan untuk item-nya dibuat juga dengan tag
- . Hasilnya: Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil [disc].