Membuat Daftar HTML Menggunakan Tag LIST
Tag <li> pada html digunakan untuk mendefinisikan list item pada dokumen html. Tag ini digunakan bersamaan dengan tag <ol> dan <ul>. Tag li membutuhkan awalan dan juga akhiran.
Catatan: akhiran tag dapat diabaikan jika item list jug disusul oleh elemen <li> lainnya, atau jika tidak terdapat konten lainnya pada elemen parent tersebut.
Sintak: <li> List Items </li>
Sebelum memahami lebih dalam materi tentang Membuat Daftar HTML Menggunakan Tag LIST, terlebih dahulu pelajari materi tentang: Membuat Judul HTML Menggunakan Atribut Title HTML, Membuat Label Teks HTML Menggunakan Tag Label, dan Membuat Huruf Input Keyboard HTML Menggunakan Tag KBD.
Sintak: <li> List Items </li>
Nilai atribut:
value: atribut value digunakan untuk menentukan angka permulaan dari item list. Item list dimulai dari angka dan nilainya akan meningkat setiap terjadi penambahan list. Nilai atribut hanya bekerja untuk tag <ol>.
value: atribut value digunakan untuk menentukan angka permulaan dari item list. Item list dimulai dari angka dan nilainya akan meningkat setiap terjadi penambahan list. Nilai atribut hanya bekerja untuk tag <ol>.
Contoh: penggunaan tag <li> didalam tag <ol>.
<!DOCTYPE html>
<html>
<body>
<h1>
Blog Elfan
</h1>
<h2>
HTML Tag Li
</h2>
<ol>
<li>Bons</li>
<li>Sudo</li>
<li>FakFak</li>
<li>Gate</li>
<li>Placement</li>
</ol>
</body>
</html>
Output:
Blog Elfan
HTML Tag Li
- Bons
- Sudo
- FakFak
- Gate
- Placement
Contoh: penggunaan tag <li> dengan tag <ul>.
Contoh: pengunaan tag <li> dengan nilai atribut untuk menciptakan list.
Penerapan style pada tag <li>: beberapa properti CSS juga bisa diterapkan pada elemen <li>, seperti: list-style, list-style-image, list-style-position, dan list-style-type. Properti-properti tersebut akan secara langsung diterapkan pada elemen <li> meskipun umumnya diterapkan pada elemen parent.
<!DOCTYPE html>
<html>
<body>
<h1>
Blog Elfan
</h1>
<h2>
HTML Tag Li
</h2>
<ul>
<li>Bons</li>
<li>Sudo</li>
<li>FakFak</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>
Output:
Blog Elfan
HTML Tag Li
- Bons
- Sudo
- FakFak
- Gate
- Placement
Contoh: pengunaan tag <li> dengan nilai atribut untuk menciptakan list.
<!DOCTYPE html>
<html>
<body>
<h1>
Blog Elfan
</h1>
<h2>
HTML Tag Li
</h2>
<ol>
<li value="5">FakFak</li>
<li>Sudo</li>
<li>MKN</li>
<li>Gate</li>
<li>Placement</li>
</ol>
</body>
</html>
Output:
Blog Elfan
HTML Tag Li
- FakFak
- Sudo
- MKN
- Gate
- Placement
Penerapan style pada tag <li>: beberapa properti CSS juga bisa diterapkan pada elemen <li>, seperti: list-style, list-style-image, list-style-position, dan list-style-type. Properti-properti tersebut akan secara langsung diterapkan pada elemen <li> meskipun umumnya diterapkan pada elemen parent.
Membuat daftar HTML merupakan salah satu keterampilan penting dalam pengembangan situs web. Daftar digunakan untuk menyusun informasi secara terstruktur dan mudah dipahami. Dalam pembuatan halaman web, tag daftar HTML memiliki peran yang sangat besar dalam memberikan urutan atau pengelompokan terhadap informasi. Tag daftar HTML terdiri dari beberapa jenis, masing-masing dengan fungsinya sendiri-sendiri, yang dapat disesuaikan dengan kebutuhan.
Secara umum, daftar dalam HTML dibagi menjadi dua jenis utama: daftar terurut dan daftar tidak terurut. Masing-masing jenis daftar ini memiliki penggunaan yang berbeda sesuai dengan jenis informasi yang hendak ditampilkan. Daftar terurut digunakan ketika urutan item sangat penting, misalnya dalam langkah-langkah instruksi atau daftar yang memerlukan prioritas. Sebaliknya, daftar tidak terurut digunakan ketika urutan item tidak mempengaruhi makna atau struktur informasi tersebut, seperti dalam daftar fitur atau elemen yang tidak perlu disusun dalam urutan tertentu.
Daftar dalam HTML terdiri dari beberapa tag penting yang harus dipahami untuk membuatnya dengan benar. Tag yang paling dasar adalah tag daftar itu sendiri. Untuk daftar terurut, tag yang digunakan adalah `<ol>` atau "daftar terurut". Di dalam tag ini, setiap item dalam daftar ditandai dengan tag `<li>`, yang berfungsi sebagai penanda setiap elemen atau item dalam daftar tersebut. Sebagai contoh, jika ingin membuat sebuah langkah-langkah yang perlu dilakukan dalam urutan tertentu, maka tag `<ol>` akan digunakan untuk membungkus seluruh daftar, sementara setiap langkah akan diletakkan di dalam tag `<li>`.
Sebaliknya, untuk membuat daftar tidak terurut, tag yang digunakan adalah `<ul>` atau "daftar tidak terurut". Meskipun secara struktur tag yang digunakan tidak jauh berbeda dengan daftar terurut, perbedaannya terletak pada jenis daftar yang dihasilkan. Pada daftar tidak terurut, tidak ada urutan numerik atau urutan lain yang menyertai item-item dalam daftar. Tag `<ul>` akan membungkus seluruh daftar, sementara setiap item dalam daftar ditempatkan dalam tag `<li>`. Daftar ini cocok digunakan untuk menyusun item yang tidak memerlukan urutan tertentu, seperti daftar belanja atau daftar fitur suatu produk.
Selain itu, terdapat pula jenis daftar lainnya yang lebih jarang digunakan, yaitu daftar definisi. Daftar definisi ini menggunakan tag `<dl>`, yang berfungsi untuk mendefinisikan istilah tertentu beserta penjelasannya. Setiap entri dalam daftar definisi ditandai dengan tag `<dt>` untuk istilah yang akan didefinisikan, dan tag `<dd>` untuk penjelasan atau definisi dari istilah tersebut. Daftar ini berguna ketika ingin memberikan penjelasan lebih rinci tentang istilah atau konsep tertentu, seperti dalam kamus atau panduan teknis.
Salah satu hal penting yang perlu diperhatikan saat membuat daftar adalah pengaturan tampilan daftar tersebut. Meskipun HTML memberikan struktur dasar untuk daftar, penataan tampilan atau desain daftar tersebut sering kali dilakukan dengan menggunakan bahasa pengaturan tampilan yang terpisah, yaitu bahasa pengaturan halaman. Dalam pengaturan tampilan ini, beberapa elemen dapat diubah, seperti bentuk tanda atau urutan dalam daftar terurut, bentuk titik atau ikon pada daftar tidak terurut, dan jarak antar item dalam daftar. Penataan tampilan ini bertujuan untuk membuat daftar lebih mudah dibaca dan sesuai dengan desain keseluruhan situs web.
Tidak hanya itu, daftar dalam HTML juga dapat digabungkan dengan elemen lainnya, seperti tabel atau paragraf, untuk memperkaya struktur informasi. Misalnya, jika ingin menambahkan keterangan atau penjelasan lebih lanjut di bawah setiap item dalam daftar, maka elemen lain seperti paragraf atau teks dapat ditambahkan. Ini memungkinkan pengembang web untuk menyusun informasi dengan cara yang lebih fleksibel, sehingga mempermudah pengguna untuk menemukan dan memahami isi dari halaman tersebut.
Selain penggunaan dasar tag daftar, terdapat juga beberapa fitur lanjutan yang dapat meningkatkan fungsionalitas daftar dalam HTML. Salah satunya adalah penambahan tautan dalam daftar, yang memungkinkan setiap item dalam daftar dapat mengarahkan pengguna ke halaman lain atau bagian lain dari situs web. Ini sangat berguna dalam membuat daftar navigasi atau menu situs web. Dengan menggunakan tag tautan di dalam tag `<li>`, setiap item dalam daftar dapat berfungsi sebagai elemen navigasi yang dapat diakses oleh pengguna.
Salah satu tantangan dalam menggunakan tag daftar HTML adalah memastikan agar struktur dan informasi yang disajikan tetap jelas dan mudah diakses. Hal ini terutama penting dalam pembuatan situs web yang mengutamakan aksesibilitas. Aksesibilitas adalah prinsip yang menjamin bahwa situs web dapat diakses dan digunakan oleh semua orang, termasuk yang memiliki keterbatasan fisik atau kognitif. Dalam hal ini, pembuatan daftar dengan struktur yang baik dapat mempermudah pembaca layar dalam membaca dan menginterpretasikan informasi yang disajikan dalam daftar.
Dalam proses pembuatan daftar, pengembang web perlu memperhatikan bahwa daftar tidak hanya digunakan untuk menyusun item-item dalam urutan tertentu. Daftar juga dapat berfungsi untuk menyusun informasi secara hierarkis. Misalnya, jika terdapat kategori utama dan subkategori di dalamnya, maka daftar terurut atau tidak terurut dapat digunakan untuk menyusun hubungan antara kategori dan subkategori tersebut. Dengan cara ini, pengunjung situs web dapat dengan mudah memahami keterkaitan antar informasi yang disajikan.
Namun, meskipun HTML memberikan kemudahan dalam membuat daftar, penting untuk diingat bahwa daftar tidak boleh digunakan secara sembarangan. Penataan dan pemilihan jenis daftar yang tepat akan memastikan bahwa informasi yang disajikan tetap terstruktur dengan baik. Setiap jenis daftar memiliki tujuan tertentu dan harus digunakan sesuai dengan kebutuhan informasi yang ingin disampaikan.
Dalam konteks desain halaman web, penggunaan daftar dalam HTML juga harus disesuaikan dengan desain visual keseluruhan. Setiap daftar harus dirancang agar mudah dibaca, tidak berlebihan, dan tidak mengganggu elemen lain dalam halaman. Selain itu, dalam pembuatan daftar, perhatian juga harus diberikan pada penggunaan ruang putih atau jarak antar item. Jarak antar item yang cukup akan memudahkan pengguna dalam membaca dan memahami daftar.
Sebagai tambahan, pembuatan daftar juga dapat melibatkan pengaturan tampilan visual yang lebih canggih, seperti penggunaan gambar atau ikon di samping item dalam daftar. Hal ini dapat meningkatkan pengalaman pengguna dan memberikan tampilan yang lebih menarik. Penggunaan gambar atau ikon pada daftar sangat berguna ketika informasi yang disampaikan bersifat visual, seperti daftar produk atau layanan yang menawarkan gambaran visual tentang apa yang disajikan.
Secara keseluruhan, membuat daftar HTML menggunakan tag daftar adalah proses yang cukup sederhana namun memiliki peran yang sangat penting dalam menyusun informasi di situs web. Dengan pemahaman yang tepat tentang jenis daftar yang digunakan dan cara menatanya, pengembang web dapat menyajikan informasi dengan cara yang lebih terstruktur dan mudah dipahami. Baik itu untuk membuat langkah-langkah instruksi, daftar belanja, atau daftar produk, penggunaan tag daftar dalam HTML dapat membantu menciptakan halaman web yang lebih terorganisir dan efisien.
Referensi Tambahan:
- 4 Atribut Utama pada Penggunaan Tag Option HTML
- 3 Atribut Utama pada Penggunaan Tag Output HTML
- 4 Atribut Utama Penggunaan Tag Param pada HTML
- 11 Elemen Utama Tag Phrase pada HTML
- 2 Contoh Program Penggunaan Tag Pre pada HTML
- 2 Contoh Program Penggunaan Tag q untuk Kutipan pada HTML
- Membuat Teks Coret pada Dokumen HTML Menggunakan Tag S
Artikel ini akan dibaca oleh: Izaaz Waskito Widyarto, Khoirotun Nisa'Privani, Lailatul Mafiqroh, Lavenia Fitri, dan Maghfira Khaula Firli.
6 komentar untuk "Membuat Daftar HTML Menggunakan Tag LIST"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan tag li pada html?
BalasHapusTag li pada HTML digunakan untuk merepresentasikan item dalam daftar. Tag tersebut harus terkandung dalam elemen induk pada html.
HapusApa fungsi dari tag li pada dokumen html?
BalasHapusTag li mendefinisikan item daftar yang digunakan dalam daftar berurutan atau tag OL, dan juga pada daftar tidak berurutan atau tag UL, dan juga pada daftar menu atau tag < menu >.
HapusBagaimana cara menggunakan tag li pada html?
BalasHapusTag < li > ditulis dengan menggunakan kode program < li >< /li > yang disisipkan pada daftar item. Elemen pada tag li harus ditempatkan diantara tag ol atau tag ul untuk menyediakan setiap item daftar dalam elemen tersebut.
Hapus