What to do if you don’t have room for an H1 tag, visually in your website design.

I had a blast at the HomeQuest/FATCo/PHATCO event in Portland. I’ve got about three or four followup posts to write, based on questions. But to start off I wanted to address this one about web design (I’m teaching my weekly web design class tonight so it’s top of mind for me).

A more in depth response after the jump.

Someone in the audience had an honest question: “If you don’t have room visually for H1 tags on your website, can you use a value for a text-indent is that going to hurt you [in search engine rankings]?”

My answer was maybe a little brief, but it’s true: You do have room for h1 tags on your website. There’s no such thing as “no room for good code” on your site. As a refresher, here’s what the h1 tag is about, from the W3C:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

So from the first part, you can see that headings are important for conveying what a web document is about. Then in the second part, you see that the h1 is the most important section topic heading available to us as web designers.

Then there’s that little thing about how visual browsers render them larger. This is probably what the question was about. But you don’t have to give up the h1 tag in order to get it to display smaller. You can use Cascading Style Sheets (aka CSS) to control the way an h1 tag looks. So you could use CSS to make all of your h1 tags display smaller, thereby giving you the visual room that you need for your design.

If you only wanted a specific h1 tag to appear different (on your home page, for example) you could single out that specific h1 tag in your code by assigning it an id attribute. So you might write this in your HTML:

<h1 id="make-small">

And then in your style sheet, have a rule for h1#make-small to make it display… small. Learning to use style sheets in this way is critical to making your website useful for non-visual browsers (like those for the blind or search engine spiders or RSS feed tools etc etc) while preserving the visual look you want.

I hope that helps!

Thanks to Darin from Productivity Junkies for doing the video used in this post (and his 2 cents on each of the questions in the full Q+A video are worth reading).