#32 Membuat daftar/list tidak berurutan dengan tag ul pada HTML
tag ul adalah tag yang digunakan untuk membuat daftar yang tidak berurutan ( berpoin ).
tag ul ditulis bersama dengan tag li. tag ul berasal dari kata unordered list dan tag li berasal dari kata list item
Baca juga : Membuat Garis Horizontal menggunakan Tag hr pada HTML
cara penulisan sintaks:
<!DOCTYPE html>
<html>
<head>
<title> Membuat list tidak berurutan dengan tag ul </title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)Perbedaan tag ul di HTML 4 dan HTML 5
pada HTML 4 terdapat atribut compact dan type, sekarang atribut tersebut tidak di gunakan lagi di HTML 5 , untuk pengetahuan kita bahas apa itu atribut compat dan type
- Atribut Compact
compact termasuk atribut boolean, atribut boolean memiliki nilai true dan false, jika kita menambahkan atribut compact maka akan bernilai true dan jika tidak akan berisi false atau tidak ada atribut compactnya
atribut ini digunakan untuk mengurangi ruang antara baris atas dan bawah, atribut ini sekarang tidak di support oleh semua browser. cara penulisan sintaks :
<ul compact>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>Code language: HTML, XML (xml)walaupun atribut compact sudah tidak di support lagi, namun kita bisa menampilkan persis seperti tampilan asli dari atribut compact. Dengan cara menambah style=”line-height: 80%”, klik coba script untuk melihat hasilnya 🙂
<!DOCTYPE html>
<html>
<head>
<title> Menggunakan atribut compact di tag ul </title>
</head>
<body>
<ul style="line-height: 80%">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)- Atribut Type
atribut type digunakan untuk menentukan jenis penanda yang akan digunakan dalam daftar yang tidak diurutkan.
walaupun sekarang atribut ini masih di support oleh semua browser namun kemungkinan akan di hilangkan karena tidak digunakan lagi di HTML 5
kita bisa merubah penanda dengan nilai atribut disc, circle dan square , jika kita menggunakan CSS gunakan style=”list-style-type: square” , square bisa diganti dengan disc atau circle.
kalau ingin menghilangkan tandanya gunakan style=”list-style-type: none”, disc adalah tampilan default penanda list.
langsung saja kita praktekkan dengan melihat perbedaan disc, circle, square dan menghilangkan tandanya.
<!DOCTYPE html>
<html>
<head>
<title> Menggunakan atribut type di tag ul </title>
</head>
<body>
<ul type="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type: disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type: square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type: circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type: none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)Pencarian di thohirdev:
- pengertian tag ul dan fungsi tag ul
- apa itu ul dan li di html
- ul html, ul lihtml, html ul, html ul li