Looking for the lessons? Get started!
HEAD and BODY, the two main elements of the HTML page
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
I was born with an adult head and a tiny body. Like a 'Peanuts' character. — Jon Stewart
HTML pages have two parts: the head and the body.
The Head
The head contains a lot of things we aren't worried about for now — information for search engines, for example — so there are only two things you need to know about for now in the head: the DOCTYPE and the title. The DOCTYPE tells the browser what version of HTML to use. I've given you that straight up, so as long as you have it properly copied over for your page, you can move on for now. The other thing in the head that you need to know about for right now is the title. That's something you get to choose for yourself!
(Everyone wants to know why their title doesn't appear on their page. Nothing in the head appears on the page. The title appears on the very top of the browser. It is primarily used for search engines such as Google to identify your page. When you see a page listed in a search engine as http://www.iamagoofus.com/duhh.html, the person who created that page forgot to include their title.)
You'll also link your stylesheet in the head of your pages. That's very important!
The Body
The body of your page contains, well, everything that doesn't go in the head.
One of the unbreakable rules of HTML (there aren't many, but this is one) is this:
Never, ever, put any content — anything — outside of the <body> and </body> tags!
Here's a visual reminder:
NOTHING HERE!
your DOCTYPE
<html>
<head>
... stuff ...
</head>
NOTHING HERE!
<body>
... stuff ...
</body>
</html>
NOTHING HERE!
This is a visual representation of what a simple page layout might look like. It shows how the <head> and <body> elements nest inside the <html> tags, it also shows how elements like paragraphs (<p>) and headers (<h1> and others) are block elements — essentially boxes containing information.
<html>
<head>
<title> </title>
stylesheet
</head>
<body>
<h1> </h1>
<p> </p>
</body>
</html>
