How to use logos, contact information and document headings in Web sites

This document explores the information concerning logos, contact information for the current document and document title headings. I will also mention how I think we can best represent them accurately in our Web sites.

Using logos to build and brand part of our identity

Most companies, groups, individuals (or entities; these terms are used in a broad sense and I will use them interchangeably) have logos that consist of several layers of information that is mostly kept in order and bound to some guidelines that are set by the stake holders. This approach allows the image of the entity to be consistent and be recognizable over time without causing confusion for their viewers. It helps the viewer to associate concepts with the product or service and tries to maintain a relationship. Needless to say, this is one of the important parts concerning the brand and identity of a company.

Logos generally contain the following visible information

• Graphical elements (illustrations, iconography, photographs, accents etc.)
• Typographical elements (size, family, weight, style etc.)
• Colours Palettes
• Object Information (shape, direction, speed, proximity, space, location)
• Textual information

Logos also contain (semi-)hidden information that is either invoked or experienced by the observer

• Emotions
• Desires
• Memory recall
• Thoughts

Given this, it is important to keep this information within the boundaries of the company's guidelines for reasons mentioned earlier. For instance, if a company (e.g. Nike) were to use a different font for its name, not only would it look skeptical for the viewer (e.g. "Is this really a Nike shoe?") but it will also break away from the long established identity. Therefore, it is important to maintain control over this sort of information and maintain consistency.

Concerning HTML (version 4.01), the way to best represent a company logo is to use the img element. There are mainly two important reasons for this:

• It will allow us to keep the presentation in control for our viewers and
• provide the information as part of document's content

It is kept in control because the information is not subject to change based on the user-agent the viewer is using. For instance, we could provide this information using text, however, that would be subject to change even if we were to use a common font type. Consider where IBM's Beton Bold were to fall back to Arial on user's screen.

Similarly, if we were to apply a CSS image-replacement technique the information in the logo is lost when CSS is not available for the user even if the document is printed.

It then follows that the logo is part content since it is not simply used for presentational purposes with CSS.

Using address to represent contact information for the current document

In most cases where the company owners are also the people (i.e. webmaster) to contact for the viewed document, the HTML address element can be used.

In relation to logos, there are other information about the company that may not belong in the logo image nor desired to be presented in the logo. address can handle this quite nicely as it turns out because we can provide some useful information in here like emails, geo-tags, addresses (physical location; only if the contact information for the document is a physical/tangible address), logos (using our img), notes that provide the company tagline, and even an URI to the company site.

This brings us to using a proper document title:

First document heading

We are now free to use the h1 element in our documents that is best fit for document's main heading. The heading information in this case is specific to the information that the document is focused in. The difference between documents boil down to answering this simple question: "what is this document about?" More specifically, "what best describes the core information in this document?" The answer need only be a sentence long.

The information that is used in h1 is unique per document and there should only be a single instance of it in the document. The content within the <h1> and </h1> tags is contextual to the greater part of the site.

This might seem pretty close to the title element however the title content may be used in a little broader sense then the information in the main part of the document. The reason for this is because title accompanies the URL that the document is sitting in since the information is available for things like indexes (e.g. search results) and bookmarks or even to have a constant label that is reachable on the device/client for the document.