HTML Lists
Last updated
Last updated
Learn the basics of HTML list elements
<ul>
, <li>
Remember to use httpserver
to live test your webpage
In our real-estate-listings.html
page, under the <h4>2014</h4>
tag we added in the previous lesson, we should add some months in a list. In HTML, we can list things using the <ul>
tag, which stands for unordered list, along with the <li>
tag, list item.
To make a list, we write out the opening and closing <ul>
tags, and inside them, we'll add <li>
tags, each listing a single month:
Lists are very flexible and we can even nest lists inside of lists. If we wanted to add specific dates to a month, we could put a list inside of our Oct
list item:
Save your file, start up httpserver
, and on the browser tab where you've got the server displaying our webpage, add /real-estate-listings.html
to the end of the URL path to see our Listings page. In the browser, we'll see that ul
produces a bulleted list on the page, and will display nested lists indented further from the left.
<ol>
The other type of list is the ordered list, which is written as <ol>
instead of <ul>
. Both use <li>
tags inside, but this time, <ol>
will display a numbered list instead of bullets:
Add the above to your Listings page, save and check out your live page to see the difference.
View HTML Lists on Learn.co and start learning to code for free.