HTML Lists
Objectives
Learn the basics of HTML list elements
<ul>
, <li>
<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>
<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.
Last updated