Generator Daftar HTML

Dari sekumpulan baris menjadi markup nyata

Daftar ada di mana-mana di web: menu navigasi, poin-poin fitur, instruksi langkah demi langkah, daftar bahan, dan daftar isi. Mengetik tag-nya secara manual itu melelahkan dan rawan kesalahan, karena setiap item membutuhkan elemen li-nya sendiri yang bersarang di dalam satu pembungkus ul atau ol, dan mudah lupa sebuah tag penutup di tengah daftar yang panjang. Generator ini menghilangkan gesekan itu: Anda menempel satu item per baris dan ia membangun struktur yang lengkap dan bersarang dengan benar untuk Anda.

Model berpikirnya adalah satu baris sama dengan satu item daftar. Apa pun yang Anda ketik pada sebuah baris menjadi teks dari sebuah li, dan alat membungkus seluruh kumpulannya dalam elemen wadah yang Anda pilih. Susun ulang atau sunting baris Anda lalu hasilkan ulang, dan markup-nya langsung mengikuti.

Berurut versus tak berurut: memilih elemen yang tepat

Pilihan antara ul dan ol bukan soal kosmetik, melainkan semantik. Daftar tak berurut (ul) dirender dengan poin dan menandakan bahwa urutan item tidak penting, seperti sekumpulan fitur produk. Daftar berurut (ol) dirender dengan angka dan menandakan bahwa urutan itu bermakna, seperti langkah-langkah dalam resep atau daftar peringkat. Pembaca layar mengumumkan keduanya secara berbeda, jadi memilih yang tepat adalah keputusan aksesibilitas, bukan sekadar visual.

Sebuah uji yang berguna: jika Anda bisa mengacak item tanpa mengubah maknanya, gunakan daftar tak berurut; jika mengacaknya membuat konten menjadi salah, gunakan daftar berurut. Pilih ol setiap kali urutan, peringkat, atau rujukan bernomor membawa informasi.

Sebuah contoh nyata

Ketik tiga baris, Apple, Banana, dan Cherry, pilih Unordered List, dan alat menghasilkan sebuah elemen ul yang berisi tiga elemen li, satu per buah, terindentasi dan tertutup dengan rapi. Beralih ke Ordered List dan tiga baris yang sama menjadi sebuah ol, yang dirender browser sebagai 1. Apple, 2. Banana, 3. Cherry. Tidak ada tag yang dibiarkan terbuka, dan indentasinya membuat struktur mudah dibaca dan dipelihara.

Daftar bernomor yang dimulai sesuai keinginan Anda

Daftar berurut tidak harus dimulai dari 1. Menggunakan kolom Start Number di Advanced Options menuliskan atribut start pada ol, sehingga Anda dapat melanjutkan urutan bernomor yang terputus oleh konten lain, atau menyambung dari tempat daftar sebelumnya berakhir. Misalnya, menyetel start ke 5 membuat item pertama dirender sebagai 5, berikutnya sebagai 6, dan seterusnya. Ini adalah cara yang bersih dan berbasis standar untuk mengendalikan penomoran alih-alih memalsukannya dengan mengetik angka ke dalam teks item, yang akan rusak jika daftar suatu saat perlu disusun ulang.

Menambahkan ID dan kelas untuk penataan gaya

Advanced Options memberi Anda tiga kait untuk CSS dan JavaScript. List ID menempatkan id unik pada ul atau ol, ideal untuk elemen sekali pakai yang ingin Anda sasar dengan tepat atau ditautkan dengan jangkar. List Class menerapkan sebuah kelas pada wadah sehingga ia mewarisi gaya bersama, seperti tata letak navigasi horizontal atau desain poin kustom. Item Class menerapkan sebuah kelas pada setiap li, yang sempurna ketika setiap item membutuhkan perlakuan yang sama, seperti jarak yang konsisten atau sebuah ikon.

Karena kelas dan ID-nya langsung masuk ke tag yang dihasilkan, markup-nya siap menyesuaikan dengan stylesheet yang sudah ada begitu Anda menempelnya, tanpa cari-dan-ganti sesudahnya.

Mengapa baris kosong diabaikan

Jika Anda tidak sengaja membiarkan baris kosong di antara item, atau sumber yang Anda tempel memiliki baris kosong di akhir, generator melewatinya alih-alih membuat li kosong. Ini disengaja: item daftar kosong yang tersesat akan dirender sebagai poin kosong atau nomor yang terlewat dan mengacaukan halaman. Aturannya adalah hanya baris dengan konten nyata dan bukan-spasi yang menjadi item daftar, jadi Anda bisa menempel teks yang formatnya longgar tanpa membersihkannya terlebih dahulu.

Mengapa daftar semantik penting untuk SEO dan aksesibilitas

Menggunakan markup daftar yang sesungguhnya alih-alih paragraf yang dipisahkan tanda hubung atau jeda baris berbuah manfaat melampaui penampilan. Mesin pencari mengurai struktur ul dan ol untuk memahami konten yang berkelompok, dan daftar yang benar berpeluang muncul dalam fitur seperti rich result untuk langkah-langkah dan konten how-to. Teknologi bantu juga diuntungkan: pembaca layar mengumumkan berapa banyak item yang dikandung sebuah daftar dan memungkinkan pengguna menavigasi item demi item, yang mustahil dilakukan saat poin dipalsukan dengan karakter teks.

Singkatnya, daftar semantik mengomunikasikan struktur kepada mesin sekaligus manusia. Meluangkan sejenak untuk menghasilkan markup ul atau ol yang benar membuat konten Anda lebih mudah diakses, lebih mudah dirayapi, dan lebih mudah dipelihara daripada tiruan yang diformat tangan.