Valid and Semantic code

Sono Juventino · 02-09-2008, 07:33 PM

It seems the most of the users here are graphic designers. I've seen that editors like Dreamweaver are pretty common, so I would like to stress some of the tricks that acctually are the most important for Search Engine optimazation.

Valid and Semantic code:
- We all know about validation. To validate a page means you've used no deprecated tags, and that all your code are nesten fine. The most important thing is that your code is semantic. This means that you are using proper tags in the right occations. This means <h1> for site name, a list for menus, and so on.

I will explain some techniques to use valid and semantic (X)Html and css to get the result you want.

The header:
The header/logo is really just a background color and a nice font. The problem is that every user got to have that font installed to display everything right. Or do they?

The CSS-Technique:
- The image replacement technique is a good approch to the header issue. This is a very easy technique that can be used for everything.

Note that I am skipping some code in these examples. Click the link at the bottom to se full Html Strict and Css with explanations.

(X)HTML:

Code:

	<div id="wrap">
		<h1><a href="/ydf/" title="Home"><span class="hidden">Happilycreate.com - The personal portfolio of Mr....</span></a></h1>
	</div> <!-- end wrap -->

CSS:

Code:

* { margin: 0; padding: 0; outline: 0;  } /* Browser resetting */
* .hidden { display: none; } 	

/*--- Layout ---*/
	
div#wrap {
	width: 900px;
	height: 100%;
	margin: 0 0 0 50px; 
	display: block;
}	
	
/*--- Logo. Using imagereplacement for header ---*/
	
h1, h1 a {
	display: block; 
	width: 250px; 
	height: 139px;
	background: url('images/logo_masthead.gif') no-repeat top left white; }

The result:
- http://2dropsdesign.com/ydf/
- CSS with explanations

I will explain some other usefull techniques later on. Please add your own techniques as some may learn from it.

Aarlev · 03-12-2008, 09:19 AM

Great tip. I always use this technique but recently discovered that Screen Readers don't download the images when using visibility:hidden or display:none;.

You can achieve the same with the (FIR) technique though.

http://www.alistapart.com/articles/j...iptreplacement

Sono Juventino · 03-12-2008, 11:04 AM

It's such a bad thing I can't edit my posts. I think Gino should let us do that.

Either way. I'm no fan of javascript when it's easier/possible to use css. I've some improvments on my code. You may ditch the <span class="hidden"> both in html and the Css.

Just add this to h1, h1 a: text-indent: -9999px;

That should do...

Aarlev · 03-12-2008, 11:53 AM

Quote:

Originally Posted by Sono Juventino

It's such a bad thing I can't edit my posts. I think Gino should let us do that.

Either way. I'm no fan of javascript when it's easier/possible to use css. I've some improvments on my code. You may ditch the <span class="hidden"> both in html and the Css.

Just add this to h1, h1 a: text-indent: -9999px;

That should do...

I'm not a fan of Javascript either. It was just to notify people that it's an option. I think the -9999px technique is the best option I can find for image replacement (the only downside being images off/css on). There are loads of different ways to do this if anybody is interested.

http://www.mezzoblue.com/tests/revis...cement/#phark2

Sono Juventino · 03-13-2008, 06:00 AM

The problem with mezzoblue's version is that you page/site name should always be in the <h1>-tag. <h1> is a very important part of your website and it should, preferably, be dynamic, like in blog systems as wordpress etc. Note that h1 should be used just once per page.

In that way, you can display: 30 great ways to dah-dah... - Youthedesigner.com, to the search engines, but show users your logo (etc).

Aarlev · 03-25-2008, 01:21 PM

If its a small site and your page titles are things like 'About Us' etc, then SEO wise you are probably better off putting the site name/company name in the h1.

But If you have a very large website with lots of content, would it not be better for SEO to use H1 for your individual page titles as the title of the site always stay the same? And you have your title in <title></title> anyways?

ardcor · 04-30-2008, 06:35 AM

i usually use hte h1 { style="hidden" } instead of the indent. is there any advantages of using the indent method?

Aarlev · 05-09-2008, 11:42 AM

Quote:

Originally Posted by ardcor

i usually use hte h1 { style="hidden" } instead of the indent. is there any advantages of using the indent method?

The -9999px method works with screen readers as well. They don't like visibility:hidden; or display:none; for some reason.

http://www.alistapart.com/articles/fir/

02-09-2008, 07:33 PM	#1
Sono Juventino Football geek Join Date: Feb 2008 Location: Oslo, Norway Posts: 98	Valid and Semantic code It seems the most of the users here are graphic designers. I've seen that editors like Dreamweaver are pretty common, so I would like to stress some of the tricks that acctually are the most important for Search Engine optimazation. Valid and Semantic code: - We all know about validation. To validate a page means you've used no deprecated tags, and that all your code are nesten fine. The most important thing is that your code is semantic. This means that you are using proper tags in the right occations. This means <h1> for site name, a list for menus, and so on. I will explain some techniques to use valid and semantic (X)Html and css to get the result you want. The header: The header/logo is really just a background color and a nice font. The problem is that every user got to have that font installed to display everything right. Or do they? The CSS-Technique: - The image replacement technique is a good approch to the header issue. This is a very easy technique that can be used for everything. Note that I am skipping some code in these examples. Click the link at the bottom to se full Html Strict and Css with explanations. (X)HTML: Code: <div id="wrap"> <h1><a href="/ydf/" title="Home"><span class="hidden">Happilycreate.com - The personal portfolio of Mr....</span></a></h1> </div> <!-- end wrap --> CSS: Code: * { margin: 0; padding: 0; outline: 0; } /* Browser resetting / .hidden { display: none; } /--- Layout ---/ div#wrap { width: 900px; height: 100%; margin: 0 0 0 50px; display: block; } /--- Logo. Using imagereplacement for header ---/ h1, h1 a { display: block; width: 250px; height: 139px; background: url('images/logo_masthead.gif') no-repeat top left white; } The result: - http://2dropsdesign.com/ydf/ - CSS with explanations I will explain some other usefull techniques later on. Please add your own techniques as some may learn from it. __________________ http://juvenorge.com \| Personal site (Comming soon)

03-12-2008, 09:19 AM	#2
Aarlev Bill Bailey for President Join Date: Jan 2008 Location: London Posts: 279	Great tip. I always use this technique but recently discovered that Screen Readers don't download the images when using visibility:hidden or display:none;. You can achieve the same with the (FIR) technique though. http://www.alistapart.com/articles/j...iptreplacement __________________ *"When was the last time you did something for the first time?"*

03-12-2008, 11:04 AM	#3
Sono Juventino Football geek Join Date: Feb 2008 Location: Oslo, Norway Posts: 98	It's such a bad thing I can't edit my posts. I think Gino should let us do that. Either way. I'm no fan of javascript when it's easier/possible to use css. I've some improvments on my code. You may ditch the <span class="hidden"> both in html and the Css. Just add this to h1, h1 a: text-indent: -9999px; That should do... __________________ http://juvenorge.com \| Personal site (Comming soon)

03-13-2008, 06:00 AM	#5
Sono Juventino Football geek Join Date: Feb 2008 Location: Oslo, Norway Posts: 98	The problem with mezzoblue's version is that you page/site name should always be in the <h1>-tag. <h1> is a very important part of your website and it should, preferably, be dynamic, like in blog systems as wordpress etc. Note that h1 should be used just once per page. In that way, you can display: 30 great ways to dah-dah... - Youthedesigner.com, to the search engines, but show users your logo (etc). __________________ http://juvenorge.com \| Personal site (Comming soon)

03-25-2008, 01:21 PM	#6
Aarlev Bill Bailey for President Join Date: Jan 2008 Location: London Posts: 279	If its a small site and your page titles are things like 'About Us' etc, then SEO wise you are probably better off putting the site name/company name in the h1. But If you have a very large website with lots of content, would it not be better for SEO to use H1 for your individual page titles as the title of the site always stay the same? And you have your title in <title></title> anyways? __________________ *"When was the last time you did something for the first time?"*


Welcome to our Graphic Design Forums! Your Design Forums has active graphic design forums where community members discuss graphic design related topics.

04-30-2008, 06:35 AM	#7
ardcor Ardcor Massive Join Date: Apr 2008 Location: London UK Posts: 244	i usually use hte h1 { style="hidden" } instead of the indent. is there any advantages of using the indent method? __________________ Now you can hire me! My Site - www.adamwoodhouse.co.uk My DA - http://ardcor.deviantart.com Me on Adobe.com http://www.adobe.com/designcenter/ga...tent=woodhouse

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode