While the head of your document stores functional information that is largely
invisible, the body is where all of your pages visible content is going to go.
So, to complete the basic structure of our HTML file here,
I have the bodt.htm file open from 02 underscore 04 directory.
Although again, if you're just working on the same document in each movie,
it's okay.
because they're all building right on top of another.
So, the first thing we want to do is add body tag.
Now, the body tag is not nested inside of the head tag.
It is a sibling of the head tag.
Meaning it is on equal level with it.
So just after the head tag, I'm going to go ahead and open up a body tag.
And then after the body tag, I'm going to hit return and then close the body tag.
Okay.
Now regardless of how your code editor is indenting them, it doesn't really matter.
You can see it's just bringing a little tab there for me.
You just want to make sure that it's not inside the head tag itself.
The body tag is necessary for us to have any visible content whatsoever.
So after 'neath the body tag, I'm going to go just below that own line and
I'm just going to type in some text.
So I might say something like Page content.
Now if I save this and preview that in a browser.
You can see that the only thing that reads on the page there is just Page content.
It's not really formatted any one specific way.
And I want to be clear about this.
CSS controls.
The styling and formatting of the contents on our page.
But if we don't use CSS at all, then we get the browser's default rendering.
And right now, we're seeing the browser's default rendering of a paragraph.
In fact, if I inspect the element, I can see inside of the body.
It really doesn't have anything.
It just has sort of a placeholder there.
All right?
So it's just getting sort of default rendering.
So we want to correct that.
I'm going to go back into Page content and I'm going to surround this with an h1 tag.
Now the h1 tag, if you remember this from earlier when we were talking about syntax.
This is a top level heading.
Meaning a heading one, the most important heading on the document.
If I say this and then preview the file again,
you can see Page content now is now formatted in a dramatically different way.
So the only thing that's left for us to do now inside of this body is to go ahead and
add all of the visual content and
then structure it properly using different HTML tags.
And we're going to focus on that in a chapter a little bit later on.
But for right now, let's just add a little bit more to it.
Now I'm going to paste some content in here and
what you guys I want to do is just type this in.
Type in the main page content appears inside the body tag.
HTML contains several elements that allow you to properly structure and
format your content which we'll cover later, as I just said.
Now, I'm going to wrap this in a paragraph tag.
So instead of a heading tag,
I'm going to make sure that this is all wrapped in a paragraph tag.
If I can save this, go back to my preview and now I can find my paragraph.
Now, don't worry about that blue line.
The only reason that is showing there is because I have this text either
highlighted or focused.
If I click off of it and go back to it,
you can kind of see how it looks like without that content being focused on.
Now there are other things we can do, for example.
I can take the body tag here.
I can go ahead use the b tag to bold this.
And notice I have both an opening and
a closing tag that surrounds the content that I want to identify.
So if I say this and then again, go back in to the browser.
I can see that the word body is now bolded.
Perfect.
Okay.
So now, we've got everything in place that our basic HTML page needs.
We've got a doctype declaration with HTML tags.
Inside the HTML tag,
we have head that represents functioning content that's typically invisible.
And then we have the body element that represents the visual elements on
the page.
Regardless how simple or how complex your sites are going to end up being,
this structure is always going to provide the foundation and
starting point for any of your documents.