Combining Divs and H1 Elements to Include Logos in Web Pages

As with other HTML elements, the inclusion of a logotype in an (X)HTML document is a process that should be accomplished carefully, without breaking the document's semantic structure. Very often, web designers who are taking their first steps in the field think that displaying a logo is similar to working with an ordinary inline image. Unfortunately, this is a mistaken idea. A logo is a visual representation of the name of a website, and therefore its presence must be reflected differently in the site's markup.

The good news is that currently there are a few simple approaches that permit you to display a logo in a web page, while keeping its semantic meaning untouched. Most of these techniques rely strongly on the functionality provided by image replacement methods (IR). If you're not familiar with the inner workings of IR, don't feel concerned, because in this series of articles you'll learn how to use it, in this case for correctly embedding your carefully-designed logo in your website.

In the introductory part of the series I implemented a couple of "quick and dirty" methods that demonstrated how to include a sample logo in a web page first by using only a linked <img> element, and then by adding an extra wrapping div to this element. Even though putting these approaches to work was really a breeze, the truth is that they suffer from some serious issues. They still base their functionality on an <img> tag, which is incorrect from a semantic point of view.

Is there anything better that can be used to include a logo in a more appropriate way? The answer is a resounding yes! If a logo is the visual representation of a website's name, then it should be included directly via an H1 element, which is the top most heading element of a web page.

In keeping with this concept, in this second episode of the series I'm going to demonstrate how a proper combination of a div and an H1 tag can be of great help for semantically embedding a logo in an (X)HTML document.

Now, click on the link below and start reading!