Cara Melanjutkan List Style OL atau UL Setelah Paragraf atau Gambar

Cara melanjutkan list-style OL atau UL setelah paragraf atau gambar di blog agar konten rapi dan SEO-friendly

Daftar isi

Baca Juga

Membuat artikel blog yang terstruktur dan mudah dibaca adalah kunci untuk menarik perhatian pembaca. Salah satu elemen penting dalam penulisan konten adalah penggunaan daftar, baik itu daftar bernomor (ordered list/OL) maupun daftar tak bernomor (unordered list/UL).

Daftar ini membantu memecah informasi menjadi poin-poin yang jelas. Namun, tantangan muncul ketika kamu ingin memasukkan paragraf atau gambar di tengah daftar tanpa merusak tampilan list tersebut. Bagaimana caranya agar daftar tetap rapi dan nomor urut tidak terputus?

Pernah ngga kamu membuat artikel di blog dengan menggunakan daftar tau penomoran (list) dan ditengah-tengah list ingin menambahkan gambar atau paragraf dan teap melanjutkan penomoran setelah paragrap baru atau gambar.

Loh bukannya langsung bisa ya melanjutkan penomoran atau list setelah paragraf atau gambar? Yuk kita bahas dulu maksud yang saya sebutkan diatas...

Melanjutkan list style setelah ada paragraf atau gambar memang bisa terasa rumit, terutama jika ingin menjaga alur penomoran pada OL tetap berurutan. Disini, banyak blogger, terutama yang baru memulai, sering kali bingung bagaimana cara mengatur struktur list ini agar daftarnya tetap konsisten.

Ketika membuat artikel, kamu mungkin ingin menyisipkan penjelasan tambahan atau ilustrasi visual seperti gambar di antara poin-poin daftar atau penomoran. Misalnya, kamu sedang menulis tutorial dan ingin menjelaskan langkah ketiga lebih detail dengan paragraf atau gambar sebelum melanjutkan ke langkah keempat.

Jika tidak diatur dengan benar, daftar atau penomoran tersebut bisa terlihat berantakan atau nomor urutnya kembali ke awal. Nah, solusi untuk masalah ini sebenarnya sederhana, dan tidak perlu keahlian coding tingkat lanjut untuk menerapkannya.

Apa yang saya tulis ini sebenarnya sudah banyak diterapkan, tapi banyak yang belum memahaminya juga. Memang saat membuat penomoran atau list bisa langsung menambahkan paragraf atau gambar dibawanya. Tapi perataan dari paragraf atau gambar ini akan memiliki perataan yang sama dengan penggunaan list atau penomoran.

Tapi yang saya maksud disini adalah perataan antara list dan pragraf baru atau gambar tidak sama dengan aturan default pada list tersebut. Sehingga tampilan paragraf atau gambar berdiri sendiri. Dan penomoran atau list tetap dilanjutkan ke nomor berikutnya setelah paragraf baru atau gambar tanpa merusak tampilan list tersebut.

Mengapa List-Style Penting dalam Artikel Blog?

Daftar, baik bernomor maupun tak bernomor, adalah alat yang ampuh untuk menyampaikan informasi secara ringkas. Poin-poin dalam daftar memudahkan pembaca untuk memahami langkah-langkah, fakta, atau ide tanpa harus membaca paragraf panjang.

Selain itu, daftar juga meningkatkan skor SEO karena mesin pencari seperti Google menyukai konten yang terstruktur. Namun, jika daftar terputus oleh elemen lain seperti paragraf atau gambar, struktur artikel bisa menjadi tidak konsisten.

Bayangin kamu sedang menulis artikel tentang resep masakan. Kamu membuat daftar langkah-langkah memasak dengan menggunakan <ol>, tapi di tengah langkah ingin menyisipkan gambar hasil masakan atau penjelasan tambahan.

Jika kamu tidak tahu cara melanjutkan list-style dengan benar, nomor urut bisa kembali ke nomor 1, atau daftar Anda terlihat tidak rapi. Inilah mengapa memahami cara mengelola daftar dalam HTML itu sangat penting.

Memahami Dasar List-Style: OL dan UL

Sebelum masuk ke cara melanjutkan list-style, saya jelasin dulu perbedaan antara <ol> dan <ul>. Tag <ol> (ordered list) digunakan untuk daftar bernomor, seperti langkah-langkah prosedur atau peringkat. Setiap item dalam daftar ditulis dengan tag <li> (list item). Contohnya:

1. Langkah pertama...
2. Langkah kedua...
3. Langkah ketiga...

Sementara itu, <ul> (unordered list) digunakan untuk daftar tak bernomor, biasanya ditandai dengan bullet points. Contohnya:

• Poin pertama...
• Poin kedua...
• Poin ketiga...

Kedua jenis daftar ini sering digunakan dalam artikel blog untuk memecah informasi. Namun, masalah muncul ketika kamu ingin menyisipkan konten lain di tengah daftar, terutama pada <ol> yang memiliki urutan nomor.

Masalah Umum: Daftar Terputus oleh Paragraf atau Gambar

Saat menulis artikel, kamu mungkin ingin menambahkan paragraf atau gambar untuk memperjelas poin tertentu. Misalnya, setelah poin ketiga dalam daftar bernomor, kamu menyisipkan paragraf untuk menjelaskan lebih detail atau menambahkan gambar sebagai ilustrasi.

Jika langsung menutup tag <ol> dan membuka yang baru, nomor urut akan dimulai lagi dari nomor 1, bukan melanjutkan ke nomor 4. Hal ini bisa membingungkan pembaca dan membuat artikel terlihat tidak profesional.

Contoh masalahnya:

<ol>
  <li>Langkah pertama...</li>
  <li>Langkah kedua...</li>
  <li>Langkah ketiga...</li>
</ol>
<p>Penjelasan tambahan atau gambar...</p>
<ol>
  <li>Langkah keempat... (akan dimulai dari 1, bukan 4)</li>
</ol>
  

Untungnya, HTML menyediakan solusi sederhana untuk masalah ini, yaitu dengan menggunakan atribut start.

Menggunakan Atribut Start untuk Melanjutkan List-Style

Untuk melanjutkan list style pada <ol> setelah terputus oleh paragraf atau gambar, kamu bisa menggunakan atribut start. Atribut ini memungkinkan untuk menentukan nomor awal untuk daftar bernomor.

Misalnya, jika daftar pertama berakhir di nomor 3, kamu bisa memulai daftar berikutnya dari nomor 4 dengan menambahkan start="4".

Contoh kode:

<ol>
  <li>Langkah pertama...</li>
  <li>Langkah kedua...</li>
  <li>Langkah ketiga...</li>
</ol>
<p>Penjelasan tambahan atau gambar...</p>
<ol start="4">
  <li>Langkah keempat...</li>
  <li>Langkah kelima...</li>
</ol>
  

Dengan kode di atas, nomor urut akan berlanjut dari 4, bukan mulai dari 1. Ini adalah cara paling sederhana dan efektif untuk melanjutkan list-style tanpa mengganggu alur artikel.

Melanjutkan List-Style UL: Lebih Mudah, Tapi Tetap Perlu Perhatian

Jika Anda menggunakan <ul>, melanjutkan list-style lebih mudah karena tidak ada nomor urut yang perlu diperhatikan. Kamu cukup menutup tag <ul> pertama, menyisipkan paragraf atau gambar, lalu membuka <ul> baru untuk melanjutkan daftar. Contoh:

<ul>
  <li>Poin pertama...</li>
  <li>Poin kedua...</li>
</ul>
<img src="gambar.jpg" alt="Ilustrasi">
<ul>
  <li>Poin ketiga...</li>
  <li>Poin keempat...</li>
</ul>
  

Meski begitu, pastikan jarak antar daftar terlihat konsisten. Kamu bisa menggunakan CSS untuk mengatur margin atau padding agar daftar tidak terlihat terlalu terpisah.

DEMO

Dibawah ini adalah contoh langsung penggunaan atribut start untuk penomoran:

1. Nomor pertama untuk kalimat pertama
2. Nomor kedua untuk kalimat kedua
3. Nomor tiga untuk kalimat ketiga

Paragraf baru yang tidak berada didalam list penomoran....

4. Nomor empat melanjutkan nomor ketiga sebelumnya
5. Nomor lima untuk kalimat kelima

Tips CSS untuk Membuat Daftar Lebih Rapi

Selain struktur HTML, juga bisa menggunakan CSS untuk membuat daftar terlihat lebih menarik dan terintegrasi dengan konten lain. Berikut beberapa tips:

• Atur margin dan padding: Gunakan margin-bottom pada <ol> atau <ul> agar jarak dengan paragraf atau gambar terlihat seragam.
• Ganti gaya bullet: Untuk <ul>, Anda bisa mengubah bullet default dengan list-style-type, misalnya ke circle atau square.
• Sesuaikan nomor urut: Untuk <ol>, Anda bisa mengubah format nomor dengan list-style-type, seperti lower-roman atau upper-alpha.

Contoh CSS sederhana:

ol, ul {
  margin-bottom: 1.5em;
}
ol {
  list-style-type: decimal;
}
ul {
  list-style-type: circle;
}
  

Dengan CSS, kamu bisa membuat daftar atau penomoran lebih menarik secara visual tanpa mengorbankan fungsi.

Menangani List-Style di CMS seperti WordPress

Jika menggunakan CMS seperti WordPress, melanjutkan list-style bisa sedikit berbeda. Editor visual WordPress kadang-kadang menghapus atribut seperti start jika tidak bekerja dalam mode teks atau kode.

Untuk mengatasinya, pastikan untuk mengedit artikel dalam mode "Text" atau gunakan plugin seperti Classic Editor. Jika menggunakan editor blok (Gutenberg), tambahkan blok HTML kustom untuk menulis kode <ol start="4"> secara manual.

Langkah-langkah di WordPress:

1. Buat daftar pertama menggunakan blok "List" di editor.
2. Tambahkan blok "Paragraph" atau "Image" untuk menyisipkan konten.
3. Gunakan blok "Custom HTML" untuk membuat daftar kedua dengan atribut start.

Dengan cara ini, kamu bisa memastikan daftar tetap berurutan meski menggunakan CMS.

Mengoptimalkan List-Style untuk SEO

Daftar yang terstruktur dengan baik tidak hanya memudahkan pembaca, tapi juga membantu mesin pencari memahami konten Anda. Google sering menampilkan daftar sebagai "rich snippets" di hasil pencarian, seperti langkah-langkah atau FAQ. Untuk memaksimalkan SEO:

• Gunakan kata kunci yang relevan dalam poin-poin daftar.
• Pastikan struktur HTML valid dan tidak ada tag yang terbuka atau tertutup secara salah.
• Gunakan heading (<h2>, <h3>) untuk memisahkan bagian artikel.

Dengan mengikuti tips ini, artikel akan lebih mudah ditemukan oleh mesin pencari.

Kapan Harus Menggunakan Satu OL atau UL?

Dalam beberapa kasus, kamu mungkin tergoda untuk menyisipkan paragraf atau gambar sebagai bagian dari item daftar (<li>) agar tidak perlu memutus <ol>. Contoh:

<ol>
  <li>Langkah pertama...</li>
  <li>Langkah kedua...</li>
  <li>
    Langkah ketiga...
    <p>Penjelasan tambahan...</p>
  </li>
  <li>Langkah keempat...</li>
</ol>
  

Meski cara ini valid, tampilannya bisa kurang rapi karena paragraf atau gambar akan dianggap bagian dari item daftar. Sebaiknya gunakan atribut start untuk memisahkan daftar, kecuali memang ingin konten tambahan menjadi bagian dari poin tertentu.

Kesalahan yang Harus Dihindari

Ada beberapa kesalahan umum yang sering dilakukan saat melanjutkan list-style:

• Mengabaikan atribut start pada <ol>, sehingga nomor urut kembali ke 1.
• Menulis kode HTML yang tidak valid, seperti lupa menutup tag <li> atau <ol>.
• Tidak mengatur jarak antar elemen, sehingga daftar dan paragraf terlihat menumpuk.

Dengan memeriksa kode HTML Anda dan melakukan uji coba di browser, masalah ini bisa dihindari.

Silahkan dicoba.... Seni dalam menulis artikel blog.