Cara Membuat Ordered/Unordered List dengan Tanda Tertentu

Berikut ini cara membuat daftar berurutan (ordered list) dan daftar tak berurutan (unordered list) dengan tanda tertentu. Secara standar tampilan ordered list biasa berupa nomor atau alfabet dengan tanda titik. Sementara untuk standar tampilan unordered list berupa bulatan hitam (disk). Bila ingin menggunakan tanda lain, misal dengan tanda kurung, atau yang lain. perlu dilakukan sedikit penambahan skrip pada kode html. Demikian pula untuk unordered list. Berikut catatan yang dapat dilakukan untuk membuat penanda/batas untuk kedua-nya.

Bila ingin mencoba membuat datar berurutan atau tidak berurutan silakan salin dan modifikasi sesuai kebutuhan. Boleh langsung dicoba di postingan blog atau mode offline dibuat di notepad atau sejenisnya, simpan sebagai file html, dan coba dibuka menggunakan browser.

Untuk unordered list tipe lain silakan periksa di Character code di sini.

A. Daftar Berurutan

Daftar Unsur Kimia-A:

1. Hidrogen
2. Helium
3. Litium
4. Berilium

<p>Daftar Unsur Kimia-A:</p>
<ol>
   <li>Hidrogen</li>
   <li>Helium</li>
   <li>Litium</li>
   <li>Berilium</li>
</ol>

---

Daftar Unsur Kimia-B:

1. Boron
2. Karbon
3. Nitrogen
4. Oksigen

<p>Daftar Unsur Kimia-B:</p>
<ol type="A">
  <li>Boron</li>
  <li>Karbon</li>
  <li>Nitrogen</li>
  <li>Oksigen</li>
  </ol>

---

Daftar Unsur Kimia-C:

1. Fluor
2. Neon
3. Magnesium
4. Alumunium

<p>Daftar Unsur Kimia-C:</p>
<ol type="a">
  <li>Fluor</li>
  <li>Neon</li>
  <li>Magnesium</li>
  <li>Alumunium</li>
</ol>

---

Daftar Unsur Kimia-D:

1. Fluor
2. Neon
3. Natrium
4. Magnesium

<p>Daftar Unsur Kimia-D:</p>
<ol type="I">
  <li>Fluor</li>
  <li>Neon</li>
  <li>Natrium</li>
  <li>Magnesium</li>
</ol>

---

Daftar Unsur Kimia-E:

1. Alumunium
2. Silikon
3. Fosfor
4. Belerang

<p>Daftar Unsur Kimia-E:</p>
<ol type="i">
  <li>Alumunium</li>
  <li>Silikon</li>
  <li>Fosfor</li>
  <li>Belerang</li>
</ol>

---

Daftar Unsur Kimia-F:

1. Klor
2. Argon
3. Kalium
4. Kalsium

<style type="text/css">
  /* 2-class model: 1) */
  ol.ks_angka {counter-reset: list; margin-left: -30px;}
  ol.ks_angka > li {list-style: none;}
  ol.ks_angka > li:before {content: counter(list) ") "; counter-increment: list;}
  </style>

  <p>Daftar Unsur Kimia-F:</p>
  <ol class="ks_angka">
    <li>Klor</li>
    <li>Argon</li>
    <li>Kalium</li>
    <li>Kalsium</li>
  </ol>

---

Daftar Unsur Kimia-G:

1. Skandium
2. Titanium
3. Vanadium
4. Krom

<style type="text/css">
  /* 4-class model: A) */
  ol.ks_kapital {list-style-type:none; margin-left: -30px;} 
  ol.ks_kapital li:before {content: counter(section, upper-alpha) ") ";}
  ol.ks_kapital li {counter-increment:section;}
  </style> 
  
  <p>Daftar Unsur Kimia-G:</p><br />
  <ol class="ks_kapital"><br />
    <li>Skandium</li><br />
    <li>Titanium</li><br />
    <li>Vanadium</li><br />
    <li>Krom</li><br />
  </ol>

---

Daftar Unsur Kimia-H:

1. Mangan
2. Besi
3. Kobalt
4. Nikel

<style type="text/css">
  /* 6-class model: a) */
  ol.ks_kecil {list-style-type:none; margin-left: -30px;} 
  ol.ks_kecil li:before {content: counter(section, lower-alpha) ") ";}
  ol.ks_kecil li {counter-increment:section;}
  </style> 

  <p>Daftar Unsur Kimia-H:</p>
  <ol class="ks_kecil">
    <li>Mangan</li>
    <li>Besi</li>
    <li>Kobalt</li>
    <li>Nikel</li>
  </ol>

---

Daftar Unsur Kimia-I:

1. Tembaga
2. Seng
3. Galium
4. Germanium

<style type="text/css">
/* 8-class model: I) */
ol.ks_bromawi {list-style-type:none; margin-left: -30px;} 
ol.ks_bromawi li:before {content: counter(section, upper-roman) ") ";}
ol.ks_bromawi li {counter-increment:section;}
</style> 

<p>Daftar Unsur Kimia-I:</p>
<ol class="ks_bromawi">
  <li>Tembaga</li>
  <li>Seng</li>
  <li>Galium</li>
  <li>Germanium</li>
</ol>

---

Daftar Unsur Kimia-J:

1. Arsen
2. Selenium
3. Brom
4. Kripton

<style type="text/css">
  /* 10-class model: i) */
  ol.ks_kromawi {list-style-type:none; margin-left: -30px;} 
  ol.ks_kromawi li:before {content: counter(section, lower-roman) ") ";}
  ol.ks_kromawi li {counter-increment:section;}
  </style> 

  <p>Daftar Unsur Kimia-J:</p>
  <ol class="ks_kromawi">
    <li>Arsen</li>
    <li>Selenium</li>
    <li>Brom</li>
    <li>Kripton</li>
  </ol>

---

Contoh dan kode penulisan ordered list umum yang diapit tanda kurung.

Daftar Unsur Kimia-K:

1. Rubidium
2. Strontium
3. Itrium
4. Zirkonium

<style type="text/css">
  /* 1-class model: (1) */
  ol.kd_angka {list-style-type:none; margin-left: -30px; } 
  ol.kd_angka li:before {content:"(" counter(section, item) ") ";}
  ol.kd_angka li {counter-increment:section;}
  </style> 

  <p>Daftar Unsur Kimia-K:</p>
  <ol class="kd_angka">
    <li>Rubidium</li>
    <li>Strontium</li>
    <li>Itrium</li>
    <li>Zirkonium</li>
  </ol>

---

Daftar Unsur Kimia-L:

1. Niobium
2. Molibden
3. Teknetium
4. Ruthenium

<style type="text/css">
  /* 3-class model: (A) */
  ol.kd_kapital {list-style-type:none; margin-left: -30px;} 
  ol.kd_kapital li:before {content:"(" counter(section, upper-alpha) ") ";}
  ol.kd_kapital li {counter-increment:section;}
  </style> 

  <p>Daftar Unsur Kimia-L:</p>
  <ol class="kd_kapital">
    <li>Niobium</li>
    <li>Molibden</li>
    <li>Teknetium</li>
    <li>Ruthenium</li>
  </ol>

---

Daftar Unsur Kimia-M:

1. Rodium
2. Paladium
3. Perak
4. Kadmium

<style type="text/css">
  /* 5-class model: (a) */
  ol.kd_kecil {list-style-type:none; margin-left: -30px;} 
  ol.kd_kecil li:before {content:"(" counter(section, lower-alpha) ") ";}
  ol.kd_kecil li {counter-increment:section;}
  </style> 
  
  <p>Daftar Unsur Kimia-M:</p>
  <ol class="kd_kecil">
    <li>Rodium</li>
    <li>Paladium</li>
    <li>Perak</li>
    <li>Kadmium</li>
  </ol>

---

Daftar Unsur Kimia-N:

1. Indium
2. Timah
3. Antimon
4. Telurium

<style type="text/css">
  /* 8-class model: I) */
  ol.ks_bromawi {list-style-type:none; margin-left: -30px;} 
  ol.ks_bromawi li:before {content: counter(section, upper-roman) ") ";}
  ol.ks_bromawi li {counter-increment:section;}
  </style> 

  <p>Daftar Unsur Kimia-N:</p>
  <ol class="kd_bromawi">
    <li>Indium</li>
    <li>Timah</li>
    <li>Antimon</li>
    <li>Telurium</li>
  </ol>

---

Daftar Unsur Kimia-O:

1. Yodium
2. Xenon
3. Sesium
4. Barium

<style type="text/css">
  /* 9-class model: (i) */
  ol.kd_kromawi {list-style-type:none; margin-left: -30px;} 
  ol.kd_kromawi li:before {content:"(" counter(section, lower-roman) ") ";}
  ol.kd_kromawi li {counter-increment:section;}
  </style> 

  <p>Daftar Unsur Kimia-O:</p>
  <ol class="kd_kromawi">
    <li>Yodium</li>
    <li>Xenon</li>
    <li>Sesium</li>
    <li>Barium</li>
  </ol>

---

Jenis-jenis unsur dan contohnya:

1. Unsur Logam, contohnya:
   1. Besi
   2. Emas
   3. Perak
   4. Seng
2. Unsur Metaloid, contohnya:
   1. Boron
   2. Silikon
   3. Germanium
   4. Arsen
3. Unsur Nonlogam, terbagi:
   1. Gas mulia, contohnya:
      1. Helium
      2. Neon
      3. Argon
      4. Kripton
   2. Nonlogam reaktif, contohnya:
      1. Oksigen
      2. Belerang
      3. Klorin
      4. Bromin

<style type="text/css">
  /* 11-class model: angka dibulatin */
  ol.bulatangka {list-style: none;counter-reset: steps;}
  ol.bulatangka li {counter-increment: steps;}
  ol.bulatangka li::before {content: counter(steps);margin-right: 0.5rem;background: darkblue;color: white;width: 1.2em;height: 1.2em;border-radius: 50%;display: inline-grid; place-items: center;line-height: 1.2em;}
  ol ol.bulatangka li::before {background: green;}
  ol ol ol.bulatangka li::before {background: darkorchid;}
  </style> 

  <p>Jenis-jenis unsur dan contohnya:</p>
  <ol class="bulatangka">
    <li>Unsur Logam, contohnya:
      <ol class="bulatangka">
        <li>Besi</li>
        <li>Emas</li>
        <li>Perak</li>
        <li>Seng</li>
      </ol>
    </li>
    <li>Unsur Metaloid, contohnya:
      <ol class="bulatangka">
        <li>Boron</li>
        <li>Silikon</li>
        <li>Germanium</li>
        <li>Arsen</li>
      </ol>
    </li>
    <li>Unsur Nonlogam, terbagi:
      <ol class="bulatangka">
        <li>Gas mulia, contohnya:
          <ol class="bulatangka">
            <li>Helium</li>
            <li>Neon</li>
            <li>Argon</li>
            <li>Kripton</li>
          </ol>
        </li>
        <li>Nonlogam reaktif, contohnya:
          <ol class="bulatangka">
            <li>Oksigen</li>
            <li>Belerang</li>
            <li>Klorin</li>
            <li>Bromin</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>

---

B. Daftar Tak Berurutan

Contoh daftar tak berurutan default model disk:

• Proton
• Elektron
• Neutron

<p>Contoh daftar tak berurutan default:</p>
  <ul >
      <li>Proton </li>
      <li>Elektron </li>
      <li>Neutron </li>
  </ul>  

---

Contoh daftar tak berurutan model tanda panah:

• Hukum Lavoisier
• Hukum Newton
  • Hukum I Newton
  • Hukum II Newton
  • Hukum III Newton
• Hukum Pascal

<style type="text/css">
  ul.tanda1 {list-style: none; }
  ul.tanda1 li:before { content: '21E8    '}
  ul ul.tanda1 li:before { content: '2192    ' }
  </style> 

  <p>Contoh daftar tak berurutan</p>
  <ul class="tanda1">
      <li>Hukum Lavoisier </li>
      <li>Hukum Newton
        <ul class="tanda1">
          <li>Hukum I Newton</li>
          <li>Hukum II Newton</li>
          <li>Hukum III Newton</li>
        </ul>
         </li>
      <li>Hukum Pascal </li>
  </ul>

---

Contoh daftar tak berurutan model tanda *:

• Asam kuat
• Asam lemah
• Larutan netral

<style type="text/css">
  ul.tanda2 {list-style: none;}
  ul.tanda2 li:before { content: '*   '}
  </style> 

  <p>Contoh daftar tak berurutan</p>
  <ul class="tanda2">
      <li>Asam kuat </li>
      <li>Asam lemah </li>
      <li>Larutan netral </li>
  </ul> 

---

Contoh daftar tak berurutan model ➢

• Basa kuat
• Basa lemah
• Larutan netral

<style type="text/css">
  ul.tanda3 { list-style: none; }
  ul.tanda3 li:before { content: "27A2    " }
  </style> 

  <p>Contoh daftar tak berurutan</p>
  <ul class="tanda3">
      <li>Basa kuat</li>
      <li>Basa lemah </li>
      <li>Larutan netral </li>
  </ul>