HTML - Daftar
HTML menawarkan tiga cara kepada penulis web untuk menentukan daftar informasi. Semua daftar harus berisi satu atau lebih elemen daftar. Daftar mungkin berisi -
<ul>- Daftar yang tidak berurutan. Ini akan mencantumkan item menggunakan peluru biasa.
<ol>- Daftar yang dipesan. Ini akan menggunakan skema angka yang berbeda untuk mencantumkan item Anda.
<dl>- Daftar definisi. Ini mengatur item Anda dengan cara yang sama seperti yang diatur dalam kamus.
Daftar HTML Tidak Berurutan
Daftar tidak berurutan adalah kumpulan item terkait yang tidak memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan HTML<ul>menandai. Setiap item dalam daftar ditandai dengan poin.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Jenis Atribut
Kamu dapat memakai typeatribut untuk tag <ul> untuk menentukan jenis peluru yang Anda suka. Secara default, ini adalah disk. Berikut adalah opsi yang memungkinkan -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Contoh
Berikut adalah contoh di mana kami menggunakan <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Contoh
Berikut adalah contoh di mana kami menggunakan <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Contoh
Berikut adalah contoh di mana kami menggunakan <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Daftar Urutan HTML
Jika Anda diminta untuk meletakkan item Anda dalam daftar bernomor alih-alih berpoin, maka daftar urutan HTML akan digunakan. Daftar ini dibuat dengan menggunakan<ol>menandai. Penomoran dimulai dari satu dan bertambah satu untuk setiap elemen daftar berurutan yang diberi tag <li>.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Jenis Atribut
Kamu dapat memakai typeatribut untuk tag <ol> untuk menentukan jenis penomoran yang Anda suka. Secara default, ini adalah angka. Berikut adalah opsi yang memungkinkan -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Contoh
Berikut adalah contoh di mana kami menggunakan <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Contoh
Berikut adalah contoh di mana kami menggunakan <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Contoh
Berikut adalah contoh di mana kami menggunakan <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Contoh
Berikut adalah contoh di mana kami menggunakan <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Contoh
Berikut adalah contoh di mana kami menggunakan <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Atribut awal
Kamu dapat memakai startatribut untuk tag <ol> untuk menentukan titik awal penomoran yang Anda butuhkan. Berikut adalah opsi yang memungkinkan -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Contoh
Berikut adalah contoh di mana kami menggunakan <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Daftar Definisi HTML
HTML dan XHTML mendukung gaya daftar yang disebut definition listsdimana entri terdaftar seperti dalam kamus atau ensiklopedia. Daftar definisi adalah cara ideal untuk menyajikan glosarium, daftar istilah, atau daftar nama / nilai lainnya.
Daftar Definisi menggunakan tiga tag berikut.
- <dl> - Mendefinisikan awal dari daftar
- <dt> - Sebuah istilah
- <dd> - Definisi istilah
- </dl> - Mendefinisikan akhir dari daftar
Contoh
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -