oblaat

a guide to conceiving, creating & publishing your own website

What's inside your head?

The head is the "face" of the ddocument. All the information about a HTML document is located inside of its own head, just like most of what you have to say about yourself is located inside your brain.

Because this is all data describing the document itself, it's called metadata. This metadata can include very minimal information, or it can tell you everything you could wish to know, but it is almost always there.

The title tag

Every document should have a title—how else will people know what it is? The title tag is even where your browser tabs get their labels from, and how search engines get website names.

The title tag for this very website is as follows:

<title>oblaat - your guide to websites</title>

The meta tag

The meta tag can hold any kind of metadata about your HTML document. Usually it contains a description of the page, keywords, or the text encoding the document uses. These are not required, and keywords are outdated, but they are valuable.

This website declares the encoding (or "character set") its pages are written in so that computers don't interpret it incorrectly and show the wrong characters by mistake:

<meta charset="UTF-8">

This website also sets up the viewport, which means that the website will do its best to display nicely on mobile:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(You don't really need to remember all that if you know the magic of copy-paste, but including it at all can be important.)

The link tag

This tag should not be confused with the anchor tag, the tag used for what we would traditionally call links. Instead of letting users access other pages, this tag declares the location of other documents to be used within this page while stating their purpose.

The most common applications of this are to link to a file full of JavaScript programs that are to be reused across the site, or to link to a CSS stylesheet that is used across several pages. This website has one CSS file for all of its pages.

<link rel="stylesheet" href="/css/main.css">

These three tags are generally all you will need for any given web page. They give you information about the document. Now is the time for the document itself...