> Paul Sturgess wrote:
> How about this approach, no need for the company name to show twice:
>
> <h1><a href="/"><img src="logo.gif" alt="Company name" /></a></h1>
>
> Personally I like the logo to show with styles off and if the user has
images > off then the alt tag provides the text. I would be interested to
know how
> people markup their company logo that don't use an h1 tag, I like the idea
of > reserving those for the particular page headings but can't really see
what to > use for the logo instead.
How about nothing?! (i.e. no heading for this)
Perhps I should confess at this point: I have a deep antipathy towards
logos, but I know how marketing people love them! ;)
Ideally, I aim to do three runs through HTML/CSS when coding up a site:
1. Try and mark-up the whole thing without images
2. Go through and insert images that should be hard-coded - you might call
these 'illustrations' (I think Patrick might have been making a point
earlier that logos might come under the category of 'illustration')
3. Do all the CSS styling: this covers all aspects of the page which are
superfluous / not _absolutely_ required (images which fall into this phase
are inserted as background-image)
In the 'real world' (TM), however, these steps get mixed together due to
commercial pressures (e.g. marketing) or technical restrictions (such as
browser bugs; the fact that we only have h1-h6)
Pragmatically, I like Patrick's <h1><a href="/"><img src="logo.gif"
alt="Company Name" /></a></h1>
The pros:
- you get something meaningful with images off
- it prints as an image (which pleases marketing types :D)
- alt text scales according to user font-size preferences
The cons:
- I think that something that is text (i.e. the company name) gets marked up
as an image
At nature.com, we do something like Patrick's solution, but we just ditch
the h1, using only an image tag. We use the document title to spell out what
site your on and reserve the h1 for 3 headings in the document: 1 at the top
of the content (which helps indicate what the page is actually about), 1 at
the top of each of the navigation columns.
Because the navigation columns are really separate from the content
(belonging to the site as a whole, and not the page content), using 3 h1s
here seems the right thing to do (it very rarely is, I think)
You then get an outline structure that looks like this:
[site title]
|- [h1] Page heading
|- [h2-h6] any subheadings etc...
|- [h1] Main Navigation
|- [h1] Extra Navigation
IMHO, it isn't "ideal" - I would prefer just a text h1 for the logo - but it
does have the advantage of being a linked logo image that prints and has alt
text, whilst preserving heading structures for use elsewhere in the page.
Chris
********************************************************************************
DISCLAIMER: This e-mail is confidential and should not be used by anyone who is
not the original intended recipient. If you have received this e-mail in error
please inform the sender and delete it from your mailbox or any other storage
mechanism. Neither Macmillan Publishers Limited nor any of its agents accept
liability for any statements made which are clearly the sender's own and not
expressly made on behalf of Macmillan Publishers Limited or one of its agents.
Please note that neither Macmillan Publishers Limited nor any of its agents
accept any responsibility for viruses that may be contained in this e-mail or
its attachments and it is your responsibility to scan the e-mail and
attachments (if any). No contracts may be concluded on behalf of Macmillan
Publishers Limited or its agents by means of e-mail communication. Macmillan
Publishers Limited Registered in England and Wales with registered number
785998
Registered Office Brunel Road, Houndmills, Basingstoke RG21 6XS
********************************************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
