HTML Lists

Post by **C0D3D** »

Creating an unordered list

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Unordered List</title>
</head>
<body>
    <h2>HTML Unordered List</h2>
	<ul>
        <li>Ketchup</li>
        <li>Mustard</li>
        <li>Milk</li>
    </ul>
    <hr>
    <h2>HTML Nested Unordered List</h2>
    <ul>
        <li>Lettuce
            <ul>
                <li>Croutons</li>
                <li>Pudding</li>
            </ul>
        </li>
        <li>Pepper</li>
        <li>Onions</li>
    </ul>
</body>
</html>

Creating an ordered list

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Ordered List</title>
</head>
<body>
    <h2>HTML Ordered List</h2>
	<ol>
        <li>Close the door</li>
        <li>Do the dishes</li>
        <li>Sweep floor</li>
    </ol>
    <hr>
    <h2>HTML Nested Ordered List</h2>
    <ol>
        <li>Close the door</li>
        <li>Do the dishes</li>
        <li>Sweep floor
            <ol>
                <li>Polish car</li>
                <li>Water flowers</li>
            </ol>
        </li>
    </ol>
</body>
</html>

Creating a definition list

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Description or Definition List</title>
</head>
<body>
    <h2>HTML Definition List</h2>
	<dl>
        <dt>Bread</dt>
        <dd>A baked food made of flour.</dd>
        <dt>Coffee</dt>
        <dd>A drink made from roasted coffee beans.</dd>
    </dl>
</body>
</html>

Creating a nested list - Single level

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML nested list</title>
</head>
<body>
	<h1>HTML Nested List</h1>
	<ul>
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
                <li>Item 2.3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Creating a nested list - Multi level

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML nested list</title>
</head>
<body>
	<h1>HTML Nested List</h1>
	<ul>
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
                <li>Item 2.3</li>
            </ul>
        </li>
        <li>Item 3
            <ul>
                <li>Item 3.1</li>
                <li>Item 3.2
                    <ul>
                        <li>Item 3.2.1</li>
                        <li>Item 3.2.2</li>
                        <li>Item 3.2.3</li>
                    </ul>
                </li>
                <li>Item 3.3</li>
            </ul>
        </li>
    </ul>
</body>
</html>

HTML Lists

HTML Lists

Who is online