We’re going to organize our code a little bit today and do something cool, because you might not think organizing is all that fun.
Organization is the key to many things in life, and coding is no exception, so don’t skip this lesson.
We’re going to add a head and body to our HTML.
The head goes at the top, bet you guessed that one. It is followed by the body. The body is where our headings and paragraphs will go. The head is where the thoughts we keep to ourselves are hidden.
Your page will look like this.
<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<h1>Body</h1>
<p>This is a paragraph in the body.</p>
</body>
</html>
What did I do? What do you observe? I added organization, not only by placing my code into sections on the page, but by indenting my code. It shows what’s inside of what. As your code gets more complicated, you’ll appreciate all of your efforts at keeping it organized.
The body is in the html, so it’s written over a little, and the heading and paragraph are in the body, so they are over just a little.
I also snuck in a new tag. I put it in the head. What do you think it’s going to do? What is in the head does not appear on the page. Where is the title going to appear? Save your code and look at it in the browser and find the title. Where is it?
It shows up in the tab. Later we’ll add a little image to the tab as well.
Play around with your page and title. Can you make anything useful yet? Save what you do if you start writing anything useful because you can come back later and pretty it up, when we get to styling the page.
You can see this in the browser by watching the video.