All language subtitles for 07 - Lists.en

- Let's talk about lists.

We use lists in our life.

To-do lists, lists in recipes, wish lists, bucket lists.

But we use lists on the web even more,

including for things that don't really look like a list.

Most of the time when you see a navigation bar,

that's a list of links.

Or when you go to landing pages with lots of teasers

offering photos and headlines to click on

to get to more content.

Lists.

In html, there are three kinds of lists.

Unordered lists, ordered lists, and definition lists.

Unordered lists are used the most often.

Let's make a simple example.

Here we've got a list of food, say,

ingredients for a recipe.

We'll wrap each item in this list in an element.

Li stands for list item.

You can see the results happening on the right.

The browser puts a dot, a marker, right before each item.

Next, we need to wrap the entire group of items

in an element that will mark the beginning and end

of the whole list, and to tell the browser

which kind of list this is.

To make an unordered list, we use

a element, unordered list.

Now to see what's going on in our code more easily,

we can indent the list items.

If we put a few spaces or tabs, spaces or tabs,

it does not matter, put some kind of space

before each one of these list items,

we can better see that the opening

and the closing go together.

This indenting does not have any effect

on what shows up on the web page.

And this indentation is not required,

html doesn't care, the browser doesn't care,

this is just to help humans.

Now these list markers, by default,

the browser's going to show them.

But we don't make an unordered list here

only if we want it to look like this.

We pick because it's the right choice

to convey meaning, and then we use CSS

to totally alter how it looks.

But let's not worry about that yet,

let's look at the next kind of list, the ordered list.

Ordered lists are very similar,

only instead of wrapping list items

with a , we use .

Ol stands for ordered list, which means

there's an order to the items on the list.

Let's say we're marking up a recipe.

These are the steps in the directions,

each marked up as a element.

Now, we'll wrap this list in a element.

You can see that the list is displayed

with numbered steps conveying the order.

Unordered and ordered lists are very similar.

They just have a different wrapping element.

Now like I said, CSS can be used

to restyle lists to look very different

from this default styling.

Here's another demo to show just a few

of the many possibilities.

These first six examples are all unordered lists.

We can change the list markers or we can remove them.

We can leave the content in a list shaped layout,

or we can lay it out however we want.

These next three examples are all ordered lists

where I'm changing the numbering.

There are many options for how counting can work

in an ordered list.

In this last example, this is an incredibly common use

of the unordered list, to mark up

a set of teasers for articles or other lists

of short form content.

Take a look at this mark up to see more of the details

of what's going on in the html.

There's one more kind of list in html,

the definition list, or the description list.

With unordered lists and ordered lists,

you have list items, item, item, item,

each wrapped in an element.

But what if we want to make a list that is like

what in computer science is called a key value pair?

What if we want to have an item

and then have something to explain or define that item?

Here, we've got a term and the description of that term.

The term or key or main bit is wrapped in a

for definition term.

The description or value, or definition

is wrapped in a for definition description.

And then you can have more than one for each .

The whole thing is wrapped in a for definition list.

You'll notice that the s and the s

are simply setting there next to each other,

there's no wrapper around the sets.

It's just how a definition list works.

So there you have it.

Three kinds of lists in html.