Stuff you don't see

Headers

Take a look at the tab bar (at the top of the browser) - notice how it
says "Patterns of Chaos"?. Now look at the pages you've been
working on - it probably has a title like page.html, right?

That is a page title, and it can be very important, especially on a
public web page. Search engines like Google and Bing use the page title
to determine what to display in their search results. Titles also help
users who have multiple tabs open to know which one they want to select
when switching between them.

Page titles are one of many items called metadata. Metadata,
put simply, means data about the data. In the case of a web page,
the contents of the page would be the data. The information in the HTML page
header is the metadata.

So what, exactly, is an HTML page header? Simply, it's a section of the
page that's included in the HTML but that isn't visible to the user. The
browser reads it, but doesn't display it.

Defining a page header is simple - you use the head tag, like this:

<head>
<!-- header contents here -->
</head>

Don't worry about that <!-- --> just yet - the imporant part
for now is the head tags. This is where you want to put information
about the page that you don't want visible on the page: things like stylesheets
and scripts (which you'll learn about later), special tags to tell the
browser about your site's language, topics the page discusses, and the
page title.

All of these have their own special tags. You can learn those as you need
them, but just remember that you must enclose anything in the header
inside tags. And don't use any of the display tags (<p>, <ul>,
<h2> etc.) that you've used so far. If you do, that content will show
up on the page - and you don't want header content to be visible.

To add a title to a page, just put the title text inside a title
tag:

<head>
<title>This is My Page!</title>
</head>

For now, that's all we'll do on headers.

HTML & Body

Although your page will display correctly without it, proper HTML formatting
requires another couple of tags for a page to be formatted correctly. The
first one is html. This tells the browser to expect an HTML page. It
might seem obvious, but there are other markup languages similar to HTML,
and if you don't specify which one you're using, the browser has to guess.
Most of the time, it gets it right, but it doesn't always. So everything
on the page should be wrapped in html tags.

The second tag you should always use is body. This indicates the
main body of the page - that's all the stuff you see. So, for the pages you've
written up until now, everything you wrote would be inside these body
tags.

Document Type

There is one final tag you should be aware of: the DOCTYPE tag. This
tag not only tells the browser that you're using HTML, but tells it exactly
what kind of HTML to expect. Yes, there are many different types, or versions
of HTML - it has evolved and changed over the years, and older versions
aren't quite the same as newer ones. If a page is using an older version
of HTML, the browser will render it differently.

We won't worry about any of the older, outdated versions - which makes things
much easier. The most recent HTML version has the easiest DOCTYPE of all:

<!DOCTYPE HTML>

If you want to learn more about doctypes, you can read about it at
w3schools - but
this is as far as we're going to go. The main thing you need to remember
is that the DOCTYPE tag must be the very first thing on the page.

Comments

So, before finishing this lesson, let's go back to that <!-- -->
stuff for a moment. If you look at the source for this page, you'll see a
few of them. The first one is right after "Stuff you don't see".
But do you notice that you don't see it on the page?

This is an HTML comment. It can be used to temporarily hide things
that you aren't ready to show, or if you're just looking to see how things
look without it. Or it can be used to add information about the page, or
even special messages for people who think to look at the page source. Can
you find the special message added to this page?

Putting it all together

We'll keep this simple now: let's just put together everything we've
discussed on this page. You can take this and update your own pages, or
just remember to add them to any future pages you build.

This may have been a dull lesson, but is is important. You'll need this knowledge
in a couple lessons when you start learning how to make your site look pretty.
The next lesson teaches you how to make special blocks and sections in
your HTML, and the following gets you started on how to change its appearance.
After that, you'll begin learning about styles, which are a powerful
way to really improve the look of your website.