Make the Entire Header a Link

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

With HTML5 and CSS 3, you can use any font you want in your web pages, and you can even create design features like drop shadows without having to use graphics.

In the old days of web design, the banner at the top of most web pages was created with a big, long graphic. Designers resorted to using a graphic because it was the only way to use any font they wanted, and most designers included things like logos in the banner.

Using HTML5 is great for creating faster-loading pages that are more accessible and easier for search engines to read, but it does cause a common problem. How do you link the entire banner area of your page if it’s not a graphic?

Some designers like to link the banner of their sites back to the site’s home page to help visitors find their way home easily. This link is especially useful on the smaller screens of an iPhone. A quick solution to making your entire banner a link is wrapping an anchor tag around text, images, or any block-level element.

Block-level elements, such as a paragraph tag, <div> tag, or a heading tag, begin a new line in the document by default. In contrast, inline elements, such as the <strong> tag, don’t cause a line break.

Here’s how the code looks that turns a banner, created with the <h1> tag, into a link:

<header>
   <a href="index.html">
      <h1><a href="index.html">Jelly Rancher</a></h1>
      <h2>Specializing in Jellyfish Aquariums</h2>
   </a>
</header>