This course will be retired on January 6, 2020. We recommend "HTML Basics" for up-to-date content.
You've already started watching Global Structure: Part 2
In this video, finish up the global structure of our HTML document. We'll also introduce the div and span tags.
-
0:00
[ Deep Dive ]
-
0:04
HTML Introduction: Global Structure: Part 2 with Nick Pettit
-
0:06
In the previous video, we started creating the global structure of an HTML web page.
-
0:10
Now we're going to go ahead and finish things up.
-
0:13
Next, we're going to use the title tag.
-
0:18
So we'll go ahead and type out the word title and we'll create a closing tag,
-
0:25
and inside of the title tag we're going to put the title of the page.
-
0:30
In this case, we'll just go ahead and say My Page.
-
0:34
Now this is the first thing that we've typed in our document
-
0:38
that we'll actually be able to see on our HTML page.
-
0:42
So if we go ahead and switch back to the browser and we refresh the page,
-
0:48
we'll see that local host up here in the tab now says My Page.
-
0:56
That's because it's the title of the page.
-
0:59
In several other browsers, the title of the page may appear
-
1:03
in the actual title bar of the browser,
-
1:07
rather than in the tab.
-
1:09
Next, we're going to go ahead and add a body tag.
-
1:13
So we'll switch back to our text editor, and the body tag comes after the head tag.
-
1:20
It doesn't go inside the head tag, it goes adjacent to it.
-
1:28
Inside of the body tag, we're going to put the content of our page.
-
1:31
This is what actually gets rendered on our page,
-
1:35
and where we'll put all of our text and images and so on.
-
1:39
Now that's about it for the global structure of the document,
-
1:43
but there's still a few more related tags that will help structure your page.
-
1:48
First, there's the div tag, so we'll go ahead and type out div, and then we'll close it,
-
1:57
and inside of our div tag, we'll just put some text that says, "This is a div."
-
2:04
Div stands for division, or a section of your document.
-
2:09
They're very commonly used, and they're mostly used for styling sections of your page,
-
2:16
and they're also just used for logical grouping.
-
2:19
There may be many div tags on your page,
-
2:22
and sometimes they may even be nested inside one another,
-
2:25
just like how this div tag is nested inside of the body tag.
-
2:30
A div is what is known as a block level element.
-
2:35
There are several other types of block level elements, but a block level element just means
-
2:39
that it will push other elements out of the way.
-
2:43
We'll learn more about this when we get to CSS.
-
2:46
Now if we go ahead and switch back to the browser and refresh the page,
-
2:51
you can see that our text, "This is a div," is displayed on the page.
-
2:56
Nothing in particular looks special about this text, but we know that it's inside of a div tag
-
3:04
that we could style if we wanted to.
-
3:06
For example, we could change the background color, or we could style other things inside of the div.
-
3:13
Finally, we have what's called the span tag.
-
3:16
The span tag is very similar to a div tag, and it's typically used to divide up text
-
3:23
rather than large sections of a website.
-
3:26
So to use a span tag, we'll go ahead and just wrap part of our text,
-
3:32
and we can put this anywhere inside of our div,
-
3:36
or we could even have a span tag on it's own, just like this.
-
3:41
So we'll go ahead and type some text in here that says, "This is a span,"
-
3:49
and we'll go ahead and save our document, switch back to the browser and refresh,
-
3:54
and now you can see we have the text, "This is a div," and, "This is a span."
-
4:00
Once again, it doesn't appear as though there's anything special about this text, and really there's not.
-
4:07
It's just inside of a div tag and a span tag, respectively.
-
4:11
We'll get to the finer differences a little bit later on,
-
4:15
but for now, all you really need to know is that a span tag is what's called an in-line element,
-
4:22
as opposed to a block level element.
-
4:25
An in-line element does not push things out of the way.
-
4:29
Rather, it says in line with everything else on the page,
-
4:33
and does not disrupt the flow of elements.
-
4:36
So as you can see, we put a span tag inside of our div tag,
-
4:41
and it didn't push anything out of the way.
-
4:44
So if we go ahead and change this span to a div
-
4:50
and then go ahead and save the document,
-
4:52
switch back to the browser and refresh,
-
4:54
you can see that the word div is now down on the next line.
-
4:58
That's because again, it is a block level element,
-
5:01
and it will break down to the next line and push things out of the way.
-
5:06
And that's it. We've created our first, fully valid HTML web page.
-
5:11
In upcoming videos, we'll start learning about text.
-
5:16
[ Treehouse ]
You need to sign up for Treehouse in order to download course files.
Sign up