What can a header contain?
Working on a website template (which really goes without saying), and I have started with the header (seemed most logical......I'm really including a lot of useless information here).
Anyway, I am really a stickler for keeping out a DIV whenever I can, but I do not want to do anything semantically / structurally incorrect. Obviously the tags are used for headers, but is it okay for these headers to contain more than text? According to the W3, they can contain inline elements (, , etc...), so if I wanted to place my banner (
), and a tag line (plain text) at the top, could I use something like the following?
'...
<h1>
<img src="wherever/my/banner/is.png" alt="This Website's Name" />
<span>For your (insert service) needs!</span>
</h1>
...
Obviously I would use CSS to style it up and make it appealing, but strictly based on the HTML code, is it okay? Would you do it this way or some other?
Another choice would simply be to get rid of the tag completely and use a and a tag, but I would like them to be contained together, and I want the header to be an actual element instead of a background image because, well, I just don't like that.
Thanks for the opinions and help in advance.
Kurtis
JeevesBond posted this at 15:56 — 5th August 2007.
He has: 3,956 posts
Joined: Jun 2002
I've seen a number of ways of doing this and, similar to what we've been discussing with forms, there are a number of ways of doing it, none of which are particularly more correct than others.
Some people have been using header tags to contain a logo and branding information. Some use image replacement to keep the logo as text but show a graphic instead. Usually they use the tag, believing that this is the top level and most important header on the page. I have written about this practice here. Basically, the top level heading on the page should be the name of what's on that page (the article or page title). The branding/header area isn't most important, exept on a home page where there is no other top level content.
So, what you could do is something like this:
<h2><img src="wherever/my/banner/is.png" alt="This Website's Name" />
<span>For your (insert service) needs!</span>
</h2>
I no longer agree with using CSS to replace a logo with text - a log normally conveys visual information. It's not just a replacement for text. So, using the image here as an image is a good method.
Interestingly, I just read the other night n Andy Clarke's Transcending CSS book that calling a header div "header" is really presentational, not semantic. He recommends calling it "branding". A sidebar would be "content_sub" and a footer would be "site-info." I think this is going a bit too far. Header and footer is something eveyone understands and uses. The HTML working group has even proposed new elements for and in the HTML 5 spec.
Oops, this is Megan not Jeevesbond writing - not sure why I'm logged in as him here (I'm at my mom's now - Liam must have been on here last time we were here)
a Padded Cell our articles site!
kazimmerman posted this at 19:31 — 5th August 2007.
He has: 698 posts
Joined: Jul 2005
I was wondering why Liam was linking to your website!
Anywho, I think the best solution here would be to use a DIV for the top header because of the way the rest of the page will be set up (in my case, although it's not too relevant to the overall question).
I would be very interested to find out if they do implement and tags in the future. That would be very handy for structurally marking upa web page without having to use so many IDs.
Thanks err...Megan.
Kurtis
Megan posted this at 15:23 — 6th August 2007.
She has: 11,421 posts
Joined: Jun 1999
And that's exactly what they're trying to do - they were/are even talking about replacing with in order to provide more smantic meaning and hopefully reduce the improper use of div's. Just the other day I was re-writing some tempaltes for a photo gallery script and I couldn't believe how many unneeded div's they had in there. Even div's that should have been paragraphs!
Megan
Connect with us on Facebook!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.