CLOSE

HTML Lists

HTML Lists are used to neatly list content on a page. Let's change the code in our file to include a list.

<!DOCTYPE html>
<html>
    <head>
        <title>This is my page title.</title>
    </head>
    
    <body>
        <h1>My First Web Page</h1>
        
        <h2>What is this?</h2>
        <p>This is a page put together using HTML.</p>
        
        <h2>My favorite car brands</h2>
        <ul>
            <li>Honda</li>
            <li>Nissan</li>
            <li>Chevy</li>
        </ul>
    </body>
</html>
Expand

Look at the results in your browser. You will see a neat, bulleted list. If you change the <ul> (unordered list) to an <ol> (ordered list) you will see numbers instead of bullets.

Nesting Lists

You can also nest lists inside one another. Below is an example.

<html>
    <head>
        <title>This is my page title.</title>
    </head>
    
    <body>
        <h1>My First Web Page</h1>
        
        <h2>What is this?</h2>
        <p>This is a page put together using HTML.</p>
        
        <h2>My favorite car brands</h2>
        <ul>
            <li>
                Honda and Models:
                
                <ol>
                    <li>S2000</li>
                    <li>Accord</li>
                    <li>Civic</li>
                </ol>
                
            </li>
            <li>Nissan</li>
            <li>Chevy</li>
        </ul>
    </body>
</html>
Expand

Share This Tutorial

Link To This Tutorial

Tutorial URL
https://stepbystephtml.com/tutorial/15/html-beginner-tutorial

HTML Link

Help Us to Help You

This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.

Amount

Link to Us

Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.

HTML Link

Copyright 2019 Step By Step HTML. All Rights reserved.