SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fast Q regarding H1 and logo

    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
    Never be shy to ask silly Qs
    An answer is always better than none

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Never be shy to ask silly Qs
    An answer is always better than none

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •