วิธีสร้างรายการไม่มีลำดับ (Unordered List) Bullet รูปสี่เหลี่ยมใน HTML

ใช้ CSS property list-style-type: square ในแท็ก <ul> เพื่อเปลี่ยน bullet เริ่มต้นเป็นรูปสี่เหลี่ยมจัตุรัส

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Unordered List</title>
</head>
<body>
  <h1>Developed Countries</h1>
  <p>The list of developed countries:</p>
  <ul style="list-style-type:square">
    <li>US</li>
    <li>Australia</li>
    <li>New Zealand</li>
  </ul>
</body>
</html>

ผลลัพธ์

US
Australia
New Zealand

ค่าของ list-style-type ทั้งหมด

ค่า	รูปแบบ Bullet
`disc`	● วงกลมเต็ม (ค่าเริ่มต้น)
`circle`	○ วงกลมว่าง
`square`	■ สี่เหลี่ยมเต็ม
`none`	ไม่มี bullet

แนวทางปฏิบัติที่ดี

ใช้ class ใน CSS file แทน inline style:

.square-bullets {
  list-style-type: square;
}