HTML Lists (Video Version)

{'type': u'plain'}

You know what I love? Lists.

Have you ever made a
to-do or shopping list?

Have you ever read a
list on a webpage like,

"Top 10 Most Ridiculous Dog Faces"?

I bet you have, because
the world is full of lists.

HTML gives us a few tags to make lists,

and we're going to practice them by making

a list of reasons why
rabbits make great pets.

Now, to begin a bulleted list,

we must start with the < ul > tag.

What does < ul > stand for?

Well I bet you can guess what
the "l" stands for, list.

The "u", is a little trickier,
it stands for unordered,

and it means that the browser
won't number the list items.

It will just add little bullets.

To see what I mean let's
add the first item,

"They're Furry".

See the little circle on the side?

That's a bullet.

Now what do you suppose < li > stands for?

The "l" is list, and the
"i" is item, list item.

Every time we want to add a new item,

we need to add a new <
li > under the < ul > .

Every < ul > should have at
least one < li > under it,

because a list with no
items is pretty boring.

Okay, let's add some more so,

"Great listeners" and,

"Eat all your leftover carrots"

Okay this should be a
pretty convincing list.

I don't know who wouldn't want
a rabbit after reading this.

Now, I didn't number this list

because I don't think that one reason

is more important than the other,

but there are a lot of times
when we do want numbered lists.

Like, if we wanted to make a

"Top three most famous rabbits" list.

So, to start our numbered list,

we're going to use an <
ol > instead of a < ul > .

Have you figured out
what < ol > stands for?

Here's a hint, just chop the first

two letters off of what < ul > stood for.

That's right, it stands
for "ordered list".

And it tells a browser to automatically

number each new item.

We still use < li > for adding new items

inside of the list however.

So we'll put, "Bugs Bunny",

we've got "Thumper",

and of course, can't
forget the "Easter Bunny".

The neat thing about numbered lists is

that the browser takes care
of the numbering for us.

So if we rearrange items,
delete, or add new ones,

it always updates the numbers correctly.

Like if all of you tell me that you

don't know who "Thumper" is.

Then, first, I'll tell you all that you

should really go watch "Bambi".

But then I will begrudgingly move

"Thumper" down to the bottom.

And now, poor "Thumper" is number three.

So now you have everything
you need to make lists.

Go forth and list everything.