html with "content first" discussion...

[Skyblaze]

I learned that for SEO purposes it is better to code html so that the real important content is first in the html source code and that 'cause for example google gives more importance to the content at the top of the html source. So i always used to code with css layouts that puts the center column (where the main stuff goes) first in the code source. Then i read some discussions about it that said that it is not so crucial to have the content first. What is your point of view and why? Is it still relevant to put the main content first in the html code?

[Dan Schulz]

Two words. Unlearn it.

I'm having problems with my brother's internet connection so I'll get back to you on how to REALLY code a Web page when this problem either clears up or I get back home later today.

[all4nerds]

Hello

Don't care , if it's SEO or no SEO, if thats the requirement content first , I get it don !!!!!!! (whatever they want from me i try to get it going !) , I take it that the guy/girl requesting it has made up his mind to have it that way, it's his/her responsibility, a more pragmatic view in live solves a lot of problems

[felgall]

Which part of the page do you want people listening via a web reader to have read out to them first? That is the part that needs to come first in the HTML. Design your page correctly for your visitors and most of the SEO will be taken care of automatically.

[Skyblaze]

Which part of the page do you want people listening via a web reader to have read out to them first? That is the part that needs to come first in the HTML. Design your page correctly for your visitors and most of the SEO will be taken care of automatically.

ok so the content first is important to screen readers as it is for SEO.....so it is better to do so?

[Dan Schulz]

Still not home yet, and my brother's computer's still acting up, but here's what I do.

Header (IMG element wrapped around a DIV)

Menu (unordered list - should be standard)

Content (main page content)

Sidebar(s - if applicable)

Footer

I'll also include skip links where appropriate as well. The most appropriate location typically depends on the design, placement and type of content on the site.

[Skyblaze]

Still not home yet, and my brother's computer's still acting up, but here's what I do.

Header (IMG element wrapped around a DIV)

Menu (unordered list - should be standard)

Content (main page content)

Sidebar(s - if applicable)

Footer

I'll also include skip links where appropriate as well. The most appropriate location typically depends on the design, placement and type of content on the site.

So it is not necessary that the main content (center column) is the very first code?

[DaveWoods]

I agree with Dan. Menu first with a "skip to content" link so that a screen reader wouldn't have to read through the links on every single page.

Having the navigation second may also have some disadvantages to search engines. If the content was really long for example then the spiders may never reach your navigation and therefore only your index page would be indexed.

With the other scenario where your navigation is really long then at least the spiders would reach all your pages with the navigation first whilst it may cut off the end of your content which whilst isn't ideal is the better option.

Personally, I'd ensure that your navigation isn't too long by breaking it down into sub-sections and ensuring that the information architecture is right for the site so that the navigation isn't too long so that all pages and all the content where possible is indexed.

[DaveWoods]

So it is not necessary that the main content (center column) is the very first code?

Exactly, personally I'd say that the opposite is true and the navigation should always come first.

[AutisticCuckoo]

As long as you have a skip link to the second part, it's not a big deal what comes first.

I personally put the content first, because that's what I prefer to encounter. I go to a web page to read the content, not to go somewhere else immediately.

Navigation first is a legacy from table layouts, where you didn't have much choice if you wanted the menu on the left-hand side. My guess is that those who say they prefer navigation first do so because it's what they are used to, not necessarily because it's the best solution.

For users who have graphic browsers and use a mouse or similar, it doesn't matter all that much. People like me, who prefer to navigate by keyboard, it does matter, but as long as there's a 'skip navigation' link it's not the end of the world.

Dan and Dave, what are your rationales for putting the navigation first?

[DaveWoods]

Dan and Dave, what are your rationales for putting the navigation first?

Having the navigation second may also have some disadvantages to search engines. If the content was really long for example then the spiders may never reach your navigation and therefore only your index page would be indexed.

With the other scenario where your navigation is really long then at least the spiders would reach all your pages with the navigation first whilst it may cut off the end of your content which whilst isn't ideal is the better option.

Personally, I'd ensure that your navigation isn't too long by breaking it down into sub-sections and ensuring that the information architecture is right for the site so that the navigation isn't too long so that all pages and all the content where possible is indexed.

I presume you missed this one

[AutisticCuckoo]

Yes, I must have missed that. However, I don't design my pages for search engine 'bots, but for human visitors. The SE problem should be possible to fix, at least for Google, by having an XML site map for it to digest.

I personally prefer SEs to index my content, rather than following my navigation. What's the point of them indexing a page where they don't see any content? You won't get any hits anyway, will you?

[DaveWoods]

I wouldn't treat it as one or the other gets indexed though.

If your navigation is that long that it's likely to stop your content from getting indexed then I'd say there's a problem with the length of your navigation. However, it's probably more likely that lengthly content will stop the bots from reaching your navigation.

I do agree with you though, as I obviously design my site for human visitors but it's something that I'd always consider when designing a site in the same way that I'll consider usability and accessibility. It's not something that I'd think about separately as a site can be both usable and accessible to a human as well as being equally accessible to a bot.

[Dan Schulz]

Tommy, I keep everything short, sweet, and to the point. If either my menu or content are too long, I seriously look at either shortening them up or breaking them into separate pages or splitting the menu into two menus, putting the second part after the content (I have one site where I'm literally going to have to do this).

Also as an occasional mobile user, I prefer to have the menu first when I get to a site. My cell phone is old (by American standards - which is a laughingstock compared to the Web enabled cell phones in Europe) and I don't want to have to chew up minutes (my cell's pre-paid) going from the top of the page to the bottom just to read the menu and figure out where I want to go.

Granted skip links can help with that, but I'd rather skip a small menu than a lot of content just to find my way around and read what's on the page.

[all4nerds]

Hello

The request for clean code content first is rather high

<!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>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{height:100&#37;;}
	
	*{padding:0;margin:0;}
	
	body{
	padding:0 12em;
	background:#ffccff;
	/* background:#ccffcc; */
	font-size:.75em;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	div,ul,li,h1,p{font-size:1em;font-weight:100;}
	
	ul{list-style:none;}
	
	div,div+div,div+ul{min-height:100%;margin-top:-8em;}
	
	div+ul{float:right;}
	
	div,div+div{float:left;}
	
	body>div{
	background:#ccccff;
	width:100%;
	margin-right:-100%;
	text-align:right;
	}
	
	div+div{margin-left:-12em;background:transparent;text-align:left;}
	
	div+div,div+ul{width:12em;}
	
	div+ul{float:right;margin-right:-12em;}
	
	div+ul+ul{
	min-height:8em;
	clear:both;
	background:#cccccc;
	margin:0 -12em 0 -12em;
	text-align:left;
	position:relative;
	}
	
	p,li{padding:.2em .5em .2em .5em;min-height:1%;}
	
	div+div p,h1,div+ul li{padding:16.2em .5em .2em .5em;}
	
	ul+ul+div{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	background:#ffcccc;
	text-align:right;
	min-height:8em;
	height:8em;
	margin:0;
	}
	</style>
</head>
<body>


<div>
<h1>
middle
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
end
</h1>
</div>

<div><p>left end</p></div>

<ul><li>right end</li></ul>

<ul><li>footer</li></ul>

<div><p>logo</p></div>


</body>
</html>

The above code was developed from this model , and it's not that difficult to do, it just needs adjusting to, a little teaser for two gentleman

<!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>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{height:100%;}
	
	*{padding:0;margin:0;}
	
	body{
	padding:0 12em;
	background:#ccccff;
	/* background:#ccffcc; */
	font-size:.75em;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	div{font-size:1em; }
	
	.ab{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	}
	
	.header,.footer{height:8em;}
	
	.header{background:#ffcccc;text-align:right;}
	
	.left,.middle,.right{min-height:100%;margin-top:-8em;}
	
	.left,.right{width:12em;background:#ffffcc;}
	
	.left,.middle{float:left;}
	
	.left{
	background:#ccccff;
	margin-left:-12em;
	position:relative;
	left:-1%;
	}
	html:first-child .left{left:0;}
	
	.middle{
	background:#ffccff;
	width:100%;
	margin-right:-99%;
	text-align:right;
	}
	html:first-child .middle{margin-right:-100%;}
	
	.right{
	float:right; 
	background:#ccccff;
	margin-right:-12em;
	}
	
	.footer{
	clear:both;
	background:#cccccc;
	margin:0 -12em;
	}
	
	p{padding:.2em .5em .2em .5em;}
	
	.left p,.middle p,.right p{padding:16.2em .5em .2em .5em;}
	
	</style>
	<!--[if IE]>
	<style type="text/css">
	.middle{margin-right:-100%;left:0;}
	.left{left:0;}
	* html .left,* html .middle,* html .right{height:100%;display:inline;}
	* html .right,* html .left,* html .footer{position:relative;}
	* html .header{margin-right:-24em;}
	</style>
	<![endif]-->
</head>
<body>


<div class="middle">
<p>
middle
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
end
</p>
</div>


<div class="left"><p>left end</p></div>

<div class="right"><p>right end</p></div>

<div class="footer"><p>footer</p></div>

<!--  -->
<div class="ab">
<div class="header"><p>header</p>
</div>
</div>


</body>
</html>

[Dan Schulz]

Which loses all semantic meaning. What is a header? What is a footer? Where do they belong?

[all4nerds]

Which loses all semantic meaning. What is a header? What is a footer? Where do they belong?

Hello

Yeah , well you can't have two things fist in the HTML or can you I can also change the word header in something else if that's bothering you logo is maybe good

[Dan Schulz]

And where does the logo usually go?

[AutisticCuckoo]

Also as an occasional mobile user, I prefer to have the menu first when I get to a site. My cell phone is old (by American standards - which is a laughingstock compared to the Web enabled cell phones in Europe) and I don't want to have to chew up minutes (my cell's pre-paid) going from the top of the page to the bottom just to read the menu and figure out where I want to go.

As I said, it depends on what you expect to do once you arrive on a particular page. Me, I expect to read the content on that page, which is why I prefer to have the content first. Then, once I'm done with that, I may consider going to other pages on that site, and by then I've arrived neatly at the menu.

If you expect to go somewhere else first thing after loading a page, why are you loading that page at all? Why not load the one you're going to instead of chewing up minutes by loading a page you intend to leave immediately?

[all4nerds]

Hello

Technically they are interesting models, you can learn a lot, SEO wise they might be a hype, phones to speak to people, pc's to surf the www , hammers to hit nails, but you can do the same if needed with a screwdriver

separated in what the css is needed for

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of web site</title>
	<!--[if IE]>
	<style type="text/css">
	* html .fc{height:1&#37;;} /* haslayout IE 5 5.5 6 */
	.fc{min-height:1%;} /* haslayout IE 7 */
	</style>
	<![endif]-->
	<style type="text/css">
	<!--
	html,body{height:100%;}
	
	*{padding:0;margin:0;}
	
	/* em control */
	body{
	background:#a2a2a2;
	font-size:75%;/* em control */
	font-family:verdana,sans-serif;
	text-align:center; /* IE 5 */
	}
	div,p,h3{font-size:1em;/* em control */text-align:left; /* IE 5 */}
	
	/* special */
	head+/**/body .fc:after{ /* float clearing, min-height browser but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}	
	
	/* eXtended columns */
	.ex{padding-bottom:32767px;margin-bottom:-32767px;}
	
	/* structure */
	.wra{background:#ffffcc;}
	* html .wra{height:100%;} /* IE 5 5.5 6 */
	head+body .wra{min-height:100%;overflow:hidden;} /* min-height browsers */
	
	.ab{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	text-align:center;
	}
	.he{background:#ff8c00;}
	
	* html .r,* html .l,* html .ll{display:inline;}
	
	.r{ /* margin box */
	float:left;
	margin-right:-200%;
	width:100%;
	background:#c6c6c6;
	}
	.l{float:left;background:#d8d8d8;} /* left column */
	.ll{float:right;background:#b4b4b4;} /* right column */
	
	/* text */
	.he p,.na p,.wra p,.fo p,.wra h3{padding:.5em .8em .2em .8em;}
	.r h3{border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
	.r p{text-align:right}
	
	/* parameter block */
	
	/* header footer control */
	html .wra{margin-top:-3em; /* margin for footer */}
	.ab{height:10em;} /* height header + height nav*/
	.he{height:7em;} /* height header */
	.na{height:3em;background:#fbfbfb;} /* height nav */
	.fo{height:3em;background:#fbfbfb;} /* height footer */
	html .l,html .ll,html .r{border-top:13em solid #ffffff;} /* height header + (margin footer=height footer) + height nav */
	
	/* column parameters */
	.wx{width:84em;margin:0 auto;} /* class w page width */
	.w{width:64em;margin:0 auto;}
	.l{width:18em;} /* Left column */
	.ll{width:12em;} /* Right column */
	.r{margin-left:18em;} /* width L column  */
	.r p,.r h3{margin-right:30em;} /* L w column  + R w  column */
	-->
	</style>

</head>
<body>

<div class="wra w fc">

<div class="r ex">
<p>
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
content area content area content area content area content area content area content area 
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 -->
content area<br>
</p>
<h3>width check</h3>
</div>


<div class="ll ex">
<p>

right pane area<br>
right pane area<br>
right pane area<br>
right pane area<br>
right pane area<br>
right pane area<br>
right pane area<br>
right pane area<br>
right pane area<br>

</p>
</div>


<div class="l ex">
<p>
left pane area<br>
left pane area<br>
left pane area<br>
left pane area<br>
left pane area<br>
left pane area<br>
left pane area<br>
left pane area<br>
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 -->
left pane area<br>
</p>
</div>


</div>

<div class="fo w"><p>footer</p></div>

<div class="ab">

<div class="he"><p>header</p></div>
<div class="na w"><p>nav</p></div>

</div>

</body>
</html>

[Chroniclemaster1]

In the HTML, my navigation is dead last on the page. The only thing that comes later is the <script> tag to my unobtrusive javascript file. I've heard the SEO argument, and the actual page length you need to reach that cut off level (much less exceed it) is pretty obscene. I don't really care about that.

I do it because the content is the most important part of each page. You shouldn't have to search the page for it. That and I've seen seniors and the blind with screen readers and braille displays struggling through the 5 million links in a poorly designed 3 column layout (Yeah, I'm talking to you Yahoo!) and after each link they have to stop to see if FINALLY there is text for them to read... and if they tab once too far... then they're into the footer links. And naturally there's no indication that you're looking through footer instead of header links.

It's so easy to get lost in a text browser or navigating by keyboard even in a great layout. My experience has been that the first thing after the body tag is <h1> followed by your content. Otherwise, it's really hard to be truly accessible (as opposed to just checking off all the WCAG checkpoints for your AAA site ...which is not actually accessible to anyone... but don't get me started on that).

Now Visually... That's a completely different story. By UI conventions, I expect to see the navigation above the fold, so I always design either a horizontal navbar that's part of the header or a vertical navbar right underneath it. I simply do that with absolute positioning.

[Skyblaze]

In the HTML, my navigation is dead last on the page. The only thing that comes later is the <script> tag to my unobtrusive javascript file. I've heard the SEO argument, and the actual page length you need to reach that cut off level (much less exceed it) is pretty obscene. I don't really care about that.

I do it because the content is the most important part of each page. You shouldn't have to search the page for it. That and I've seen seniors and the blind with screen readers and braille displays struggling through the 5 million links in a poorly designed 3 column layout (Yeah, I'm talking to you Yahoo!) and after each link they have to stop to see if FINALLY there is text for them to read... and if they tab once too far... then they're into the footer links. And naturally there's no indication that you're looking through footer instead of header links.

It's so easy to get lost in a text browser or navigating by keyboard even in a great layout. My experience has been that the first thing after the body tag is <h1> followed by your content. Otherwise, it's really hard to be truly accessible (as opposed to just checking off all the WCAG checkpoints for your AAA site ...which is not actually accessible to anyone... but don't get me started on that).

Now Visually... That's a completely different story. By UI conventions, I expect to see the navigation above the fold, so I always design either a horizontal navbar that's part of the header or a vertical navbar right underneath it. I simply do that with absolute positioning.

Anyway you can put any navigation first and then put a link "skip to content" no?

[all4nerds]

Hello

Whatever you want first basic demo

<!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>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{padding:0;margin:0;}
	
	body{font-size:75&#37;;padding:0 12em;}
	
	div,p{font-size:1em;}
	
	.l,.q{float:left;}
	
	.l,.ll{width:12em;display:inline;}
	
	.l{margin-left:-12em;background:#cccccc;}
	
	.ll{
	margin-right:-12em;
	float:right;
	background:#ffccff;
	}
	
	.q{
	width:100%;
	background:#ccccff;
	display:inline;
	text-align:right;
	margin-right:-100%;
	}
	
	.x{clear:both;background:#ffffcc;margin:0 -12em;/* text-align:right; */}
	
	.y{position:relative;}
	</style>
</head>
<body>

<p class="x">1 left center right<br /></p>

<div class="l"><p>left</p></div>

<div class="q"><p>center</p></div>

<div class="ll"><p>right<br /><br /><br /></p></div>

<p class="x y">2 center left right SEO<br /></p>

<div class="q"><p>center fist left right</p></div>

<div class="l"><p>left</p></div>

<div class="ll"><p>right<br /><br /><br /></p></div>

<p class="x">3 center right left SEO</p>

<div class="q"><p>center first right left</p></div>

<div class="ll"><p>right<br /><br /><br /></p></div>

<div class="l"><p>left</p></div>

<p class="x">4 right left center<br /></p>

<div class="ll"><p>right<br /><br /><br /></p></div>

<div class="l"><p>left</p></div>

<div class="q"><p>right left first</p></div>

<p class="x">5 left right center<br /></p>

<div class="l"><p>left</p></div>

<div class="ll"><p>right<br /><br /><br /></p></div>

<div class="q"><p>left right first</p></div>

<p class="x">6 right center left<br /></p>

<div class="ll"><p>right<br /><br /><br /></p></div>

<div class="q"><p>right center left</p></div>

<div class="l"><p>left</p></div>

<p class="x">&nbsp;</p>

</body>
</html>

[Chroniclemaster1]

Anyway you can put any navigation first and then put a link "skip to content" no?

To be more precise, what actually comes immediately after my level one heading is a toc div with inpage links to the different sections. So you can choose where you go, but the emphasis is on content... I have a content heavy site.

What I've found is that putting content first is no drawback to people with text browsers or who navigate by keyboard. They are move from link to link, so they automatically skip over even massive amounts of content. Providing a skip link is usually gratuitous though there's certainly no reason you can't have one.

[Skyblaze]

To be more precise, what actually comes immediately after my level one heading is a toc div with inpage links to the different sections. So you can choose where you go, but the emphasis is on content... I have a content heavy site.

What I've found is that putting content first is no drawback to people with text browsers or who navigate by keyboard. They are move from link to link, so they automatically skip over even massive amounts of content. Providing a skip link is usually gratuitous though there's certainly no reason you can't have one.

i meant a skip link at the top of the code before the content and before the navigation that come first in the source.