Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Make the Entire Header a Link

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>
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.