Blog

Web Development

4 Cara Membuat Bullet di HTML: Tutorial Mudah dan Lengkap

Siti Khadijah Azzukhruf Firdausi

•

20 September 2023

•

1470

Membuat bullet di HTML adalah salah satu keterampilan dasar yang perlu dikuasai oleh setiap web developer. Pasalnya, bullet dapat meningkatkan keterbacaan dan estetika dari sebuah halaman web.

Baik itu untuk menampilkan daftar belanja, langkah-langkah instruksional, atau hanya untuk organisir konten secara lebih rapi. Untuk membantu kamu menguasai semua hal tentang ini, MinDi sudah siapkan panduannya. Baca sampai habis ya!

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. Secara umum, HTML adalah bahasa markup standar yang digunakan untuk membuat dan mendesain halaman web.

Sebagai fondasi dari web, HTML memungkinkan pembuatan struktur halaman web melalui penggunaan berbagai elemen yang ditandai dengan tag. Elemen-elemen ini dapat mencakup teks, gambar, tautan, formulir.

Selain itu, HTML juga mencakup banyak konten lainnya yang membentuk pengalaman browsing di internet.

Manfaat Penggunaan Bullet di HTML

1. Penyajian Informasi yang Terstruktur

Bullet membantu dalam mengorganisir informasi dalam format yang terstruktur dan rapi. Dengan memecah konten menjadi poin-poin, pengguna dapat dengan mudah memindai dan memahami informasi utama yang disampaikan.

Mereka juga bisa memahami informasi tersebut tanpa harus membaca teks secara keseluruhan.

2. Memperbaiki Keterbacaan

Konten yang disajikan dalam bentuk bullet lebih mudah dibaca dan dipahami. Pembaca cenderung tertarik pada informasi yang disusun dalam list karena memudahkan pemrosesan visual dan kognitif, serta meningkatkan retensi informasi.

3. Menonjolkan Poin Penting

Bullet digunakan untuk menonjolkan poin-poin kunci atau data penting dalam sebuah halaman. Hal ini sangat berguna dalam menarik perhatian pengguna ke informasi paling relevan atau aksi yang diinginkan (call-to-action).

4. Kemudahan Navigasi

Dalam konten yang panjang atau kompleks, bullet dapat membantu pengguna menavigasi melalui informasi dengan lebih mudah.

Mereka dapat cepat menemukan bagian yang relevan dengan kebutuhan mereka. Hal ini yang mampumeningkatkan pengalaman pengguna secara keseluruhan.

5. Fleksibilitas dalam Desain

Bullet memungkinkan variasi dalam desain dan presentasi. HTML dan CSS dapat digunakan bersama-sama untuk menyesuaikan tampilan list.

Misalnya, mengubah jenis bullet, menambahkan spasi, atau menerapkan gaya tertentu. Dengan begitu, estetika visual dari halaman web bisa ditingkatkan.

6. Mendukung Aksesibilitas

List yang terstruktur dengan baik mendukung aksesibilitas web dengan memudahkan screen readers untuk menginterpretasikan konten. Selain itu, ini juga memudahkan penyajian konten kepada pengguna dengan kebutuhan khusus.

Hal ini membantu memastikan bahwa informasi dapat diakses oleh semua orang, terlepas dari kemampuan atau cara mereka mengakses web.

7. Meningkatkan SEO

List yang terstruktur dengan baik juga dapat berkontribusi pada optimisasi mesin pencari (SEO). Mesin pencari menghargai konten yang terstruktur dan mudah dipahami.

Selain itu, bullet list dapat membantu menonjolkan keyword atau frasa penting relevan dengan topik yang dibahas.

Bagaimana Cara Membuat Bullet di HTML?

Setelah memahami beberapa manfaatnya, mari pahami cara membuat bullet di HTML. Secara umum, caranya tergantung pada jenis daftar yang ingin dibuat. Kategorinya ada dua yakni unordered list atau ordered list.

Berikut adalah panduan dasar mengenai cara membuat bullet di HTML dengan unordered dan ordered list:

1. Membuat Daftar Tak Berurutan (Unordered List)

Cara membuat bullet di HTML pertama bisa diterapkan di unordered list. Daftar tak berurutan menggunakan bullet points ini sebagai penanda item.

Kamu dapat membuatnya menggunakan elemen <ul> untuk menandai awal dan akhir dari daftar. Lalu, <li> (list item) untuk setiap item dalam daftar.

Dalam contoh di atas, setiap item daftar dikelilingi oleh tag <li>...</li>. Selain itu, keseluruhan daftar dikelilingi oleh tag <ul>...</ul>. Ini akan menghasilkan daftar tak berurutan dengan bullet points standar.

2. Membuat Daftar Berurutan (Ordered List)

Cara membuat bullet di HTML berikutnya adalah dengan menggunakan ordered list. Daftar berurutan ini menggunakan angka atau huruf sebagai penanda urutan item.

Kamu dapat membuatnya menggunakan elemen <ol> untuk menandai awal dan akhir dari daftar. Lalu, kamu tambahkan <li> untuk setiap item dalam daftar.

Sama seperti daftar tak berurutan, setiap item daftar dikelilingi oleh tag <li>...</li>. Namun, dalam kasus ini, seluruh daftar dikelilingi oleh tag <ol>...</ol>. Ini akan menghasilkan daftar berurutan dengan angka sebagai penanda urutan item.

Baca Juga: Cara Mengatur Posisi Text pada HTML Ternyata Mudah, Lho!

3. Menyesuaikan Tampilan Daftar

Cara membuat bullet di HTML terakhir adalah menyesuaikan tampilan daftar. Kamu dapat menyesuaikan tampilan daftar dengan CSS. Misalnya, kamu bisa mengubah jenis bullet atau angka, margin, dan padding dari daftar.

Mengubah Jenis Bullet:

Mengubah Penomoran Daftar:

Menghilangkan Bullet atau Angka:

Dengan menggunakan elemen <ul>, <ol>, dan <li> bersama dengan CSS untuk styling, kamu dapat membuat berbagai jenis daftar di HTML. Daftar itu tidak hanya berfungsi untuk menampilkan konten secara terstruktur, tetapi juga menarik secara visual.

Itulah beberapa penjelasan lengkap tentang membuat bullet di HTML baik dari manfaat hingga caranya. Dari penjelasan, dapat disimpulkan bahwa membuat bullet di HTML ini bisa meningkatkan pengalaman pengguna secara keseluruhan.

Berbicara tentang HTML, MinDI ada program yang cocok bagi kamu yang mau belajar ini lebih dalam lagi. Bagi yang tertarik, MinDi rekomendasikan kamu untuk ikut Bootcamp Frontend Web Development Dibimbing.

Dengan mengikuti program ini, kamu bisa belajar semua hal berkaitan dengan web development. Mulai dari teori hingga praktik dengan real-case project. Intinya, kamu bakal dibimbing sampai jadi! Menarik bukan?

Segera daftar dan bangun keahlian serta karirmu di web development bareng Dibimbing.id!