Elemen apa untuk membuat list dengan nomor?

Question

HTML Fadlullah Fadul December 3, 2018

Table of Contents Show

Deskripsi Penjelasan HTML ol tag
Attributes Atribut HTML Tag <ol>
Global Attributes Atribut Secara Global (Keseluruhan)
Event Attributes Atribut event (Peristiwa)
Example Contoh HTML <ol> element
Contoh Lengkap
Bagaimana membuat list di mana list itemnya ditampilkan dengan Bullet?
Tag apa yang bisa digunakan untuk membuat daftar dengan nomor berurutan?
List dalam HTML ada berapa?
Apa itu list dalam HTML?

Referensi Belajar HTML ol tag. Tutorial dan panduan mengenai element <ol>...</ol> yang digunakan untuk menulis daftar item. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <ol>.

Deskripsi Penjelasan HTML ol tag

Ol menunjukkan sebuah ordered list, yaitu daftar (list) beberapa item yang terstruktur atau berurutan. Sehingga, apabila item-item tersebut diubah urutannya, maka makna yang tersirat dalam dokumen tersebut pun ikut berubah.

Item-item daftar tersebut, ditulis di dalam element <li> yang menunjukkan list item. Kemudian, <li> ditulis didalam elemen <ol>.

HTML <ol> element digunakan apabila kita memiliki beberapa item teks atau konten yang ingin diurutkan berdasarkan penomoran otomatis (misalnya, item-item tersebut ingin diurutkan dari angka 1 sampai 10 dan seterusnya). Deretan list tersebut tidak hanya ditandai dengan angka saja, tetapi dapat menggunakan huruf, Angka Romawi atau bahkan simbol bulat sederhana.

<ol> element dapat ditulis secara bersarang (nested), artinya dalam sebuah <ol> element, dapat ditulis <ol> element yang lain ataupun <ul> secara bertumpuk yang ditulis didalam element <li> yang merupakan anak element dari <ol>.

Attributes Atribut HTML Tag <ol>

reversed artinya dibalik, menunjukkan daftar (list) yang dibalik urutannya. Misalnya, dari 5 sampai 1 (5,4,3,2,1) dikenal dengan istilah descending. Ini adalah boolean attribute, jadi tidak disebutkan value-nya juga tidak masalah.

Menentukkan awal penomoran untuk individual item dalam daftar (list) yang diurutkan.

Menentukkan tipe penomoran otomatis.

Global Attributes Atribut Secara Global (Keseluruhan)

<ol> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes Atribut event (Peristiwa)

<ol> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example Contoh HTML <ol> element

Contoh 1

Contoh <ol> sederhana

<ol>
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)</li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>

Contoh 2

Contoh <ol> dengan attribute start.

<ol start="5">
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)</li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>

Contoh 3

Contoh nestedol. Artinya, <ol> element yang terletak didalam <li>, yang merupakan anak element ol yang lain.

<ol>
  <li>SD (Sekolah Dasar)</li>
  <li>SMP (Sekolah Menengah Pertama)
    <ol>
      <li>Kelas VII</li>
      <li>Kelas VIII</li>
      <li>Kelas IX</li>
    </ol>
  </li>
  <li>SMA (Sekolah Menengah Atas)</li>
</ol>

Untuk contoh dibawah ini (Contoh lengkap), agak sedikit berbeda menggunakan roman numbers. Silahkan edit dan mencoba sendiri.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML ol roman numbers list example</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  </head>
  <body>
    <ol type="A">
    <li>SD (Sekolah Dasar)</li>
    <li>SMP (Sekolah Menengah Pertama)
      <ul>
        <li>Kelas VII</li>
        <li>Kelas VIII</li>
        <li>Kelas IX</li>
      </ul>
    </li>
    <li>SMA (Sekolah Menengah Atas)</li>
    </ol>
  </body>
</html>

Bagaimana membuat list di mana list itemnya ditampilkan dengan Bullet?

Untuk membuat list tanpa nomor, disebut juga bulleted list yaitu : Mulai dengan tag pembuka list <ul> Masukkan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan)

Tag apa yang bisa digunakan untuk membuat daftar dengan nomor berurutan?

Tag <ol> berfungsi untuk membuat daftar secara Terurut/Ordered List atau sebuah daftar yang penting urutannya. Ordered List maksudnya yaitu sebuah daftar item yang di-awali dengan penomoran otomatis yang berurut dari angka 1 sampai 10 dan seterusnya, atau bisa juga urutan huruf dari A ke Z.

List dalam HTML ada berapa?

Ada tiga jenis list di HTML: Ordered List adalah list yang terurut; Unordered List adalah list yang tak terurut; Descriptiona List adalah list yang berisi definisi.

Apa itu list dalam HTML?

list atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.

Cara Belajar Apa