HTML Lists

HTML lists are used to display items in list format. There are three types of lists: ordered, unordered, and definition.

Unordered List

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered List

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Definition List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>

    <dt>JavaScript</dt>
    <dd>Programming language for the web</dd>
</dl>

List Attributes

type (Ordered)

<ol type="1">
    <li>Numbers</li>
</ol>

<ol type="A">
    <li>Uppercase letters</li>
</ol>

<ol type="a">
    <li>Lowercase letters</li>
</ol>

<ol type="I">
    <li>Uppercase Roman numerals</li>
</ol>

<ol type="i">
    <li>Lowercase Roman numerals</li>
</ol>

type (Unordered)

<ul type="disc">
    <li>Bullet</li>
</ul>

<ul type="circle">
    <li>Circle</li>
</ul>

<ul type="square">
    <li>Square</li>
</ul>

start and value

<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
</ol>

<ol>
    <li value="10">Item 10</li>
    <li>Item 11</li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
        ul {
            list-style: none;
            display: flex;
            gap: 1rem;
        }

        a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="academic.html">Academic</a></li>
            <li><a href="research.html">Research</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a list of study programs.

<h2>Study Programs</h2>

<ol>
    <li>
        <strong>B.Sc. Informatics Engineering</strong>
        <ul>
            <li>4 Years</li>
            <li>144 Credits</li>
        </ul>
    </li>
    <li>
        <strong>B.Sc. Information Systems</strong>
        <ul>
            <li>4 Years</li>
            <li>144 Credits</li>
        </ul>
    </li>
    <li>
        <strong>B.Sc. Computer Engineering</strong>
        <ul>
            <li>4 Years</li>
            <li>144 Credits</li>
        </ul>
    </li>
</ol>

<h2>Glossary</h2>

<dl>
    <dt>Credits</dt>
    <dd>Semester credit unit</dd>

    <dt>IPK</dt>
    <dd>Cumulative grade point average</dd>

    <dt>KRS</dt>
    <dd>Course registration form</dd>
</dl>

Nested Lists

<ul>
    <li>Item 1
        <ul>
            <li>Sub-item 1.1</li>
            <li>Sub-item 1.2</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub-item 2.1</li>
            <li>Sub-item 2.2</li>
        </ul>
    </li>
</ul>

Best Practices

Use list-style: none: For navigation
Correct structure: Use ul/ol as needed
Accessibility: Use aria-label when needed
CSS styling: Use CSS for appearance
Correct nesting: Don't nest too deeply

Summary

HTML lists display items in list format. Choose the list type that fits your needs.