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 yourbase
tag. Third, insert yourlink
tags for favicon and stylesheet so they can begin rendering. Fourth, declare yourmeta
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.
<head> <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> </head> |
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.
- 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.
- Link – Always used to include a stylesheet. You will also see this tag for RSS or favicons.
- 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.
- Meta – Includes metadata. This is information like description, keywords, and character encoding.
- 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.
<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.