The branding and heading article
Recently i found myself on the wonderful forum which is boag world. This, in itself is not a new thing, i have been there before. What was new though was that i was posting. I was wondering around in the critique section, when i gave some critique which raised a question which i have now seen a few time. Should the logo and tag line be represented with heading elements?
Something which i see a lot, is people who are using the img tag to include their logo at the top or( increasingly) the bottom of the page. This image is (though not always) accompanied with an alt tag that reads something like “our logo”. This image is also often linked to the home page.
I am sure the logic is that the image is content and that it should therefore be represented in the structure of the page, after all you would like your logo to be a prominent part of how you web page is assessed for search engines and by other bots and spiders.
The code for something like this would often look a bit like the following:
<div id="header" > <a href="path to index"><img src="path/to/image" alt="our logo" /></a> </div>
But, what are the other options?
After reading transcending CSS (a great read) i realized that the logo and tagline, are content of a page like any other. On the scale of things they are also quite important content, after all that is why you chose the words in your logo and you tagline so carefully. So surely they should represent the most important headings on you page?
With this in mind, i was thinking about how to best markup my page header… avoiding presentational code. This is what i ended up with:
<div id="branding" > <h1><a href="path to index">jkg3.com</a></h1> <h2>Somthing Different</h2> </div>
So, simply put, i have named the containing div “branding” as this describes the content. i have not used header because header is describing its position on the page (at the head) and the branding may not always be at the top of the page. I have not called it logo because it also contains my tagline.
Then i have used a <h1> element. My logic behind this is: When i was deciding on the name and the domain for my website (which in this case is the same thing) i thought about what the name means. I knew this was a very important part of the branding for my website and thus an important heading for the page. therefore i have made it a <h1> element.
A little about the anchor tag. Somthing i have often heard from other web developers, and clients is that they like the fall back navigation a clickable logo provides. By using an anchor element, set to display as a block, i have enable this to still happen, even though my logo image is set externally in the CSS.
For the tagline i am using the <h2> element. This is because when choosing a tagline i was aware that it was an important part of the branding; although, not as important as the logo. Using the <h2> element signifies this importance and should help spiders and bots to parse he page meaningfully.
Styling:
So now we have the semantic XHMTL, what about the styling?
The styling to make this show your logo is relatively simple. Using Phark Image replacement, i have moved my text inside the div element -5000px to the left and then made my logo the background.
I have then set the contained anchor ( <a> ) element to block level so that it fill the space above the logo and enables the required clickiable link.
The CSS looks somthing like this:
#branding {
/* your logo or heading width here */
width: 200px;
/* your logo or heading hight here */
height:40px;
/* just to ake the exmaple clearer */
border: #CCCCCC solid 1px;
/* again for making the example cleaere */
background:#F6F6F6;
/* !importsnt this move the text out of the way to allow the branging / logo to show though */
text-indent:-50000px;
}
#branding a {
/*this sets the a element to a block, and enables the clickable region over the logo. */
display:block;
/*this helps to make the a block sit inside the h2 block.. this is not a requirement, but it helps with bug fixing */
margin:0px;
padding:0px;
}
#branding h1, h2 {
/*this helps to make the a block sit inside the <h2> block.. this is not a requirement, but it helps with bug fixing */
margin:0px;
padding:0px;
}
The comments explain what each rule is doing.
Why do this?
I am going to quickly sum up the advantages to using this method:
- Screen reader friendly.
- More accessible
- Search engine (or any web spider) friendly
- Separates content from presentation.
- Allows for branding change entirely in the CSS
- Makes producing handheld style sheet simpler
So here is another method for marking up branding on a webpage… what do you think? Leave a comment with how you feel!