HTML Lists - Ordered and Unordered

4:44

In this video, we'll learn about three elements that will help us create basic HTML lists. These lists, can be things like your top ten favorite movies or things to get at a store. When we move on to CSS, we'll explore these lists further by using them for things like navigation in a web site.


Video Transcript

  • 0:00

    [?Jazzy Music?]

  • 0:07

    In this video, we'll learn about 3 HTML elements

  • 0:10

    that will help us create lists.

  • 0:13

    These lists can be things like your Top 10 favorite movies

  • 0:16

    or things to get at the store.

  • 0:19

    Let's create our first list, using the OL element--

  • 0:23

    or Ordered List element.

  • 0:26

    The OL element or <ol> tag

  • 0:28

    represents a list of items with a specific order,

  • 0:31

    as opposed to a list of items with no order.

  • 0:35

    So let's try it out.

  • 0:37

    We'll type out <ol>

  • 0:39

    and then we'll go ahead and close our <ol> tag.

  • 0:42

    Now, we can't just use the ordered list tags on their own.

  • 0:46

    To create each list item, we need to use the list item element,

  • 0:51

    which is a pair of <li> tags.

  • 0:53

    So let's try that out.

  • 0:55

    We'll open up our ordered list element,

  • 0:57

    and then add our first list item--

  • 1:04

    and then close it.

  • 1:06

    And we'll create a few more of these.

  • 1:10

    And we'll just replace the text here.

  • 1:13

    So we'll say, \"The next thing,\"

  • 1:19

    \"The third item,\"

  • 1:22

    and then finally, we'll say, \"This one comes last.\"

  • 1:27

    So we'll go ahead and save that out,

  • 1:29

    switch over to the browser, and refresh the page.

  • 1:32

    And as you can see, we've created an ordered list.

  • 1:36

    Notice that these list items are numbered automatically.

  • 1:40

    We didn't actually have to add in these numbers.

  • 1:42

    Also notice that this text is slightly indented from the left side of the browser.

  • 1:49

    Now let's go ahead and try changing the order of our list items to see what happens.

  • 1:54

    We'll switch back to our text editor

  • 1:56

    and let's move the third item

  • 1:59

    so that it's the first item in our list.

  • 2:02

    If we go back to the browser and refresh the page,

  • 2:06

    you can see that the third item is now up at the top

  • 2:10

    but the numbering hasn't actually changed.

  • 2:13

    This numbering will happen automatically, no matter what your text actually says.

  • 2:19

    Next, very similar to the Ordered List element,

  • 2:22

    is the Unordered List element--or <ul> tag.

  • 2:26

    This represents a list that has no specific order.

  • 2:29

    So let's go ahead and try it out.

  • 2:32

    All we have to do is change <ol> to read <ul>.

  • 2:37

    So we'll go ahead and change our opening and our closings tags

  • 2:41

    and then we can just leave all of our list items in place.

  • 2:45

    We'll switch back to the browser, and refresh--

  • 2:48

    and you'll notice that our numbers have changed to bullet points,

  • 2:53

    so no specific order is implied.

  • 2:57

    Finally, unordered lists can be nested.

  • 3:00

    So let's go ahead and try that out.

  • 3:03

    We'll switch back to our text editor,

  • 3:05

    and let's just go ahead and copy our entire unordered list

  • 3:10

    and then we'll open up our first list item.

  • 3:17

    Right after the text, we'll go ahead and paste in that same list;

  • 3:22

    and let's go ahead and switch back to the browser, and refresh.

  • 3:26

    And as you can see, we now have a slightly

  • 3:29

    more indented nested list underneath the first item.

  • 3:35

    Let's go ahead and try to nest things a little bit further.

  • 3:38

    We'll switch back to our text editor

  • 3:41

    and inside of our nested list,

  • 3:44

    we'll add another nested list to the second item;

  • 3:49

    and then maybe to the third item in the first level list,

  • 3:55

    we'll add another nested list--just like that.

  • 3:59

    So we'll save that out, switch back to the browser, and refresh.

  • 4:03

    And as you can see, we have a very nicely formatted set of nested lists.

  • 4:09

    And for each level of nesting, we have a slightly different bullet style,

  • 4:14

    which is applied by default from the browser.

  • 4:17

    The first style is just a solid bullet point.

  • 4:21

    The second is a hollow bullet point.

  • 4:24

    And then finally, we have our square bullet points--

  • 4:28

    pretty nifty.

  • 4:30

    Ordered and unordered lists come up fairly frequently in HTML.

  • 4:34

    When we move on to CSS,

  • 4:36

    we'll learn how to use lists for other things,

  • 4:38

    like navigation in a webpage. [ ?Jazzy music?]

  • 4:41

    [THINK VITAMIN MEMBERSHIP] [EST'D 2010] [membership.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.