Fast Q regarding H1 and logo

**hisham777** · Mar 16, 2007 06:56

Hi;

I'm working on a site now, i designed the whole site in Fireworks,

now am trying to convert it to xHTML and CSS.

The Question

When the logo and the title are an image, how do you describe H1?

as fare as i know the title of the site is the H1 and usually the logo?
Its a surprise for me never come cruse this before!

Thanks for any help.
Regards

**Dan Schulz** · Mar 16, 2007 07:13

Actually, the H1 is the title of the page, though many people (myself included) often use it as the site title instead.

What I do is use the H1 for the title, then stick an empty SPAN inside the H1, but right before the text, and use CSS to replace the text with the image.

You'll want to look at this:
http://www.sitepoint.com/article/hea...ages-css-xhtml

**hisham777** · Mar 16, 2007 07:21

Very interesting ended thank you am reading it now.

but if the title of the page will be described as H1 then H2 for sub titles..etc

what about the main navigation please if any of you know alink where i can
read about it, please

thanks

**vgarcia** · Mar 16, 2007 07:33

I'd use H1 for the page's title/headline and a relatively meaningless element to enclose the logo image if needed.

You can approach it in two ways:

1. Semantics. People come to your page to read its content. The top-level heading should describe the page. H1-ing the logo is pretty meaningless since the person visiting your site probably cares more about the content of your page than your site itself.

2. SEO. Do you really care if your logo ranks well? For most people the answer is no, they want your content to rank well. Doesn't seem too smart to enclose a logo image in H1 then.

Just offering an alternate opinion

**Dan Schulz** · Mar 16, 2007 07:34

What I tend to do is use the H1 for the site title (bad practice, I know), followed by an unordered list for the navigation (which I give an ID of "menu"), then I'll have the H2 for the page title.

Here's an example:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Three Column CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="Keywords go here" />
<meta name="description" content="A description of this page goes here." />
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
<style type="text/css" media="screen">

/*
	Stylesheet written by Dan Schulz on 28 January 2007.
	Stylesheet last modified by Dan Schulz on 08 February 2007.
	Stylesheet embedded into the HTML file for educational purposes.
*/

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100&#37;;
}

body {
	background: #FFF;
	color: #000;
}

#container {
	margin-bottom: -3em;
	min-height: 100%;
}

* html #container {
	height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */
}

html>body #container {
	height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */
	min-height: 100%; 				/* squashes an IE 7 bug */
}
	h1 {
		background: #FCF;
		color: inherit;
		padding: 0.25em 0;
	}

	#menu {
		float: left;
		list-style: none;
		position: relative;			/* this is needed to set the z-index */
		width: 8em;
		z-index: 1;				/* this is needed to fix a depth-sorting error */
	}
		#menu li {
			float: left;			/* IE 5.x bug fix */
			width: 8em;			/* this is needed since the LI is being floated */
		}

		#menu a {
			background: #F66;
			color: #FFF;
			display: block;
			height: 1%;			/* IE 5.01 bug fix */
			text-decoration: none;
			text-indent: 0.25em;
			width: 100%;
		}

		#menu a:hover {
			background: #FF5;
			color: #000;
		}

	#main {
		float: left;
		margin: 0 -13em 0 -8em;
		width: 100%;
	}
		#content {
			background: #CCF;
			color: inherit;
			margin: 0 13em 0 8em;
			padding: 0 1em;
		}

		#content h3, #content p {
			padding: 0.25em 0;
		}

		#content p {
			text-indent: 1.5em;
		}

	#sidebar {
		background: #FFC;
		display: inline;			/* IE 5 and 6 bug fix */
		float: right;
		padding: 0 1em;
		width: 11em;
	}
	
	* html #sidebar { /* IE 5.x Box Model Hack */
		width:13em;
		w\idth: 11em;
	}
		#sidebar p {
			padding: 0.25em 0;
		}

	#clear-footer { /* needed to make room for the footer */
		clear: both;
		height: 3em;
	}

#footer {
	background: #6CF;
	clear: both;
	color: inherit;
	height: 3em;
}
	#footer p {
		padding-top: 1em;
		text-align: center;
	}

</style>
</head>
<body>
<div id="container">
	<h1>Main Heading</h1>
	<ul id="menu">
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
	</ul>
	<div id="main">
		<div id="content">
			<h2>Content Heading</h2>
			<div class="section">
				<h3>Section Heading</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetuer
					adipiscing elit. In quis erat. Nulla auctor
					consectetuer erat. Sed est tellus, laoreet et,
					faucibus et, cursus ut, lectus. Nulla
					scelerisque, mi vel commodo consequat, turpis
					ligula congue ligula, eget pellentesque turpis
					augue quis diam. Nulla facilisi. Etiam commodo
					quam in metus. Etiam nec nisi ac nisl molestie
					fermentum. Donec ligula ipsum, venenatis in,
					egestas vel, commodo bibendum, est. Donec sit
					amet justo et leo tincidunt rhoncus. Cras
					aliquam sapien eget nisl. Maecenas vitae arcu
					et mi gravida porta. Nullam ultricies tempor
					magna. Sed vel tellus. Etiam sagittis est
					sagittis odio. Etiam mollis mi ac lacus.
				</p>
			</div>
			<div class="section">
				<h3>Section Heading</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetuer
					adipiscing elit. In quis erat. Nulla auctor
					consectetuer erat. Sed est tellus, laoreet et,
					faucibus et, cursus ut, lectus. Nulla
					scelerisque, mi vel commodo consequat, turpis
					ligula congue ligula, eget pellentesque turpis
					augue quis diam. Nulla facilisi. Etiam commodo
					quam in metus. Etiam nec nisi ac nisl molestie
					fermentum. Donec ligula ipsum, venenatis in,
					egestas vel, commodo bibendum, est. Donec sit
					amet justo et leo tincidunt rhoncus. Cras
					aliquam sapien eget nisl. Maecenas vitae arcu
					et mi gravida porta. Nullam ultricies tempor
					magna. Sed vel tellus. Etiam sagittis est
					sagittis odio. Etiam mollis mi ac lacus.
				</p>
			</div>
		</div>
	</div>
	<div id="sidebar">
		<h2>Sidebar Heading</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
			quis erat. Nulla auctor consectetuer erat. Sed est tellus,
			laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque,
			mi vel commodo consequat, turpis ligula congue ligula, eget
			pellentesque turpis augue quis diam. Nulla facilisi. Etiam
			commodo quam in metus. Etiam nec nisi ac nisl molestie
			fermentum. Donec ligula ipsum, venenatis in, egestas vel,
			commodo bibendum, est. Donec sit amet justo et leo tincidunt
			rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et
			mi gravida porta. Nullam ultricies tempor magna. Sed vel
			tellus.
		</p>
	</div>
	<div id="clear-footer"></div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To
		Scare Unsuspecting Children Reserved.
	</p>
</div>
</body>
</html>

User Tag List

Thread: Fast Q regarding H1 and logo

Thread Tools

Display

Fast Q regarding H1 and logo

Bookmarks

Bookmarks

Posting Permissions