Cara Membuat Daftar List HTML di Artikel Blog Lengkap untuk Pemula

Dalam dunia blogging, tampilan artikel yang terstruktur dan enak dibaca sangat penting untuk menarik minat pembaca. Salah satu elemen yang berperan besar dalam penyusunan konten yang baik adalah daftar atau list HTML. List HTML memungkinkan Anda menampilkan informasi dalam format yang rapi, sistematis, dan mudah dipindai oleh pembaca maupun mesin pencari. Artikel ini akan membahas secara mendalam berbagai jenis list HTML dan cara menggunakannya secara efektif di blog Anda.

Dalam penulisan postingan, adakalanya kita memerlukan bullet dan numbering penomoran untuk kelengkapan artikel kita. bullet biasanya otomatis akan berbentuk bulat kecil hitam. sedangkan numbering biasanya otomatis akan memulai dari angka 1 dan seterusnya.

Menurut Pengalaman pribadi saya. Kalau kita menggunakan numbered list yang ada di dasbor blogger, dan kemudian terpisah oleh kalimat atau paragraf, otomatis akan mulai dari angka 1 lagi. dan Ini pasti akan menjadi kendala ketika kita akan memulai dari nomor tertentu. Nah untuk itu berikut ini ada beberapa cara untuk membuat daftar list di postingan blog dengan menggunakan format penulisan pakai mode HTML.

Pengertian Daftar (List) dalam HTML

List atau daftar dalam HTML adalah elemen yang digunakan untuk menyusun sejumlah item secara terstruktur. HTML menyediakan beberapa jenis daftar yang memiliki fungsi dan karakteristik masing-masing, sehingga pengguna dapat memilih sesuai kebutuhan dalam penulisan artikel.

Namun untuk melakukan kreasi dan modifikasi maka anda harus berada pada mode HTML dalam penulisan artikel. Mungkin terbilang sangat rumit kalau belum terbiasa menulis artikel di mode HTML dan kebanyakan orang menulis artikel di blogger menggunakan Mode Menulis.

Dan di bawah ini ada beberapa contoh penulisan daftar list bullet dan numbering menggunakan kode HTML di blogger atau blogspot, untuk panduan dan langkah langkah nya sebagai berikut.

1. Tampilan Daftar Bullet List

Pada umumnya bullet terdiri dari tiga type yaitu, Circle (lingkaran Terisi) Disc (Lingkaran penuh) Square (Persegi 4 Terisi). Dan atribut penggunaan tag <ul> itu menentukan jenis bullet yang akan tampil pada postingan artikel kita.

Contoh 1: Type Circle


<ul type="circle">
    <li>Contoh 1</li>
    <li>Contoh 2</li>
    <li>Contoh 3</li>
</ul>

Hasilnya Seperti Berikut :

Contoh 1
Contoh 2
Contoh 3

Contoh 2: Type Dics


<ul type="disc">
    <li>Contoh 1</li>
    <li>Contoh 2</li>
    <li>Contoh 3</li>
</ul>

Hasilnya seperti Berikut :

Contoh 1
Contoh 2
Contoh 3

Contoh 3: Type Square


<ul type="square">
    <li>Contoh 1</li>
    <li>Contoh 2</li>
    <li>Contoh 3</li>
</ul>

Hasilnya seperti Berikut :

Contoh 1
Contoh 2
Contoh 3

2. Tampilan Daftar Numbering List

Type umum numbering adalah angka biasa (1 2 3 dst) romawi (I II III dst) maupun yang lain (A B C dst). Dan tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol>. Sedangkan untuk masing masing item atau list dibuka dengan <li> dan ditutup dengan </li>.

Contoh 1: Type Numbering


<ol>
   <li>Contoh Nomor 1</li>
       <li>Contoh Nomor 2</li>
       <li>Contoh Nomor 3</li>
       <li>Contoh Nomor 4</li>
       </ol>

Hasilnya seperti Berikut :

Contoh Nomor 1
Contoh Nomor 2
Contoh Nomor 3
Contoh Nomor 4

Contoh 2: Type Romawi


<ol type=I>
     <li>Contoh Romawi I   </li>
       <li>Contoh Romawi II </li>
       <li>Contoh Romawi III </li>
       </ol>

Hasilnya seperti Beriku :

Contoh Romawi I
Contoh Romawi II
Contoh Romawi III

Contoh 3: Type Huruf


<ol type=A>
       <li>Contoh Huruf A </li>
       <li>Contoh Huruf B </li>
       <li>Contoh Huruf C </li>
       <li>Contoh Huruf D </li>
       </ol>

Hasilnya seperti Berikut :

Contoh Huruf A
Contoh Huruf B
Contoh Huruf C
Contoh Huruf D

Penomoran Halaman Yang Terpisah Oleh Kalimat Atau Paragraf


<ol start = "4">
       <li>Untuk Nomor 4</li>
       <li>Untuk Nomor 5</li>
       <li>Untuk Nomor 6</li>
       <li>Untuk Nomor 7</li>
       </ol>

Hasilnya seperti Berikut :

Untuk Nomor 4
Untuk Nomor 5
Untuk Nomor 6
Untuk Nomor 7

Gabungan Bullet dan Numbering


<ol>
<li>satu</li>
<li>dua
<ul>
<li>bagian satu</li>
<li>bagian dua</li>
<li>bagian tiga</li>
</ul>
</li>
<li>tiga</li>
</ol>

Hasilnya seperti Berikut :

satu
dua
- bagian satu
- bagian dua
- bagian tiga
tiga

Kesalahan Umum Saat Menggunakan List HTML

Meskipun membuat list HTML terlihat mudah, Namun juga masih banyak pemula (dan bahkan yang sudah berpengalaman) Masih ada yang melakukan kesalahan. Berikut beberapa kesalahan umum yang perlu dihindari:

Tidak menutup tag dengan benar.
Menggunakan list untuk paragraf panjang (sebaiknya ringkas).
Menumpuk banyak nested list tanpa alasan jelas.
Tidak memberi heading atau konteks pada list.
Styling berlebihan hingga mengganggu keterbacaan.

Kesimpulan

Membuat daftar list dalam HTML merupakan keterampilan dasar yang sangat penting bagi para blogger maupun web developer pemula. Dengan memahami tiga jenis list utama — unordered list (<ul>), ordered list (<ol>), dan definition list (<dl>) — Anda bisa menyusun informasi dengan lebih rapi, terstruktur, dan mudah dipahami oleh pembaca.

Selain mempermudah pembaca dalam mencerna konten, penggunaan list HTML juga berkontribusi terhadap peningkatan kualitas SEO karena membantu mesin pencari memahami struktur konten dengan lebih baik. Namun demikian, penting untuk menggunakannya secara tepat dan proporsional, agar tidak mengganggu kenyamanan visual dan pengalaman pengguna.

Dengan menguasai teknik dasar ini, Anda telah selangkah lebih maju dalam menciptakan konten blog yang profesional, informatif, dan ramah SEO. Teruslah eksplorasi elemen HTML lainnya untuk memperkaya tampilan dan fungsionalitas artikel Anda.