Patterns of Chaos
» HTML Tutorial » Stuff you don't see
Logo

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.

Putting this all together, you get a basic page structure like this: 

<html>
  <head>
    <title>This is My Page!</title>
  </head>
  <body>
    <h1>This is My Page!</h1>
    <p>I wrote this HTML page</p>
  </body>
</html>

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.

Here is a simple HTML page, using all of the elements discussed here: 

<!DOCTYPE HTML>
<html>
  <head>
    <!-- Put the page title here -->
    <title>This is My Page!</title>
  </head>
  <!-- Page body is next -->
  <body>
    <h1>This is My Page!</h1>
    <!-- Section 1 -->
    <p>I wrote this HTML page</p>
    <hr>
    <!-- Section 2 -->
    <p>It's an HTML page with a header, comments, all that stuff!</p>
  </body>
</html>

And here is what that page looks like:


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.

 

Contact