[ Deep Dive ]

HTML Introduction: Global Structure: Part 2 with Nick Pettit

In the previous video, we started creating the global structure of an HTML web page.

Now we're going to go ahead and finish things up.

Next, we're going to use the title tag.

So we'll go ahead and type out the word title and we'll create a closing tag,

and inside of the title tag we're going to put the title of the page.

In this case, we'll just go ahead and say My Page.

Now this is the first thing that we've typed in our document

that we'll actually be able to see on our HTML page.

So if we go ahead and switch back to the browser and we refresh the page,

we'll see that local host up here in the tab now says My Page.

That's because it's the title of the page.

In several other browsers, the title of the page may appear

in the actual title bar of the browser,

rather than in the tab.

Next, we're going to go ahead and add a body tag.

So we'll switch back to our text editor, and the body tag comes after the head tag.

It doesn't go inside the head tag, it goes adjacent to it.

Inside of the body tag, we're going to put the content of our page.

This is what actually gets rendered on our page,

and where we'll put all of our text and images and so on.

Now that's about it for the global structure of the document,

but there's still a few more related tags that will help structure your page.

First, there's the div tag, so we'll go ahead and type out div, and then we'll close it,

and inside of our div tag, we'll just put some text that says, "This is a div."

Div stands for division, or a section of your document.

They're very commonly used, and they're mostly used for styling sections of your page,

and they're also just used for logical grouping.

There may be many div tags on your page,

and sometimes they may even be nested inside one another,

just like how this div tag is nested inside of the body tag.

A div is what is known as a block level element.

There are several other types of block level elements, but a block level element just means

that it will push other elements out of the way.

We'll learn more about this when we get to CSS.

Now if we go ahead and switch back to the browser and refresh the page,

you can see that our text, "This is a div," is displayed on the page.

Nothing in particular looks special about this text, but we know that it's inside of a div tag

that we could style if we wanted to.

For example, we could change the background color, or we could style other things inside of the div.

Finally, we have what's called the span tag.

The span tag is very similar to a div tag, and it's typically used to divide up text

rather than large sections of a website.

So to use a span tag, we'll go ahead and just wrap part of our text,

and we can put this anywhere inside of our div,

or we could even have a span tag on it's own, just like this.

So we'll go ahead and type some text in here that says, "This is a span,"

and we'll go ahead and save our document, switch back to the browser and refresh,

and now you can see we have the text, "This is a div," and, "This is a span."

Once again, it doesn't appear as though there's anything special about this text, and really there's not.

It's just inside of a div tag and a span tag, respectively.

We'll get to the finer differences a little bit later on,

but for now, all you really need to know is that a span tag is what's called an in-line element,

as opposed to a block level element.

An in-line element does not push things out of the way.

Rather, it says in line with everything else on the page,

and does not disrupt the flow of elements.

So as you can see, we put a span tag inside of our div tag,

and it didn't push anything out of the way.

So if we go ahead and change this span to a div

and then go ahead and save the document,

switch back to the browser and refresh,

you can see that the word div is now down on the next line.

That's because again, it is a block level element,

and it will break down to the next line and push things out of the way.

And that's it. We've created our first, fully valid HTML web page.

In upcoming videos, we'll start learning about text.

[ Treehouse ]