Using H1 the right way
8

Using <h1> the right way

Kommentarer inaktiverade för Using <h1> the right way

Smashing Magazine publishes something called 35 WebDesigners – 5 Questions, which is basically a collection of handy tip for CSS designers. While most of it is an interesting read, some of the answers only reflects their personal opinions, like favourite fonts and how to use a <h1> properly.

I’m always amazed how popular it is to use the <h1> for logotype rendering using image replacements. A meaningful <h1> should reflect the page’s content, not the entire site’s author. I guess it’s a misunderstanding that came up when designers all of a sudden realized they needed a <h1> for search engine optimization and semantic meaning, but still wanted their logo on top. Which is an entirely different matter.

So here’s my noble opinion: It’s better to use a <span> for the logo and a good old <img> tag inside it, with a proper alt attribute of course. If the screen layout is negative, f. ex using a black background and white logotype, you can use CSS to replace the background image of that span to a positive logotype and hide the image using a negative text-indent in your print/handheld CSS file.

If you don’t want the <h1> to show in a layout – use display: none; on the h1 in your CSS file, don’t hide it in behind your logo.

From w3.org:

<h1> is the HTML element for the first-level heading of a document:

  • If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
  • If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write while the title should work in any context: Dogs – Your Guide to Pets.

Unlike the title, this element can include links, emphasis and other HTML phrase elements.

The default font size for <h1> in some browsers have, unfortunately, motivated many writers and tools to use an <h2> element instead. This is misleading to tools that take advantage of heading structure of pages, such as Amaya’s
table of contents view. Consider using Cascading Style Sheets, which are designed to express the author’s preferred font sizes corresponding to elements such as <h1> and <h2>