A list is an element used to display information in the form of alist . Usually used to make menus.
There are three types of lists in HTML:
- The Ordered List is an ordered list;
- The Unordered List is a list that is not sorted;
- Descriptiona List is a list that contains definitions.
Let's discuss them one by one…
1. How to Make an Ordered List in HTML
An ordered list is an ordered list. This list is marked with a number or letter in front of it as a sign that this list is sorted.
Ordered lists are tagged
<ol>. This tag has a child in the form of a tag to create an item list, namely <li> (list item) .
Example:
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Ordered</title>
</head>
<body>
<h3>10 distro linux yang sering digunakan di Indonesia</h3>
<ol>
<li>Ubuntu</li>
<li>Mint</li>
<li>BlankOn</li>
<li>Fedora</li>
<li>Debian</li>
<li>CentOS</li>
<li>OpenSUSE</li>
<li>ElementaryOS</li>
<li>BackTrack</li>
<li>Kali Linux</li>
</ol>
</body>
</html>
The result:
10 Linux distributions that are often used in Indonesia
- Ubuntu
- Mint
- BlankOn
- Fedora
- Debian
- CentOS
- OpenSUSE
- ElementaryOS
- BackTrack
- Kali Linux
The list above is sorted by numbers from
1up to 10.
So what if we wanted to use the letters as
a, b, c or roman numerals such as I, II, III?
Easy…
To make something like that, we can use attributes
typein tags ol.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
</body>
</html>
The result:
List with alphabet type
- Use Linux
- Be creative
- Dare to be Different
List with capital alphabet type (uppercase)
- Use Linux
- Be creative
- Dare to be Different
List with Roman type
- Use Linux
- Be creative
- Dare to be Different
List with Roman type capital
- Use Linux
- Be creative
- Dare to be Different
2. How to make an Unordered List in HTML
While for lists that are not sorted, usually use symbols.
How to make it using tags
<ul> (unordered list) . He also has the same child as <ul>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>Daftar bahasa pemrograman</h3>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
</body>
</html>
The result:
List of programming languages
- C
- C ++
- Java
- Python
- PHP
- Ruby
- Perl
By default the symbol used by the unordered list is a small circle (disc) . We can also replace it like an ordered list using attributes
type.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>Type = square</h3>
<ul type="square">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = disc</h3>
<ul type="disc">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = none</h3>
<ul type="none">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = circle</h3>
<ul type="circle">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
</body>
</html>
The result:
Type = square
- C
- C ++
- Java
- Python
- PHP
- Ruby
- Perl
Type = disc
- C
- C ++
- Java
- Python
- PHP
- Ruby
- Perl
Type = none
- C
- C ++
- Java
- Python
- PHP
- Ruby
- Perl
Type = circle
- C
- C ++
- Java
- Python
- PHP
- Ruby
- Perl
Besides using the type list above, we can also use images.
Example:
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
The result:
- C
- C ++
- Java
- Python
- PHP
- Ruby
- Perl
style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);"
3. How to Make a Description List in HTML
This list is used to display descriptions / explanations. Examples are like a dictionary.
The tag to create a description list is
<dl> (data list) . In this tag there are tags <dt> (data term) and <dd> (data description) .
Example:
<!DOCTYPE html>
<html>
<head>
<title>Description List</title>
</head>
<body>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
The result:
List in the List (Nested List)
A list can also be created on a list, for example we want to combine an ordered list with an unordered list.
How, the list inside is written in the tag
<li>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>List di dalam List</title>
</head>
<body>
<h3>Distro Linux dan Keluarganya</h3>
<ol>
<li>Debian
<ul><li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul><li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>
</body>
</html>
The result:
Linux distributions and their families
- Debian
- Ubuntu
- Mint
- elementaryOS
- RedHat
- Fedora
- Slackware
Reference: https://www.petanikode.com/html-list/
0 Komentar untuk "Learning HTML: 3 Types of Lists in HTML You Need to Know"
Silahkan berkomentar sesuai artikel