Bahasa Penanda Hiperteks (HTML)/Senarai

HTML memiliki tiga jenis senarai, setiap satunya bersesuaian dengan jenis maklumat khusus:

"Senarai peluru" atau bullet list, untuk maklumat yang tidak memiliki hierarki dibuat dengan menggunakan tag-tag mula dan akhiran <ul> dan </ul>.
Senarai bernombor, bullet list, bagi maklumat yang mempunyai hierarki atau pangkat, seperti jujukan tindakan misalnya, dibuat dengan tag-tag <ol> dan </ol>.
Senarai definisi, dibuat dengan tag-tag <dl> dan </dl>.

Senarai Tak Berhierarki

Senarai tak berhierarki atau senarai tak teratur (undordered list) menampilkan senarai item yang didahului oleh tanda "peluru".

Sampel HTML:

  <ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
  </ul>

Paparan:

Item pertama
Item kedua
Item ketiga

Senarai Berhierarki

Senarai berhierarki atau senarai bernombor (ordered list) menyediakan senarai item, setiap satunya didahului oleh nombor yang bertambah dengan bilangan 1.

Sampel HTML:

  <ol>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
  </ol>

Penampilan:

Item pertama
Item kedua
Item ketiga

Senarai definisi

Senarai definisi memaparkan senarai perkataan yang ditebalkan, disusuli oleh baris baharu dan didahului tatatanda prefiks (lalai).

Sampel HTML:

  <dl>
    <dt>Perkataan 1</dt>
    <dd>Definisi Perkataan 1</dd>
    <dt>Perkataan 2</dt>
    <dd>Definisi Perkataan 2</dd>
  </dl>

Contoh paparan:

Perkataan 1: Definisi Perkataan 1
Perkataan 2: Definisi Perkataan 2

Jika dua perkataan berkongsi definisi yang sama, perkataan-perkataan tersebut boleh dikumpulkan bersama seperti berikut:

  <dl>
    <dt>Lembaran Gaya Lata</dt>
    <dt>CSS</dt>
    <dd>Takrif Lembaran gaya Lata (CSS)</dd>
    <dt>Perkataan 2</dt>
    <dd>Takrif Perkataan 2</dd>
  </dl>

Contoh paparan:

Lembaran Gaya Lata
CSS: Takrif Lembaran gaya Lata (CSS)
Perkataan 2: Takrif Perkataan 2

Jika sesebuah perkataan itu memiliki dua definisi, gunakan unsur dd bagi setiap definisi, misalnya, .

  <dl>
    <dt>Gnu</dt>
    <dd>Antelop besar</dd>
    <dd>"GNU is not Unix"</dd>
  </dl>

Example rendering:

Gnu: Antelop besar; "GNU is not Unix"

Definisi atau takrifa yang lebih panjang dapat dibahagikan kepada perenggan dengan menggunakan unusr-unsur sarang p dalam unsur dd.

  <dl>
    <dt>Perkataan 2</dt>
    <dd>
      <p>Perenggan pertama definisi</p>
      <p>Perenggan kedua definisi</p>
    </dd>
  </dl>

Contoh paparan:

Perkataan 2

Perenggan pertama definisi

Perenggan kedua definisi

Senarai Sarang

Senarai boleh ditulis bersarang. Contoh:

<ul>
  <li>Senarai    
    <ul>
      <li>Senarai bernombor</li>
      <li>Senarai tak bernombor</li>
    </ul>
  </li>
</ul>

Contoh paparan:

Senarai
- Senarai bernombor
- Senarai tak bernombor

Apabila ditulis bersarang, unsur yang bersarang perlu diletakkan dalam unsur induk li.

Contoh senarai bersarang yang silap:

<ul>
  <li>Senarai</li>
  <ul>
    <li>Senarai bernombor</li>
    <li>Senarai tak bernombor</li>
  </ul>
</ul>

Satu lagi contoh senarai yang tidak bersarang dengan betul, yang mengandungi dua unsur ul berturut-turut:

<ul>
   <li>
      Item senarai luar
      <ul>
        <ul>
          <li>
            Item senarai dalam dengan dua unsur "ul" berturut-turut
          </li>
        </ul>
      </ul>
   </li>
</ul>

Nota Berkaitan Pemformatan

Pemerian berkaitan tiga jenis senarai yang diperikan di atas merujuk kepada paparan lalai setiap kod HTML oleh pelyar web. Namun demikian, dengan menggunakan CSS, anda dapat mengubah pemformatan senarai. Misalnya, dengan CSS, anda dapat membuat senarai itu memdatar berbanding menegak.

Contoh

Sebuah resipi membuat lempeng yang menggunakan senarai:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ms">
  <head>
    <title>Lempeng</title>
  </head>
  <body>
    <h1>Resipi membuat Lempeng</h1>
    <p>Terjemahan <a href="http://en.wikibooks.org/wiki/Cookbook:Pancake">Resipi Buku Masakan Wikibuku Bahasa Inggeris</a>.</p>
    <p>Lempeng-lempeng ini amat sesuai buat sarapan seluruh keluarga.
       Lempeng amat sedap dengan sirap mapel.
       Lempeng ini makanan sihat (selagi anda tidak mengguna sirap berlebihan)
       oleh sebab tepung gandum penuh membekalkan keperluan serat semula jadi anda.
    </p>
    <h2>Ramuan</h2>
    <ul>
      <li>1 cawan tepung gandum penuh</li>
      <li>1 sudu besar gula</li>
      <li>2 camca serbuk penaik</li>
      <li>1/4 camca garam</li>
      <li>1 biji telur</li>
      <li>1 cawan susu</li>
      <li>2 sudu besar minyak</li>
      <li>sedikit minyak goreng</li>
    </ul>
    <h2>Prosedur</h2>
    <ol>
      <li>Minyak ke dalam kuali.</li>
      <li>Campurkan ramuan kering di dalam satu mangkuk.</li>
      <li>Di dalam mangkuk yang lain, pecahkan telur, kemudian tambah bahan-bahan basah yang lain, termasuk 2 sudu minyak</li>
      <li>Campurkan ramuan-ramuan kering dan basah agar menghilangkan kekeringan, tapi tidak lebih daripada itu.</li>
      <li>Panaskan kuali sehingga panas sederhana.
          Kuali dikira panas apabila setitik air mendidih.</li>
      <li>Curahkan sebiji lempeng, lebih kurang bulatan 10 sentimeter dengan menggunakan 1/4 cawan tepung sadur.</li>
      <li>Lempeng akan berbuih-buih. Apabila buih berhenti, dan bibir lempeng kekeringan sedikit, terbalikkannya.</li>
      <li>Apabila lempeng kelihatan sudah dimasak, keluarkannya dari kuali dan mulakan pemasakan satu lagi.</li>
    </ol>
    <h2>Hias Atas</h2>
    <p>Secara tradisinya, lempeng dihias dengan mentega dan sirap mapel.
    </p>
 </body>
</html>

TODO	Nota penterjemah: Anda boleh menaip kod ini dalam fail HTML anda dan buka fail dengan pelayar kesukaan anda bagi melihat paparan resipi ini.

.

Sebelum: Imej

Indeks

Berikut: Jadual