Six Revisions: A Comprehensive Guide Inside Your


by Alexander Dawson

Become a Facebook Fan of Six Revisions.

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.

Read full article…
http://sixrevisions.com/web-standards/a-comprehensive-guide-inside-your/

Autor: Gabriel Catalano - human being | (#IN).perfección®

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa volver a empezar!

GENTE COSMO

LIFESTYLE - by Esther Herrero

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

imagination is the key

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Poesías, relatos, diario de sueños

Unencumbered by Facts

Taking unsubstantiation to new levels

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

BLOGTEC

Noticias de Tecnologia.

T a l e n t o  en  E x p a n s i ó n

Gestión de personas y transformación digital para las organizaciones líderes de la Era del Conocimiento

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Ideas para la clase

Experiencias creativas en la clase de español.

Little Grey Box

Travel Well

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea Growth Hacking

Expertos en estrategia y auditoria de marketing

The Coaching Alliance

El camino hacia el éxito

Erick Lovera

Mi Pasión en un Blog

Estampas de México.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Escritora y formadora en comunicación

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

be.blog

be. Intelligent Multimedia Education

~~Mente en Gravedad~~

************************************************************************************************************

The Xtyle

Fashion Blog - Un Blog de Moda y Tendencias by Bárbara Sanz Esteban

aníbal goicochea

Tecnologías de la Información y Estrategia

A Waterfall of Sound

"Poetry is when an emotion has found its thought and the thought has found words." Robert Frost

Health & Family

A healthy balance of the mind, body and spirit

Style & Design

Fashion Trends and News

U.S.

News, Headlines, Stories, Video from Around the Nation

A %d blogueros les gusta esto: