HTML Dasar #9: Belajar Tag List Ul dan Ol

Salah satu fitur dasar dari HTML adalah kemampuan untuk membuat daftar atau list. List pada HTML dapat digunakan untuk mengorganisir informasi atau konten pada halaman web. Pada artikel ini, kita akan membahas cara membuat list pada HTML.

Gambar 9.1 : Ilustrasi Belajar Tag List Ul dan Ol

Daftar Isi

Pengenalan Tag List UL dan OL

Tag list UL dan OL digunakan untuk membuat daftar atau list pada halaman web. UL adalah kependekan dari Unordered List, sedangkan OL adalah kependekan dari Ordered List.

UL digunakan untuk membuat daftar tanpa urutan atau nomor, sementara OL digunakan untuk membuat daftar dengan urutan atau nomor. Tag-list memiliki struktur yang sama, yaitu tag <ul> dan <ol> sebagai parent tag, serta tag <li> sebagai child tag yang merepresentasikan setiap item di dalam daftar.

Membuat Daftar dengan Tag List UL

Tag list UL digunakan untuk membuat daftar tanpa urutan atau nomor. Berikut adalah contoh penggunaannya:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Hasilnya akan tampak seperti ini:

• Item 1
• Item 2
• Item 3

Perhatikan bahwa tag <ul> digunakan sebagai parent tag dan tag <li> digunakan sebagai child tag untuk setiap item di dalam daftar.

Membuat Daftar dengan Tag List OL

Tag list OL digunakan untuk membuat daftar dengan urutan atau nomor. Berikut adalah contoh penggunaannya:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Hasilnya akan tampak seperti ini:

1. Item 1
2. Item 2
3. Item 3

Perhatikan bahwa tag <ol> digunakan sebagai parent tag dan tag <li> digunakan sebagai child tag untuk setiap item di dalam daftar. Urutan atau nomor pada daftar ditentukan secara otomatis oleh browser.

Menambahkan Atribut pada Tag List

Tag list UL dan OL dapat diberikan atribut untuk menentukan tampilan atau perilaku dari daftar tersebut. Berikut adalah beberapa atribut yang dapat ditambahkan pada tag list:

• type: untuk mengubah jenis tanda pada daftar (hanya pada tag list OL). Jenis tanda yang tersedia adalah angka (1, 2, 3, ...), huruf (a, b, c, ...), huruf besar (A, B, C, ...), dan tanda simbol (†, ‡, §, ...).
• start: untuk menentukan nomor awal dari daftar (hanya pada tag list OL).
• reversed: untuk membalik urutan dari daftar (hanya pada tag list OL).
• class: untuk memberikan nama kelas pada daftar.
• id: untuk memberikan ID pada daftar.

Berikut adalah contoh penggunaan atribut pada tag list:

<ol type="I" start="4" reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Hasilnya akan tampak, sperti berikut :

4. Item 1
5. Item 2
6. Item 3

Perhatikan bahwa pada contoh di atas, atribut "type" digunakan untuk mengubah jenis tanda menjadi huruf besar, "start" digunakan untuk memulai daftar dari nomor 4, dan "reversed" digunakan untuk membalik urutan dari daftar.

Menggabungkan Tag List

Tag list dapat digabungkan dengan elemen HTML lainnya untuk membuat daftar yang lebih kompleks. Berikut adalah contoh penggunaannya:

<h2>Pekerjaan saya</h2>
<ul>
  <li>Programmer</li>
  <li>Desainer grafis</li>
  <li>Penulis</li>
</ul>
<h2>Keahlian saya</h2>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Hasilnya akan tampak seperti ini:

Pekerjaan saya

• Programmer
• Desainer grafis
• Penulis

Keahlian saya

1. HTML
2. CSS
3. JavaScript

Perhatikan bahwa pada contoh di atas, tag list UL dan OL digabungkan dengan tag <h2> untuk membuat daftar pekerjaan dan keahlian.

Kesimpulan

Tag list UL dan OL adalah elemen penting dalam HTML yang digunakan untuk membuat daftar atau list pada halaman web. UL digunakan untuk membuat daftar tanpa urutan atau nomor, sedangkan OL digunakan untuk membuat daftar dengan urutan atau nomor. Tag-list memiliki struktur yang sama, yaitu tag <ul> dan <ol> sebagai parent tag, serta tag <li> sebagai child tag yang merepresentasikan setiap item di dalam daftar. Tag list juga dapat diberikan atribut untuk menentukan tampilan atau perilaku dari daftar tersebut, serta dapat digabungkan dengan elemen HTML lainnya untuk membuat daftar yang lebih kompleks.

FAQ

1. Apa itu tag list dalam HTML?

Tag list dalam HTML adalah elemen yang digunakan untuk membuat daftar atau list pada halaman web.

2. Apa perbedaan antara tag list UL dan OL?

Tag list UL digunakan untuk membuat daftar tanpa urutan atau nomor, sedangkan tag list OL digunakan untuk membuat daftar dengan urutan atau nomor.

3. Apa saja atribut yang dapat ditambahkan pada tag list?

Beberapa atribut yang dapat ditambahkan pada tag list antara lain: type, start, reversed, class, dan id.

4. Bagaimana cara menggabungkan tag list dengan elemen HTML lainnya?

Tag list dapat digabungkan dengan elemen HTML lainnya dengan menempatkannya di dalam elemen tersebut, seperti tag <h2> atau <p>.

5. Apa manfaat dari penggunaan tag list dalam HTML?

Penggunaan tag list dalam HTML dapat memudahkan pembaca untuk membaca dan memahami informasi pada halaman web, serta membuat tampilan halaman web menjadi lebih terstruktur dan rapi.

HTML Dasar