Prev Next

Unordered Lists

Unordered lists (<ul>) display items with bullet points, making them ideal for lists without a specific sequence. Common use cases include shopping lists, feature lists, or simple navigations.

Key Topics

Basic UL Usage

Example: A simple unordered list with default bullet points.

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

Customizing Bullets

Example: Using CSS list-style-type to change the bullet style.

<style>
ul {
    list-style-type: square;
}
</style>

UL Example

This example shows a customized unordered list. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom UL</title>
    <style>
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <h1>Features</h1>
    <ul>
        <li>High Quality</li>
        <li>Affordable</li>
        <li>Durable</li>
    </ul>
</body>
</html>

Explanation: By changing the list-style-type, you alter the bullets' appearance. This customization helps match the list style to your design or brand.

Key Takeaways

  • Unordered lists are ideal for items without inherent order.
  • Default bullets are round, but you can customize them via CSS.
  • ULs are commonly used for navigations, menus, and feature lists.
  • List customization improves aesthetics and readability.
  • Keep lists consistent and easy to scan for better user experience.
Prev Next