List adalah salah satu elemen HTML yang berguna untuk menampilkan data secara berurutan. List biasany
Diperbaharui: 18 October 2020
List adalah salah satu elemen HTML yang berguna untuk menampilkan data secara berurutan. Biasanya <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>3 ditampilkan bersamaan tag <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>4 yang kepanjangan dari Unordered atau <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>5 yang kepanjangan dari Ordered. List sendiri ditampilkan secara default dengan bola hitam.
Unordered list
Unordered adalah salah satu elemen HTML kegunaanya membuat daftar yang tidak berurutan. Biasanya ditandai dengan bola hitam secara defaultnya. Cara membuat unordered menggunakan <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>4 dan <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>3.
Contoh:
Hasilnya:
- Html
- Css
- Javascript
- Php
Memilih gaya penandaan unordered
ValueKegunaanyadiscMenampilkan gaya bola hitam ( default )circleMenampilkan gaya bola putihsquareMenampilkan gaya kotaknoneMenghapus gayaContoh menggunakan disc ( Default ):
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>Hasil menggunakan disc ( Default ):
- Html
- Css
- Javascript
- Php
Contoh menggunakan circle:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: circle"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>Hasil menggunakan circle:
- Html
- Css
- Javascript
- Php
Contoh menggunakan square:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: square"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>Hasil menggunakan square:
- Html
- Css
- Javascript
- Php
Contoh menggunakan none:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: circle"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>Hasil menggunakan none:
- Html
- Css
- Javascript
- Php
Ordered list
Ordered adalah salah satu elemen HTML kegunaanya membuat daftar yang berurutan. Biasanya ditandai dengan angka secara default. Cara membuat Ordered menggunakan <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>5 dan <!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <ul style="list-style-type: disc"> <li>Html</li> <li>Css</li> <li>Javascript</li> <li>Php</li> </ul> </body> </html>3.