HTML Page Setup

Now let’s talk about the basic document setup for an HTML page, what do the tags mean, what are some variations you might come across, and what else might we have. In the introduction, I gave you a basic HTML layout. I should note that it’s very, very basic. I’m going to show you a few things that we will also be adding to our basic setup and explain what they’re for and how they work.

So at this point you should have your index.html file in your My Website folder, and if you’ve followed my instructions, it should have this in it:

<!doctype html>
<html>
  <head>
    <title>Page title in browser</title>
  </head>
  <body>
    <h1>Welcome to my web page</h1>
    <p>Here is some content.</p>
  </body>
</html>

If you’re there, great. This is about as basic of an HTML page you can have. One thing that you’ll notice is that the tags repeat themselves. I’m referring to the fact that you’ll see <html></html>. The first tag, without the / is the opening tag. This means, whatever content after this should have this tag applied to it. The second one, with the / tells the browser that this tag stops applying, it’s the closing tag. So for instance:

<p>Here is some content.</p>

This represents a paragraph. The <p> tag tells the browser, “this is a new paragraph.” The closing </p> tells the browser that that paragraph has ended.

Nested tags

Some tags can be nested within each other. In the example above, you’ll see that we open the <html> tag, and then we start opening and closing more tags before we close the </html>. This is an example of nested tags. Some tags, you’ll find can’t be nested. Some tags are considered “block elements” and some are considered “inline elements.” Paragraph tags <p> are block elements, and anchor tags (links) <a href="page.html"> are inline elements. Inline elements can be nested within block elements, but block elements cannot be nested within inline elements. Here’s a simple example of this:

Valid use of nested tags

<p><a href="page.html">This whole sentences is a link.</a></p>

Invalid use of nested tags

<a href="page.html"><p>Can't put a block element inside an inline element!</p></a>

See the difference? We’ll get into this more later, but it’s good to have a general idea of why we put tags in a certain order.

What do all these tags do?

Let’s just go line by line and I’ll explain the general use of each tag and talk about some other things that might end up in those sections later. I’m going to stick to the structural elements for this round. We’ll get to the formatting tags like <h1> and <p> in the next article.

<!doctype html>

Whenever you’re writing HTML, you want to define the document type. In this case, we’re using <!doctype html>, which is the doctype for an HTML5 page.

If you want to write an HTML4 page, you would use this big ugly thing <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.

The doctype is really just a declaration to let the browser know ahead of time what sort of document it’s looking at. It’s better not to make web browsers guess, because sometimes they guess wrong and your page does weird things.

<html>

The <html> tag is how the web browser knows to start reading everything in between these tags as actual HTML code. The doctype declares that this page will be an HTML page, but the <html> tags tell it, here’s the actual code.

<head>

The <head> tag is a weird one. The head serves a few different purposes, but the contents of the head don’t actually appear on the website. The head generally just provides instructions and information for both the browser and for search engines.

Meta content for search engines

Within the head, you’ll see the <title> tag. This is the title of the page for the very top of the browser, and it is the title that will appear when you search for the site on Google or whatever alternative to Google you use.

Within the head you will usually also see something like this:

<meta charset="utf-8"/>
<meta name='keywords' content='your, keywords, here' />
<meta name='description' content='Your page description here' />

This is the meta content for the website. It’s information used by search engines to create page descriptions and for Search Engine Optimization. We don’t need this for our purposes at this point, but if you want to add it, put it between the <head> tags after the <title> tags.

Linked external files

Also in the head, we would link to any external stylesheets or JavaScript files. Because we don’t want to clutter up our pages with tons of code that is used on many pages (and because we don’t want to edit it on a hundred different pages every time we want to change one little thing), we create an external page and tell the browser to go grab it from all the pages of the site.

Linking to an external stylesheet usually looks like this:

<link rel="stylesheet" media="all" href="css/master.css"/>

Linking to an external JavaScript file usually looks like this:

<script src="js/global.js" type="text/javascript"></script>

Notice that the <link> tag doesn’t have a closing </link> tag while the <script> tag does. This is because the <link> tag is self-closing. The / before the > at the very end is a self-close. Other tags that self-close are <img src="file.jpg" /> for images and <br /> for line breaks.

<body>

This is the fun one. Anything between the <body> tags is what is going to appear on your website. Fortunately, there’s not much more to say about that. Everything that you want to appear on the page, put it between the body tags.

In the next article I’m going to put together a whole big list of commonly used tags that you might put between the <body> tags to get you started, but for now, just know this is where you’ll put them.

So that’s all the structural tags. Any questions?