by Alexander Dawson
Become a Facebook Fan of Six Revisions.
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.
Read full article…
http://sixrevisions.com/web-standards/a-comprehensive-guide-inside-your/
Te gustó compartidlo!
Gabriel Catalano® 