Menu

A Comprehensive Guide Inside Your <head>

A Comprehensive Guide Inside Your <head>

As web designers and developers, we pay so much attention to what’s directly on the screen (or in our code) that the <head> of a document and what’s inside is often considered as an afterthought.

While in many cases it’s true that what appears on the screen is the most important part of a website (the content is what people visit a site for), the "thinking code" inside the <head> of our documents plays an important role.

This article will examine exactly what can fit inside a website’s head.

Mastering the Mind

The head of an HTML document is a busy area, and while it may not have the range of elements that the <body> can flex, it can actually engineer a range of its own elements to play vital roles in how a site will operate or how it can interoperate with other sites.

Depending on the website, there might be plenty going on inside its head.

So what are your options and how can they benefit your website? Well there’s quite a lot actually!

There are ways to add useful metadata into your documents (for search engines and other web robots to find), icons that you can supply web browsers for extra visuals (like favicons or device-specific icons for the iPad/iPhone), ways to allow the syndication of your content, and even stylistic and behavioral references that include external stylesheets and scripts.

In essence, the <head> of our HTML documents give the markup below it extra meaning.

Thinking code has many purposes, and not all of it is regulated by an official W3C specification!

Head Elements Gone Rogue

One thing that is unique to the head of our HTML is that it’s adoption and usefulness is determined on convention and popularity. Metadata, for example, relies on search engines and social networks to acknowledge and use the data, and link references require browsers to take advantage of them. Some things that can be included inside the head of our documents aren’t even officially supported by W3C specifications — such as <meta name="Googlebot"> that is a proprietary meta tag for Google’s spiders — but because of the nature of the elements, they are valid markup.

Independent Elements

The first elements we should talk about are those which are independent in the sense that they just serve a single purpose.

One of these elements is so mission-critical that you are required by HTML standards to include it: the <title> tag.

Below are five of the seven (excluding meta and link, since we will talk about them later) head elements:

<title>This tag describes your document in the browser’s title bar.
<script>This tag allows you to either embed or link to JavaScript files.
<style>This tag embeds CSS inside the document.
<base>This tag states the base directory of files (for relative links).
<object>This tag can be used in the HTML head; typically it is used inside the <body> to include page assets such as Flash components.

Example:

<title>Six Revisions - Web Development and Design Information</title>

A document’s title should be unique on every page and should adequately describe its content.

While having a title in your document is required (if you follow W3C standards), the other tags might be of limited use to you.

For example, external stylesheets (instead of <style> tags) and an htaccess file (as opposed to <base>) are better options for declaring CSS style rules and declaring the base directory.

Mighty <meta> Tags

Of all the elements that appear in a document’s head, none is as ubiquitous as <meta> elements.

These elements — while being highly desired for search engine optimization– are more of a pseudoscience affair, as the influence they have on search engines aren’t publicly disclosed.

With the exception of the <meta="http-equiv" content-type=""> that specifies the document’s MIME type, they are all optional.

Getting the page’s encoding correct (through content-type) is important.

IE6 can take advantage of a special http-equiv value called imagetoolbar

Below are some examples of http-equiv values:

<meta http-equiv="Cache-control">Gives you greater control over browser caching.
<meta http-equiv="Content-type">States the MIME type for layout engines.
<meta http-equiv="Content-language">Dictates the primary spoken/written language used in the document.
<meta http-equiv="Expires">States the expiration date of the document.
<meta http-equiv="Imagetoolbar">Forces IE6 to either disable or enable the image toolbar on hover.
<meta http-equiv="Last-modified">Allows you to specify when the document was last modified.
<meta http-equiv="MSThemeCompatible">Disables (or restores) the default theme for form components in Microsoft Internet Explorer 6 and above.
<meta http-equiv="Refresh">Redirects the page at a specified time (web spiders don’t like this one).
<meta http-equiv="X-UA-Compatible">Microsoft extension to dictate compatibility mode triggering.

Example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Of course, http-equiv isn’t the only attribute that can provide useful information. And even though keywords are presumed to be ignored by Google and description is only used to represent SERP listings (not acting as a ranking factor), there are no set standards for what values should be used.

Search engines like Google can use a <meta description=""> in its results.

Below are a few more types of <meta> tags:

<meta name="Abstract" >A quick summary of the main points of the content.
<meta name="Author" >Who authored the HTML document.
<meta name="Contact" >An email address, phone number or physical address for the site.
<meta name="Copyright" >Copyright information.
<meta name="Description" >Describes the HTML document.
<meta name="Designer" >The producer of the site.
<meta name="Generator" >What was used to generate the HTML document.
<meta name="Geo.placename" >Indicates the town or city of which the site is regionally based.
<meta name="Geo.position" >Gives longitude and latitude (semicolon separated) position.
<meta name="Geo.region" >Uses two digit region codes to indicate location (such as GB).
<meta name="Googlebot">Can tell Google to Noarchive, Nosnippet, Noindex and Nofollow.
<meta name="Keywords" >This element lists comma separated words linking to content.
<meta name="Language" >States the primary language used within the sites content.
<meta name="Publisher" >Lists the name and version of the product that built a site.
<meta name="Robots" >Replaced by robots.txt, this specifies page by page indexing.
<meta name="Subject" >Indicates the subject matter to which the content relates.
<meta name="Viewport" >Used by Apple devices to indicate the content window size.

Code Example:

<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />

While it’s true that meta tags don’t have a strict set of standards, conventions have come into existence to help decide which tags and values should be used.

Search engines (who pick what they feel are worth recognizing), social networks (that use the data to categorize a site) and organizations like the DCMI (trying to reduce our confusion) are responsible for such efforts to help in such situations.

Metadata isn’t a science, but the geographical positioning elements can seem like one.

Below is a list of the most widely adopted Dublin core metadata elements:

DC.ContributorGives names of individuals who contributed to the resource.
DC.CoverageThe scope covered by content (like place names or co-ordinates).
DC.CreatorAn individual responsible for the construction of the content.
DC.DateThe point of time of which the page or content was created.
DC.DescriptionExplains the resource and can include links to a table of contents.
DC.FormatProvides the file format of the document (for interpretation).
DC.IdentifierLinks to a URL, DOI, ISSN or ISBN which references the content.
DC.LanguageProvides details of the language or dialect used for content.
DC.PublisherIdentifies the person or group who made the resource available.
DC.RelationLinks to a resource which relates to the published information.
DC.RightsGives license data such as a link to your terms of usage policy.
DC.SourceHighlights the source or URL of origin for the pages cited content.
DC.SubjectLists semicolon separated strings that identify a pages subject.
DC.TitleThe name which indicates what the document is known as.
DC.TypeShows content categories, functions, genres or aggregation levels.

Example:

<meta name="DC.Creator" content="Jacob Gube" />

Note: As denoted in an article I wrote called "5 Web Files That Will Improve Your Website," you can actually place all of the relevant DCMI terms and metadata references into a handy, cacheable RDF file. While having meta tags outside the HTML head may sound strange, it’s a recognized way of serving repeating information (such as the site’s creator or site’s spoken language).

The effects meta tags have is of having semantic richness in your HTML documents, making your site all the more interoperable and meaningful to user agents, web robots, and web services.

Luxury <link> Tags

The simple purpose of the link element is (exactly as it sounds) to provide the browser with a location to an external resource that relates to the document in some way.

This element has so many purposes — from providing links to external stylesheets to indicating that RSS feeds are available, licensing of a web page, right across to referencing a favicon for your lovely web design.

Without the link element, Internet Explorer wouldn’t immediately know this feed exists.

Whilst many link conventions have been established, none are more grounded in the rich, textured history of HTML as the stylesheet. As you are already aware, if you have an external CSS file that contains your site’s CSS, you use the <link> element to reference that file within the document’s head. This allows the web browser to load the file, process its contents, and then apply your styles to the document’s objects.

Below are the two primary ways you refer to a CSS file:

StylesheetThis identifies a stylesheet to apply to the immediate document.
Alternative StylesheetThis lists a stylesheet that can be triggered upon a user’s request.

Example:

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

None of the unique style in this design would work without the CSS file it uses.

Since the evolution of CSS3 (and the way Internet Explorer works), a unique level of complexity for stylesheet references have been forged. Not only can you wrap this element within conditional comments, but with media queries, you can apply the code only if certain conditions are met by the user agent.

It’s important that while stylesheet references take much of the glory for the link element, we also mention additional ways to make use of this flexible method of enhancing a site.

A classic example of how such elements can be used is defined by the Opera browser’s "navigation bar" which actively seeks out link references with certain rel values like index, author and home to provide a site-wide method of linking to specific places which may be of use to the end-user (via the browser).

While it’s only found in Opera, or through a plug-in/add-on/extension in other browsers, it can be really helpful in the right hands.

Opera has a navigation menu that links to important document or site sections.

Below are the various navigation links that Opera supports:

AuthorUsually links to a page with author details such as "about us".
ContentsLinks to a page or sitemap which structures the contents layout.
CopyrightReferences a sites copyright, privacy or terms of usage policy.
FirstLinks to the first page or fragment section of a long document.
GlossarySends the user to a page of terms or related external resources.
HelpUsually links to pages where support or contact can be gained.
HomeLinks to the homepage or the primary document of a website.
IndexUsed to link to a page indexing where certain content occurs.
LastLinks to the last page or fragment section of a long document.
NextUsed when content is split over several pages to forward the user.
PrevRefers to a previous page when content is split over multiple pages.
SearchIdentifies a specific page used to perform an advanced search.
UpCan either link to a pages parent or go to the top of a long page.

Example:

<link rel="index" title="Six Revisions" href="http://sixrevisions.com" />

Web browsers can do so much with link elements. It’s extraordinary.

Opera isn’t the only browser that can take additional advantage of the link element. In fact, all of the below have been adopted by browsers to reference external files which can impact either the way your website looks or functions.

AlternateRefers to files that link to the site such as RSS and Atom feeds.
Apple-touch-iconIdentifies an icon image which can be used by Apple devices.
Dublin (Or Meta)Primarily used to indicate an instance of the DCMI RDF document.
P3PLinks to a policy file which relays information about user privacy.
PICS-labelAssigns a content rating based on a sites family friendliness.
SearchIdentifies a web browser compatible OpenSearch document.
Shortcut IconLinks to a Favicon that is shown within the browser address bar.
SitemapRefers to a XML sitemap for search engines to begin indexing.

Example:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

Examples of what can be included can range from OpenID (a universal authentication system) right through to referencing a document or profile setup by the microformat community (such as XFN) which relay semantic information about your pages.

Just because their effects are not visible doesn’t mean they don’t exist.

Below you will find a range of non-standard link references:

appendixLinks to a file providing supplementary details for your content.
bookmarkIdentifies a key fragment within the document like #important.
chapterIndicates a specific chapter or volume of a multi-page document.
editUsed by some CMS software to indicate a location to edit the file.
licenseReferences the documents license (such as Creative Commons).
openid.delegateThe website address used to identify an OpenID users account.
openid.serverThe server where verification and validation of the details occur.
pingbackAllows blogs to determine when someone links to a resource.
sectionIdentifies a section of the document within a given chapter.
subsectionLinks to a specific subsection of a section within a given chapter.
StartRefers to the initial title page within a collection of documents.

Example:

<link rel="license" title="Creative Commons Attribution 2.0 UK Licence" href="http://creativecommons.org/licenses/by/2.0/uk/" />

As a best practice you should always consider your link options carefully as referencing external files may increase the HTTP requests your web pages make to render a web page, thus slowing down page response times. Use only what you need and know why you need them.

Wrapping Up

While the contents of a document’s head could technically be limitless, it’s worth knowing what parts will give you a genuine benefit and which parts will simply be extra bloat you don’t need.

As a general rule, the best principle you can follow is to try and keep the head clean and well structured, but to also strike a balance between keeping things simple and doing what is best for your visitors.

While many people leave their heads as empty as possible, a better plan is to weigh up your options and use whatever enhances the user’s experience.

Behind the scenes in the head of a web page, there are a lot of cool things going on. Don’t overlook it.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

This was published on Sep 14, 2010

28 Comments

Max Luzuriaga Sep 14 2010

Nice article Alex! I didn’t know there were that many uses for the tag!

great….thanks.

James Royal-Lawson Sep 14 2010

Excellent post Alexander!

Obviously, as technically the head is limitless, there are a number of things you could have included in the post (but you have to draw the line somewhere!)

Nevertheless, one link reference that I think you really should have mentioned is rel=”canonical”.

when using HTML5 (=the HTML5-Doctype), you can just use instead of
This works in all browsers (including IE6)

Ups, the tags were eaten :( another try:
when using HTML5 (=the HTML5-Doctype), you can just use <meta charset=”UTF-8″> instead of <meta http-equiv=”Conent-Type” content=”text/html; Charset=UTF-8″>
This works in all browsers (including IE6)

Show de Bola!!!

Mladen Berakovic Sep 14 2010

Great article. Thanks! :)

Very informative and helpful. Thaks very much.

Michael Tuck Sep 14 2010

Excellent article, Alex, comprehensive and useful.

I really enjoy your articles Alex. They are never irrelevant. To me anyway. Thanks for another great read.

Alexander Dawson Sep 14 2010

Thanks for the comments everyone, I’m glad you enjoyed the article. :)

@Young: Hopefully I can keep the standard up in future pieces!

Imran Khan Sep 15 2010

Good read!! very detailed and informative

Thanks

Satya Prakash Sep 15 2010

For Making head more beautiful and helping website faster by ordering styles and js, I have developed this WP plugin: http://wordpress.org/extend/plugins/performance-optimization-order-styles-and-javascript

Great article! Thanks very much :-D

It is a very helpful post which are containing important content.

And the way you’ve written is clean and conceptional so anyone can follow your explanatory notes.

Thanks for sharing.

Kenson Martz Sep 15 2010

Thanks alex! I will bookmark this for later!

1dastkhat Sep 16 2010

Great article.Thanks very much

The title caught me out, I thought the post was tips about the mind, but this was probably more interesting, because there are not a lot of articles about the importance and guidance about the , Thanks!

Sandy Wright Sep 17 2010

it is true, one must keep a balance with the head section. not too much clutter and not too little. deciding what to keep in and what to throw out decides on the site and its goals on the Internets. Thanks for writing!

Really cool article.

Quite a few tags I didn’t even know about here.

Garrett Davis Sep 17 2010

How big of a dork am I that I find an article about head tags interesting…sigh…

Jacob Gube Sep 17 2010

@Garrett Davis: Welcome to the club!

James Wade Weaver Sep 18 2010

Great tips! The head is often overlooked by me!

Only on sixrevsions… these are great information you share with people. Thanks

Great set of tips

Thanks…

good article…

itgasht Oct 14 2010

Great article.Thanks very much

I was in website design n development from last 3 years and didnt knew DNA of Head section…very useful article

This comment section is closed. Please contact us if you have important new information about this post.

Partners