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 -