HTML Tutorial

The Head

Another three-pager, I'm afraid. But then again, a web page is divided into a head and a body so you'd be daft to expect me to skimp on detail concerning such a major section, wouldn't you?

Yes. You would.

Links

We've seen how to put hyperlinks into web pages. That's not the only way to link a page to other documents, though. What if, for example, you wanted to keep all your stylesheet instructions on a separate file and link your page to that? It'd certainly make your page easier to update if you wanted to change the look.

The key to this, and various other links, is the imaginitively named <link> tag. Put simply, it defines the relationship between one document and another. Link <img> and <meta>, <link> is an empty element. Its meaningfulness derives from the values of its attributes. Typically, this element may have the following attributes set.

href

The address of the document to which you're linking. It's just like the href attribute of the <a> element.

rel

The relationship between the current document and the targeted document.

rev

The relationship between the targeted document and the current document. Just like rel but in the opposite direction.

title

A short string of text to describe the purpose of the target document.

type

The MIME type of the document to which you are linking. If you were linking to a stylesheet, this attribute might have a value of text/css, for example.

There are other attributes that can be set, but those four are the most important. So much for the explanation: let's actually do something with the code. Here's how to link to an external stylesheet.

    <link rel="stylesheet" href="style.css" type="text/css" />

Naturally, that's not all you can do with this tag. What if your web page was the second in a series of three? The following tags may prove handy.

    <link rel="prev" href="page1.html" type="text/html" />
    <link rel="next" href="page3.html" type="text/html" />

A lot of sites these days have favicons: small images that show up in the bookmarks. They're quite a useful way to brand your site. Again, the link element is used:

    <link rel="shortcut icon" type="image/png" href="img/favicons/favicon.png" />

Never mind the piddly little icons. Let's do something useful. If you've got an RSS feed, you may as well link your site to it, right?

    <link rel="alternate" type="application/rss+xml" title="SnH RSS 2.0 Feed" href="rss2.xml" />

One last example: you may wish to show where the home page is in relation to the current web page. Here's how you might do that:

    <link rel="home" type="text/html" href="index.html" />