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
Contoh:
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
Hasilnya:
List diatas diurutkan berdasarkan angka dari
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
0,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
1,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
2, sampai
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
3.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
4,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
5,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
6 atau angka romawi seperti
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
7,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
8,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
9?
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
0 pada tag
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
1 dan berikut ini nilai yang bisa diberikan:
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
4 untuk alfabet
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
4,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
5,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
6, dan seterusnya;
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
6 untuk alfabet
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
6,
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
8,
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
9, dan seterusnya;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
0 untuk angka romwari
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
0,
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
2,
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
3, dan seterusnya;
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
7 untuk angka romwari
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
7,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
8,
<html lang="en">
<head>
<title>Membuat Ordered Listtitle>
head>
<body>
<h1>Buah Favoritku:h1>
<ol>
<li>Jerukli>
<li>Durianli>
<li>Pisangli>
<li>Pepayali>
<li>Manggali>
ol>
body>
html>
9, dan seterusnya.
Contoh:
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
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
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
8 dan untuk item-nya dibuat juga dengan tag
.
Contoh:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul>
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
0.
Berikut ini nilai yang bisa diberikan untuk atribut
<html>
<head>
<title>Ordered List dengan Atribut Typetitle>
head>
<body>
<h3>List dengan type alfabeth3>
<ol type='a'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type alfabet kapital (huruf besar)h3>
<ol type='A'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawih3>
<ol type='i'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
<h3>List dengan type romawi kapitalh3>
<ol type='I'>
<li>Tutorial List di HTMLli>
<li>Tutorial Link di HTMLli>
<li>Tutorial Tabel di HTMLli>
ol>
body>
html>
0:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
2 untuk simbol persegi;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
3 (default) untuk simbol lingkaran disc;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
4 tidak memakai simbol;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
5 untuk simbol lingkaran;
Contoh:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
Hasilnya:
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
Contohnya:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
body>
html>
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:
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
6 (description list) tag untuk memulai description list;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
7 (description term) tag untuk membuat kata yang akan dideskripsikan;
<html lang="en">
<head>
<title>Membuat Unordered Listtitle>
head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:h1>
<ul type="square">
<li>Javascriptli>
<li>PHPli>
<li>Javali>
<li>Pythonli>
<li>Kotlinli>
ul>
<h1>Framework untuk dipelajari:h1>
<ul type="circle">
<li>Vuejsli>
<li>Svelteli>
<li>Reactjsli>
ul>
<h1>Tools untuk dipelajari:h1>
<ul type="none">
<li>Gulpli>
<li>NPMli>
<li>Js Lintli>
ul>
<h1>Pelajari juga:h1>
<ul type="disc">
<li>JSONli>
<li>XMLli>
<li>Markdownli>
ul>
body>
html>
8 (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Contoh:
<html lang="en">
<head>
<title>Membuat Description Listtitle>
head>
<body>
<h1>Daftar istilah:h1>
<dl>
<dt>Kopidt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.dd>
<dt>Kopi Black Magicdt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.dd>
<dt>White Coffeedt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.dd>
<dt>Kopi++dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.dd>
dl>
body>
html>
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?
Unordered list adalah
list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag
dan untuk item-nya dibuat juga dengan tag - . Hasilnya: Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc).
Apa itu ol di HTML?
Elemen <ol> (ordered list) merupakan elemen HTML untuk menampilkan daftar (list) dalam bentuk butir-butir melalui nomor secara berurutan. Nomor urut dapat berbentuk urutan angka desimal maupun daftar berbentuk urutan abjad.
Ol untuk apa?
Sedangkan tag Ol (Ordered List) merupakan tag beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa abjad, angka ataupun berupa angka romawi.
Apa yang dimaksud dengan UL?
Unordered List atau yang biasa kita sebut dengan "ul" adalah jenis daftar yang berbentuk poin - poin, Unordered List atau UL sendiri juga sering disebut dengan Nama Bullet List karena bentuknya yang berupa titik lingkaran.
