Let's switch back to the code, and going down into our menu, you can see we have our title, and then right below it, we have the content.

We're going to get rid of the content here, and we're going to have our list. The first one I'm going to use is a bullet point list, and I mainly use this one just because this is what I use the most in real-world development.

A bullet point, you may think, would have some kind of name that involved a bullet or BL or something like that. But in HTML, it's actually called an unordered list. So even when you think of a bullet point list, in HTML it is called an unordered list, and the tag to use it is <ul></ul>.

If you type UL, this is going to give you a wrapper that you can place in each one of the bullet points. Inside of an HTML list you have to put a <li></li> tag. Now the LI tag is short for list item.

menu.html

<ul>
    <li>Some menu item...</li>
</ul>

Now if I hit save, and come back, and hit refresh, you can see where we have this bullet point.

Now you can have a few more of those, so let me use Emmett right here to give us some examples. If you type in li*4>lorem8, it will populate it for you.

menu.html

<div class="square-text-wrapper">
    <h1>Lorem ipsum, solor sit amet consectetur adipisicing elit.</h1>

    <ul>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
        <li>Cupiditate facilis tempora mollitia, nulla perspiciatis corporis quisquam!</li>
        <li>Quis repellat iusto distinctio quas iure eaque aut?</li>
        <li>Explicabo in omnis quam aliquid molestias optio cumque?</li>
    </ul>
</div>  

Now you can see that that gives us some handy starter data. Hit refresh, and you see that is exactly what we have.

So that is working quite nicely. It's really not that difficult to create bullet points in HTML. Then obviously you can grab these if you want to style them. So you could grab each one of the list items. You can add a class to them or you could add an ID.

I wouldn't really recommend adding an ID because remember, that would mean that you would have to create an ID and a unique one for each list item. Typically you're adding some type of class. So you could do something like menu-item, something like that.

But we're not going to do that because the default that we're getting right there is exactly what we need. So that is how you can create a bullet point list. Now if you want to have numbers instead of the little bullet points, then what you can do is create what is called an ordered list.

So a UL is a bullet point list that is unordered. But for list items, like if you want to have numbers by them, it is an ordered list, and the wrapper tag for that is going to be <ol></ol>, short for ordered list.

That's all you need to do in order to have those numbers. Now I'm just going to copy our list because it's actually the same exact tag name, and then I'm going to put into in the next menu item.

menu.html

<div class="square-text-wrapper">
    <h1>Lorem ipsum, solor sit amet consectetur adipisicing elit.</h1>

    <ol>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
        <li>Cupiditate facilis tempora mollitia, nulla perspiciatis corporis quisquam!</li>
        <li>Quis repellat iusto distinctio quas iure eaque aut?</li>
        <li>Explicabo in omnis quam aliquid molestias optio cumque?</li>
    </ol>
</div>  

If I hit save here, come back and hit refresh, you can see that we now have numbers by the items.

So these are the two types of lists that you have access to use whenever you're working in HTML. Let me leave this here, just so you'll have it in the show notes, and that way you have access to both of them. And then I'm going to use this UL just so we have some matching content down in the other four items.

Now, you should have three bullet lists and one ordered or numbered list which is exactly what we have.

So in review, whenever you want to create a set of bullet points, the tag is <ul></ul>, which is short for unordered list. Whenever you want to have numbers by your list items, that is <ol></ol>, and it's short for ordered list.