Lists

9:24 with Wade Christensen

Lists are a great way to organize content. We'll use Markdown to format both numbered (ordered) and bulleted (unordered) lists. We'll also see how to combine list formatting, and cover a few formatting quirks that can be surprising when you're getting started.

Teacher's Notes
Video Transcript
Downloads

Starter code for this video:

# Markdown Basics

## Headlines, Paragraphs, and Basic Formatting

### Headlines

Type a single hash (AKA pound symbol) and a space to create the largest or first-level heading. A second-level heading uses two hashes next to each other followed by a space and text. The rest of the headline levels just add another hash.

#### Heading Level 4
##### Heading Level 5
###### Heading Level 6

### Paragraphs and Line Breaks

We create paragraphs by typing the way we would in any other program. Just hit return twice to start another paragraph.

Where you see empty space between blocks of text in your Markdown document, you will see empty space separating those blocks of text in your formatted HTML document.

#### Line Breaks

You don’t always want that space that appears between one line of text and another: for example, lines of poetry or song lyrics don't have spaces between them. To add just a line break without a space, type two spaces at the end of a line, then press return once.

I love you without knowing how, or when, or  
from where  
I love you directly without problems or pride:  
I love you like this because I don't know any  
other way to love     

Neruda, Pablo. "Sonnet 17" The Poetry of Pablo Neruda, edited by Ilan Stavans, translated by Mark Eisner, Farrar, Straus and Giroux, 2005, p. 514.

### Emphasis and Bolding

#### Italics

Emphasis can be added with either the asterisk or the underscore characters.

This *works*, and this _works_ too

#### Bolding

Bolding is easy too. Just add an extra asterisk or underscore.

This **works**, and this __works__ too

#### Bolding and Emphasis Together

You can even bold and italicize text like ***this*** or ___this___

### Blockquotes

A blockquote sets text apart from the rest of the document. It indicates that the text is quoted from another source.

You format a blockquote using the greater than symbol. If you want a blockquote to span multiple paragraphs, add the greater than symbol to the line between paragraphs too.

> Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
>
> Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. — John Gruber

### Horizontal Rule

OK, that’s a good start. We can separate this from our next section with a horizontal rule, which is just a line used to separate sections of a document.

You can use three or more underscores, asterisks, or hyphens. I prefer hyphens.

___

***

---

0:00
[MUSIC]
0:05
As I mentioned earlier, I will pace on a simplified version of what I've
0:08
been saying in toward sheet between videos.
0:11
This is an effort to make sure that we have a complete reference
0:14
document by the end of the course.
0:16
If you're following along and you want your document to match mine exactly,
0:19
there's a copy in the teacher's notes.
0:22
List are a great way to organize content and
0:24
mark down provides a way to format both numbered and bulleted lists.
0:29
Let's start with a numbered list.
0:31
I'm just throwing some returns in here.
0:33
So we can see what we're doing.
0:34
And then I'll start with a heading for our section.
0:39
Lists and another heading for subsection, numbered Lists.
0:49
Now, we create a Numbered Lists in the same way we might with Microsoft Word,
0:52
Apple Pages, or any other word processing program.
0:55
You just type the number 1 followed by a period, a space,
0:59
and then the text for your item.
1:03
Then you could type a return, a 2, a period, a space, and again your text.
1:10
Now, let's see what that looks like in our preview.
1:13
We have our numbered list the way we would expect.
1:17
One thing to notice is that you actually don't have to type these numbers in order.
1:22
If l were to type a 1 here, mark down figures in the cell,it understands that l
1:27
am trying to create a number list because of the number 1 in the period.
1:31
So, over here in our preview, we still have 1 and a 2.
1:34
We could add another item like this.
1:37
One, period, item three.
1:40
And you can see in the preview we have a one, two, and a three.
1:44
I find this unnecessarily confusing.
1:46
I prefer to follow the numbers in order.
1:47
Because that's easier to understand and it matches the rendered HTML.
1:52
So I'm going to delete this third item to clean the document up,
1:57
and we'll come up here and make this a 2.
2:00
And you can see in our preview, we're still getting what we expect but
2:03
we're following those numbers in order here to I just find this less confusing.
2:09
You can also nest items in the list.
2:11
You begin the list the same way so number 1 period and an item.
2:17
And then where you would create your second list,
2:21
you can either Tab to indent or use at least two spaces and
2:26
then the number one, a period and your item again.
2:31
And let's check that out in our preview.
2:35
Okay, so we are getting something a little unexpected here.
2:38
We've got items 1, 2, 3, then this indented item 1,
2:41
it's all spaced out a little strange.
2:44
What's happening here, Adam is getting a little confused.
2:47
It thinks of that this item is a member of the list above so
2:52
I can fix that by just typing a return and there we go.
2:56
Adam figures out what we're trying to do here,
2:57
you can see now we have two separate lists.
3:00
This is why it's really nice to have this live preview.
3:03
You can see all these little gotchas before you
3:06
go publish your document somewhere.
3:08
Let's add another nested item, just for a little for practice.
3:11
If we took the two period, Item 2.
3:14
And we continue to have these nested items in our numbered list.
3:22
Now, let's throw in some returns so that we can see, and another heading for
3:26
our bulleted lists.
3:34
Bulleted lists work just like numbered lists but you use the asterisk character,
3:38
no period, and a space.
3:39
So I would created a bulleted item by typing the asterisk, a space, and
3:44
then item, and then I can create a second item.
3:49
Again, asterisk, space, and another item.
3:53
Let's check that out in our preview.
3:56
We can see we have these bullets next to our items.
3:58
We have our bulleted list.
3:59
That's great.
4:00
Now, of course, you can nest items in the bulleted lists as well, So
4:06
you can have a item here, and then, just like what the numbered list,
4:11
you would either use two spaces or tab, and again, the asterisks space and
4:17
the item, And in the preview, we can see that we have our bulleted item and
4:23
then a nested bulleted item with a slightly different style of bullet.
4:29
Let's try one more just to see what happens.
4:31
What if we want to further indent, type our asterisk, space and the Item.
4:37
And, there we go.
4:39
You can see we now have a third level.
4:42
And it's a different style bullet.
4:43
It's indented, so this is what we would expect.
4:49
Before we look at lists any further, I want to mention of the surprises I
4:53
encountered often as I gained comfort writing with Markdown.
4:56
We have now used the asterisk for bolding, italicizing, and creating bulleted lists.
5:02
This is one reason why I like to have this live preview
5:05
of my formatted document beside my mark down text.
5:08
It's easy to accidentally create a list of italicized items rather than bullets or
5:13
items that aren't formatted at all.
5:15
Markdown takes practice and the live preview helps.
5:18
You will often find that you often forgot a space or
5:21
you didn't type the character on both sides of the text.
5:24
To show you what I'm talking about, let's create an italicized item.
5:28
So we would have our asterisk.
5:30
No space and cized item.
5:36
And then we add the asterisk at the end a well with no space.
5:40
And that's an italicized item.
5:42
Now, below this,
5:43
we can create an item with no formatting by typing one asterisk, no space.
5:49
And we'll have an item with no formatting.
5:55
Now, over in our preview, you can see I've got a little bit of a mess.
5:58
I have this italicized item but then I've got the asterisk actually showing and
6:02
it's not on it's own line.
6:03
And then this text doesn't really formatted specially in anyway.
6:07
So, the difference here really is that I just don't have asterisk on the end of
6:11
this text.
6:13
Now, let's create a bulleted item below that.
6:16
So the asterisk plus a space.
6:18
And bulleted item.
6:22
And now, I've got even more of a mess.
6:24
So I have this italicized item.
6:26
No formatting.
6:27
And the bullet.
6:28
And you can see there's really a pretty subtle difference here.
6:31
It's the matter of a space or a character on the end of the text.
6:35
So just keep those little gotchas in mind, they can trip you up.
6:38
Now, what if I did want a bulleted item that is also bold and italicized?
6:43
Well, we can definitely do that.
6:44
So let's come down here, and add some more returns.
6:48
Just so that we can see.
6:51
I would first type the asterisk to begin our bulleted item, and a space.
6:56
And then I want one, two asterisk to bond something and
7:00
one asterisk added also in italicizing.
7:04
We can call this a bulleted bold italicized item.
7:12
And to make sure that this actually is bold and italicized we need all three of
7:16
those asterisks on the end of the text as well, so two for bolding, one for
7:21
the italics, and in our preview, you can see that's what we're getting.
7:26
We have a bulleted, bold, italicized item.
7:30
So we can mix formatting.
7:31
That's great.
7:31
But can we also mix list styles?
7:34
Well, let's try it out.
7:35
Let's try to nest some bulleted items in a numbered list.
7:40
So we'll start with our numbered list.
7:42
So number, period, text.
7:46
And then, let's nest some bulleted items under here.
7:50
So Tab, asterisk, space, and an Item, how about another one.
8:00
And over here in the preview, we are getting pretty much what we expect here.
8:06
We've got an indented bullet under our numbered list.
8:11
Now, what if I want a second item that's outdented and that's fine?
8:16
I just outdent and type a number two period space and
8:23
this is our second item and then,
8:26
let's say I want another nested bulleted item.
8:32
And then let's see if we can throw some numbered items in under here,
8:38
so then I would tab to indent again, and numbers,
8:44
For a numbered list, and
8:48
let's see what we have got.
8:52
Ok. This is working.
8:53
So I do not know if you'd ever actually want to do this but
8:56
we do have these numbers and
8:58
bulleted items all mixed together the way that they should be behaving.
9:02
That wraps it up for this video.
9:04
Definitely explore lists and additional formatting.
9:07
After a little practice you won't even think about this stuff,
9:10
your fingers will just do the work.
9:12
To finish this video, let's throw in a horizontal rule, and save our documents,
9:18
and I will see you in the next video where we'll talk about formatting code.

You need to sign up for Treehouse in order to download course files.

Markdown Basics

Lists

Starter code for this video:

Sign in