Welcome to another article on Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.

Today’s article covers the HTML <head> tag . Many of its elements remain a mystery to novice and intermediate designers. The expert designer, though, will learn to harness the power of his or her <head> tag. When implemented properly, pages will be more accessible, load faster, and become more successful on search engines.

Solid Statement: Put your title at the top. Second, insert your base tag. Third, insert your link tags for favicon and stylesheet so they can begin rendering. Fourth, declare your meta information with at least content-type and description. Put the scripts at the end so they don’t slow hinder the visual elements from being drawn.

While it may seem small or unassuming, there is a massive amount of information that fits in the head tag. Below is an example of a standard head tag with proper head tag heirarchy. Technically you can create pages with none of these tags, but then you wouldn’t be reading this article.

The important aspect of the simple example below is the order that the link and script tags appear. Title and meta tags are simply words, but the stylesheet(s) and script(s) need to be downloaded. I describe this as ‘standard’ because it includes the basic tags you are likely to find all across the web.

HTML4STRICTview code
    <title>Solidly Stated</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Building Better Web Pages" />
    <meta name="keywords" content="building,better,web,pages" />
    <link rel="shortcut icon" href="http://solidlystated.com/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="http://solidlystated.com/style.css" />
    <script type='text/javascript' src='http://solidlystated.com/script.js'></script>    

What’s Available in the Head?

There are 5 tags that can be used in the head. I will provide a brief overview of them. If you’d care to learn more about an individual tag, I have linked each one to its own article.

  1. Title – The Title tag is required on any page. It should be placed immediately inside the head tag. The title is displayed in the browser head at the upper left.
  2. Link – Always used to include a stylesheet. You will also see this tag for RSS or favicons.
  3. Base – A little known tag that sets a base URL for the rest of the document. Using this saves you from repeating code and makes the file slightly smaller.
  4. Meta – Includes metadata. This is information like description, keywords, and character encoding.
  5. Script – External javascript files are loaded using a script tag. Always insert these at the end of the head tag.

Solid Tip: The title and script tags require both an opening and closing tag, i.e <title>…</title>. Link, meta, and base are self-closing, i.e. <meta ... />.

Tag Order

It is important to stack your tags in the correct order for better performance. Meta and base tags can reside anywhere in the head, as they dont affect page loading. The title tag, while trivial performance-wise, is the first visual item returned to the browser. You definitely want your title identified while the rest of the page loads. That leaves the link and script tags. The link tag contains your stylesheets, so they should come first. The page will begin rendering as the data becomes available. You don’t want to keep the visitor waiting on a blank page while your scripts are being downloaded.

Meta Information

Early webmasters treated meta tags like the Gold Rush in the 1800’s. That idea stuck with some people. Unfortunately, you can no longer put 46,000 keywords in your meta tag and get to the top of Google’s search page. The term metadata refers to “data about data.” Meta tags are used to provide the search engines and the browser with information about your site. Most of it is information that people don’t care about, like cache-control or robots. It allows you to provide a better description of what your site is all about. Well-formed meta data will perform better than malformed or missing meta data, so you should always include the basics. There is quite a lot of information you can give using meta tags but there are 2 that should always be used. These 2 are the encoding and the description. You can view the full spec from the World Wide Web Consortium for detail.

HTML4STRICTview code
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Building Better Web Pages - description here" />

Meta tags are simply names and their values. These attributes are labeled name and content. You will also see http-equiv used in place of name. A few other attributes are available in special cases. If you are interested in the details, check out the complete meta-tag article. Some common names beyond the 2 basic tags include keywords, author, date, expires, copyright, generator, robots, and cache-control.

Solid Reading

For building better web pages, any of the following books are a great! “Web Design For Dummies” introduces pretty much every aspect of design, including planning and research. If you are interested more in the concepts and ideas of proper markup, go with “HTML and CSS Web Standards Solutions”. Finally, for a more conversational tone, “Designing with Web Standards” is reading geared toward the practical application, rather than the concepts themselves.