By now, your header’s rockin’, I just know it. You know how to put a cool background on it, use one of WordPress’ built-in functions to put all your pages in the navigation, make your list of pages display nicely as a horizontal navigation, and use CSS to add cool, classy effects to your navigation when anyone hovers or selects one of the pages.
But there are still a few more important things to talk about in your header. Though these last few tips don’t have much to do with how your header looks, they’re just as important as putting a background on you header or making your navigation bar look nice.
Time To Go Home
Pop quiz: which page on your website are people going to go to most? The answer’s easy, and although every website is different, the answer is the same for 99% of you: your homepage is the page that people will visit the most. So, as the owner of the website, you want to make it super-easy for people to get there. Some people put a link in the navigation. While this helps, there’s an even better solution: your header itself. In fact, it’s expected that clicking on the logo of your website, or your header, will get people back to the homepage. Otherwise people will spend a lot of time clicking there, and get frustrated when they find out it isn’t even a link… or it goes somewhere unexpected.
Ideally, we want the entire header to be a link… except for the navigation, of course. It would be pretty silly to have your entire navigation link to the homepage, when you really want it to link to each of the individual pages on your website. Usually, the area that you want to be clickable is going to be a big rectangle (technically it’s possible to make almost any shape of area clickable, using a combination of <map> and <area> tags… but it’s very rare to see that used, and involves a lot more work than your typical rectangle, so we’re not going to go into that today).
Our rectangle needs to have a width and a height (otherwise, how will your browser know what area is supposed to be clickable?). This is easy to do, using the height and width properties in CSS, like this:
#header h1 a { height: 200px; width: 900px; }
However… if you do that and nothing else, your area still isn’t going to be a big old link like we want it to be. Why? Well, we can think of it as a big block of area. But right now, we’re not telling our browser that… so we need to add one more property to our CSS – display:block;.
#header h1 a { height: 200px; width: 900px; display: block; }
This (obviously) tells our link to display as a block! Woo! How easy is that?
See No Website… Hear No Website?
Another thing that might not immediately come to mind when you’re developing your website, but that is also very important, is accessibility. Ideally, you want everyone to be able to use your website, even if they’re blind, or deaf, or otherwise impaired such that they cannot enjoy your website to its fullest extent. In addition, some people choose to keep JavaScript or CSS disabled – while they won’t be able to view your website as it was meant to be enjoyed, you still want them to be able to use your website.
One thing that we do, that you might have seen before, is put ‘alt’ attributes on images, so there’s text associated with each image for screen readers to read. But when we created our header, we didn’t use an <img src="" alt=""/> tag to create our image… instead we put it as a background on one of our header <div>s. This means we can’t use the ‘alt' attribute. So what do we do?
For most of us, we’re not using actual text in our header image… the blog title (and any other relevant text) is probably part of the image itself. So what we can do is add an <h1> element (that means header 1 – since the biggest and most important header on your website is the header that we’ve been discussing these last few weeks, and everything else is sub-headers) and put our blog title there. But… ew. You do that, and the text shows up right on top of your pretty header image. Doesn’t look so great, does it? Okay, so something needs to change.
Luckily, we have the text-indent property in CSS. We can put this property on the header’s <h1>, and set it to -9999px… that’s so far negative, there’s not a chance in heck it’ll show up on your actual website. It might seem like there’s no point in putting up a title that’s not going to show up… but anyone with CSS disabled will be able to see it, and things like screen readers and the spiders and bots from places like Google, Yahoo, or Bing will be able to see and understand this, even though the image means little to them. A good thing for your website’s search ranking, and a very, very good thing for accessibility.
That’s All, Folks!
Can you believe it? That wraps up everything I wanted to tell you about the header! Of course, if you have any additional questions, you can always ask in the comments section or even send me an email. Next week, we go to the very end of your website… the footer. But don’t worry, that doesn’t mean we’ll never talk about everything in between… all in due time, my friends. All in due time.
